Addition to the Coding4Fun Toolkit - MetroFlow

Today Clint Rutkas announced about some additional work he has done on the Coding4Fun Toolkit for Windows Phone. One of the additions was the MetroFlow control, that allows the developer to display a short data collection that contains images and labels in a "flowing" manner.

The control itself has the following structure:

The passive blocks represent collection items that are hidden and are numbered. The active item shows its image layer and the title. The main container is the MetroFlow container itself, while each separate item is an instance of MetroFlowData.

NOTE: You should not use MetroFlowItem in XAML for defining MetroFlow data.

A sample XAML fragment that can be used to display a control structure like the one above might look like this:

<coding:MetroFlow x:Name="flow" SelectionChanged="flow_SelectionChanged">
    <coding:MetroFlowData x:Name="test1" Title="TestData" ImageUri="Background.png"></coding:MetroFlowData>
    <coding:MetroFlowData x:Name="test2" Title="TestData2"></coding:MetroFlowData>
    <coding:MetroFlowData x:Name="test3" Title="TestData3"></coding:MetroFlowData>
    <coding:MetroFlowData x:Name="test4" Title="TestData4"></coding:MetroFlowData>
    <coding:MetroFlowData x:Name="test5" Title="TestData5"></coding:MetroFlowData>
</coding:MetroFlow>

There are several things worth mentioning about this snippet. First and foremost, you can see that there are only five instances of MetroFlowData. That is the optimal number of items. At this moment, during testing stages, there is no hard-coded limit, however, once you go over 5, the general visual area becomes much more reduced.

As the selection changes, you cannot manually tie the user action to a single MetroFlowData instance. Instead, you need to use the SelectionChanged event handler for the MetroFlow control.

private void flow_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Debug.WriteLine(((MetroFlowData)e.AddedItems[0]).Title);
}

A switch or if/else if statement can be used to differentiate the selected item.

The control can display data from two directions. The direction itself is set through the FlowDirection property, that can be either RightToLeft or LeftToRight. The flow animation itself, coming from either direction, can be shorter or longer. In case the default state is too fast or too slow, it can be changed through the AnimationDuration property.

Make sure you download the latest version of the toolkit here.