Intersoft ClientUI introduces UXFlow, a cinematic 3D media browsing that brings in many new and exciting features and improved performance for better user experience
Redesigned from the ground up, UXFlow is geared toward line-of-business application development with the built-in MVVM support, easier data binding, and item templating. The fluid drag and drop feature lets you achieve previously impossible scenarios, such as item rearranging, drop to other visual containers, and much more. Adding to the powerful features, UXFlow offers visually compelling user interface with highly customizable appearance.
To learn more about the breaking changes from the earlier version, see Migration from Previous Version.
UXFlow is inherited from ISSelectionControl, which mean it can be used to perform a single selection. For more information about selection control, see ItemsControl Overview and Content Model Overview.
The following list describes the data members that are available for simple data binding:
Used to bind the ImageSource property.
Used to bind the Title property.
Used to bind the SubTitle property.
- VideoMemberPath (if any)
Used to bind the VideoSource property.
The following example shows how to bind UXFlow using the member path properties.
Exploring UXFlow Features
MaximumPreview is used to determine the number of item in the left and right hand side of the focused item. The default value is -1 which means there is no limitation of preview item. It is a good idea to set this value to certain acceptable number based on your application layout to improve performance.
Total Focus Item
PageSize determines the index positioned moved when scrollbar is clicked.
Other properties that control the slide show behaviors are:
- SlideShowLatency which indicates the timeout between slides in milliseconds.
- SlideShowRepeat which indicates whether the slide show should repeat back to the start point when it reaches the end of collection.
Start Up Position
StartUpPosition determines the initial position to be selected when the page is first loaded. There are four types of startup position:
In Center mode, the UXFlow flows to the item which is in the center against total items in the collection. The First mode flows the item to the first item, while the Last mode flows the item to the last item.
The following example shows how to use the startup position feature.
Use Image Loader
The UXFlowItem is using ImageLoader control to load the image and perform compelling built-in effects based on the configuration. To disable this behavior, you can set the UseImageLoader property of the UXFlow control to false.
UXFlow can also be used as a video player. When you create an UXFlowItem with MediaType set to Video and a VideoSource is set to a valid URI, the UXFlow automatically displays the player control panel when you mouse over on the the focused UXFlowItem.
You can full screen the video by clicking the full screen button in the control panel. Furthermore, you can also full screen the UXFlow entirely for a better viewing by clicking the full screen button in the main UXFlow user interface.
UXFlow comes with an innovative technology called VirtualFlow™. With this mode, UXFlow does not create the elements for all items. Instead, it creates only a certain number of elements, which is determined by the available space or by the MaximumPreview property.
To enable VirtualFlow mode, you set the EnableLoadOnDemand property to true.
VirtualFlow™ is primarily useful in advanced scenarios or enterprise web applications that require high scalability. For instance, an enterprise web application that displays video-based knowledge base could get the total number of items growing significantly as the business grows.
Drag and Drop Support
UXFlow is also equipped with full drag and drop support, which is powered by ClientUI DragDrop Framework. However, UXFlow implements drag-drop differently compared to other controls such as UXListBox, UXAccordion and UXDock, in the way users interact with the control.
UXFlow does not provide AllowReorderItem, AllowMoveItem, AllowRemoveItem properties. Instead, it introduces AllowDragItem property, which means that UXFlow only provides capability to drag its item (copy mode) and you will need to manually handle additional action in the drag events. When you set AllowDragItem property to true, any UXFlowItem can be dragged when they are positioned in the center as focus item. You can not drag items that are in preview position.
Customizing UXFlow Appearance
There are a variety of UXFlow visual elements that can be easily customized. The visual elements can be generally divided into five sections such as discussed in the following sections:
- Background Appearance
- Control Panel Appearance
- Text Layout
- Reflection Visual Effect
The background element of UXFlow is built using Border element. Therefore you have access to properties like Background, BorderBrush, BorderThickness and CornerRadius at your disposal to control the background appearance, such as shown in the following example.
In certain cases, you may want to customize the background entirely. You can create the template and assign the template to the BackgroundTemplate property. You can also create the template directly from the provided context menu in design-time.
The following example shows how to customize the background entirely by customizing the BackgroundTemplate.
Control Panel Appearance
The control panel element is located at the bottom of UXFlow which provides navigation and control panel for navigating the items.
Several properties that you can customize for this element are:
- The distance / margin with bottom boundary using ControlPanelPosition property.
The buttons visibility / control panel visibility through Control Panel related properties such as ControlPanelVisibility, FullScreenButtonVisibility, SlideShowButtonVisibilty, and ScrollBarVisibility.
Padding affects the UXFlow items positioning in overall. You may want to use this property to position the items in order to create different visual effects or provide some space to display other content.
There are two text elements in UXFlow, a title and a sub title element. Title element is used to display the Title text of the selected item, while sub title element is used to display the SubTitle text of the selected item. The title element is positioned on the top of sub title element; you can control the height of each element through TitleSpace and SubTitleSpace properties accordingly.
These properties are also useful to provide margin between the title element, sub title element and the control panel element. Note that you should specify enough amount of height for the text to be displayed, if your text space is smaller than the actual text size, the text may look truncated.
These text elements can also be collapsed entirely if not desired, distributing more space for the flow element. To visibility of these text elements can be customized through the TitleVisibility and SubTitleVisibility property respectively.
Customizing UXFlow Visual Effects
UXFlow provides two types of visual effects. The first one is adapted from Apple iTunes’s cover flow, which uses a perspective point of view, and the other is an Intersoft's unique implementation which uses scale point of view.
Both of the effect shares several settings in common such as explained in the following list:
Determines the space between the focus item with the first item on the left and right using the following formula [distance = offset * actual CoverSize]. Meanwhile the distance between the rest of items is determined by ItemSpace.
ItemOffset = 0.3
ItemOffset = 0.6
ItemOffset = 0.8
Determines the space between items except the first item on the left and right of focus item.
ItemOffset = 0.4 and ItemSpace = 70
ItemOffset = 0.4 and ItemSpace = 30
In this new version, the perspective point effect has been significantly enhanced to provide visually compelling flow effect.
The perspective effect is controlled by the following properties:
- PerspectiveRotationPerspectiveRotation = 60
Determines the angle of rotation that UXFlow should perform; by default the value is 45.
PerspectiveRotation = 30
Determines the Z position of the perspective. The default value is -200
PerspectiveOffsetZ = 0
PerspectiveOffsetZ = -400
Determines the Y position of the perspective. The default value is 0.
PerspectiveOffsetY = 0
While the flow animation is controlled by:
You can control the flow-in speed and flow out speed in four different transformations (movement x, movement z, scale and rotation). To achieve the best animation as you desired, you may need to play around with these properties.
The effect of this mode is controlled by the following properties:
While the flow animation is controlled by:
You can control the flow-in speed and flow out speed in four different transformations (movement x, and scale). To achieve the best animation as you desired, you may need to play around with these properties.