Over a million developers have joined DZone.

Addition to the Coding4Fun Toolkit - MetroFlow

DZone's Guide to

Addition to the Coding4Fun Toolkit - MetroFlow

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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>

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)

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}