Skip to end of metadata
Go to start of metadata

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.

On this page:

Selection Control

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.

Understanding FlowIndex

FlowIndex is used to indicate and control the current flow position. FlowIndex will always be the same as SelectedIndex as long the TotalFocusItem property is set to 1.

The following example shows how to use the FlowIndex in the UXFlow control.

HTML

Data Binding

Like the other ISSelectionControl, you can bind collection of data to the UXFlow control. To learn more about data binding, see Data Binding Overview.

The following list describes the data members that are available for simple data binding:

  • ImageMemberPath
    Used to bind the ImageSource property.
  • TitleMemberPath
    Used to bind the Title property.
  • SubtitleMemberPath
    Used to bind the SubTitle property.
  • VideoMemberPath (if any)
    Used to bind the VideoSource property. 

 Note that DisplayMemberPath is not used in UXFlow’s data binding.
ItemContainer type for UXFlow is UXFlowItem.

The following example shows how to bind UXFlow using the member path properties.

Model
View Model
View

Exploring UXFlow Features

Maximum Preview

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.

HTML

Total Focus Item

TotalFocusItem allows users to see one or more items in the UXFlow control. This property should be set to an odd value, for example: 1, 3, 5, 7, etc.

XAML

Page Size

PageSize determines the index positioned moved when scrollbar is clicked.

XAML

Slide Show

UXFlow can also be used as a slide show control. By default, the slide show buttons are visible. You can hide the slide show buttons by setting the SlideShowButtonVisibility property to Collapse.

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. 
XAML

Start Up Position

StartUpPosition determines the initial position to be selected when the page is first loaded. There are four types of startup position:

  • Center
  • First
  • Last
  • Custom

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.

XAML

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.

XAML

Video Player

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.

Virtual Flow

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.

XAML

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.

When AllowDropItem is set to True, a visual hint will be shown when an object is being dragged over to each UXFlowItem. You can change this visual hint by customizing the UXFlowItem template.

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
  • Padding
  • Text Layout
  • Reflection Visual Effect

Background Appearance

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.

XAML

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.

XAML

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.
    XAML
  • The buttons visibility / control panel visibility through Control Panel related properties such as ControlPanelVisibilityFullScreenButtonVisibilitySlideShowButtonVisibilty, and ScrollBarVisibility.

    XAML

Padding

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.

XAML

Text Layout

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.

XAML

Reflection Effects

Reflection effect is one of the built-in effects integrated in the UXFlow control, which can be controlled through the ReflectionBrush property.

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:

Perspective Mode

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:

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.

Scale Mode

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.

 

Related Topics