Getting Started with the Coding4Fun toolkit MetroFlow Control

published on: 12/29/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the new MetroFlow control from the FREE Coding4fun Toolkit in details. I will explain everything about the main features, available public API, and will  give lots of examples in different scenarios.

Basically MetroFlow is an UI component that looks like an animated gallery control. It shows a line of tiles where only one item is expanded at any given time.

Demo Video:

Getting Started

To begin using MetroFlow first  add a reference to  the Coding4Fun.Phone.Controls.dll assembly.

NOTE: You can download this assembly from here: Coding4Fun Toolkit .

The next step is to add the "c4f" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace:

    xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

The sample code should looks like:

<c4f:MetroFlow>
    <c4f:MetroFlowData Title="Sample 1" />
    <c4f:MetroFlowData Title="Sample 2" />
    <c4f:MetroFlowData Title="Sample 3" />
</c4f:MetroFlow>

MetroFlow Key Properties

The MetroFlow control derives all properties and events from the ItemsControl class and exposes the following additional public properties:

• AnimationDuration

AnimationDuration is a dependency property of type TimeSpan. It determines the duration of the animation when switching between the items of a MetroFlow control.

• SelectedColumnIndex

SelectedColumnIndex is a dependency property of type int. It determines the selected item in the MetroFlow control.

NOTE: The counting starts from 0.

• ExpandingWidth

NOTE: Although it is a public property, ExpandingWidth should not be used. It is intended for internal use only!

ExpandingWidth is a dependency property of type double. It determines the expanded width of the items in the MetroFlow control.

• CollapsingWidth

NOTE: Although it is a public property, CollapsingWidth should not be used. It is intended for internal use only!

CollapsingWidth is a dependency property of type double. It determines the collapsed width of the items in the MetroFlow control.

NOTE: MetroFlow contains items of type MetroFlowData. Do not use MetroFlowItem instead!

NOTE: MetroFlowItem class is available for separate usage but not inside a Metroflow control. It exposes the following properties: ImageSource, ImageVisibility, ImageOpacity, ItemIndexString, ItemIndex, ItemIndexVisibility, ItemIndexOpacity, Title, TitleVisibility, TitleOpacity. We will cover all about this component in a separate article.

MetroFlow Key Events

• SelectionChanged

This event occurs when the selected item has changed.

• SelectionTap

This event occurs when an item is tapped

MetroFlowData Key Properties

• ImageUri

ImageUri is a property of type Uri. It determines the Image of the particular item in the MetroFlow control.

• Title

Title is a property of type string. It determines the short description text of the particular item in the MetroFlow control.

Examples

1. Simple Usage:

The following examples demonstrate how to use this control in a simple way. You can add different items to the MetroFlow control via the MetroFlowData class which expose enables you to add a custom Image via its ImageUri property  and a Text via its Title property:

<c4f:MetroFlow>
    <c4f:MetroFlowData Title="Sample 1" />
    <c4f:MetroFlowData 
                    ImageUri="Images/bmw1.jpg"
                    Title="BMW 1" />
    <c4f:MetroFlowData ImageUri="Images/bmw1.jpg"/>
</c4f:MetroFlow>

2. Populate the MetroFlow control in code behind:

This example demonstrates how to populate the MetroFlow control in code behind. We will add some images and titles to items and will set the default selected index to be equal to 2. i.e. the third item will be selected.

public partial class MainPage : PhoneApplicationPage
{
    MetroFlow dynamicMetroFlow;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.dynamicMetroFlow = new MetroFlow();
        this.PopulateMetroFlow();
        this.ContentPanel.Children.Add(this.dynamicMetroFlow);

    }
    public void PopulateMetroFlow()
    {
        this.dynamicMetroFlow.Items.Add(new MetroFlowData { Title = "Test 1", ImageUri = new Uri(@"Images\bmw1.jpg", UriKind.RelativeOrAbsolute) });
        this.dynamicMetroFlow.Items.Add(new MetroFlowData { Title = "Test 2", ImageUri = new Uri(@"Images\bmw2.jpg", UriKind.RelativeOrAbsolute) });
        this.dynamicMetroFlow.Items.Add(new MetroFlowData { Title = "Test 3", ImageUri = new Uri(@"Images\bmw3.jpg", UriKind.RelativeOrAbsolute) });
        this.dynamicMetroFlow.Items.Add(new MetroFlowData { Title = "Test 4", ImageUri = new Uri(@"Images\bmw4.jpg", UriKind.RelativeOrAbsolute) });
    
        this.dynamicMetroFlow.SelectedColumnIndex = 2;
    }
}

NOTE: You will have to include the following using directives

using Coding4Fun.Phone.Controls;
using System.Windows.Media.Imaging;

3. Customize the visual appearance

This example demonstrates how to populate the MetroFlow control with items and how to customize its AnimationDuration.

<c4f:MetroFlow Name="customizedMetroFlow" Margin="10">
    <c4f:MetroFlow.Items>
        <c4f:MetroFlowData 
                    ImageUri="Images/bmw1.jpg"
                    Title="BMW 1" />
        <c4f:MetroFlowData
                    ImageUri="Images/bmw2.jpg"
                    Title="BMW 2" />
        <c4f:MetroFlowData 
                    ImageUri="Images/bmw3.jpg"
                    Title="BMW 3" />
        <c4f:MetroFlowData 
                    ImageUri="Images/bmw4.jpg"
                    Title="BMW 4" />
        <c4f:MetroFlowData 
                    ImageUri="Images/bmw5.jpg"
                    Title="BMW 5" />
    </c4f:MetroFlow.Items>
</c4f:MetroFlow>

public MainPage()
{
    InitializeComponent();
    
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    this.customizedMetroFlow.AnimationDuration = TimeSpan.FromSeconds(0.5);
}

That was all about getting started with the MetroFlow control from the Coding4fun Toolkit .  You can find the full source code here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Getting Started with the Coding4Fun toolkit MetroFlow Control'

Title Your Name

Comment