Working With Coding4Fun Toolkit MetroFlow Control in Windows Phone 7


Introduction

In this article we are going to explore how to use the Coding4Fun MetroFlow control in Windows Phone 7. Further in details we will discuss how to work with the MetroFlow control in Windows Phone 7. In this article we have to see that basically the Coding4Fun toolkit offers the MetroFlow control tools being described below. In this article we will discuss the MetroFlow control; what is new in this control. 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. Here we will take an example about the MetroFlow control and inside it we will see that we have two controls at design time which displays the images and creates one MetroFlow control at run time which will also display images in an animated form. In this article we will only see a demontration for learning each and every thing about these controls. So to implement the functionality you have to follow the steps given below, but before starting you have to see my previous article to download these assemblies. Now let's have a look at the property containing these controls as given below.

Properties

Here we will discuss the properties of the MetroFlow control properties. The MetroFlow control derives all properties and events from the ItemsControl class and exposes the following additional public properties. So we have some properties of it that is given below which are AnimationDuration, SelectedColumnIndex and ExpandingWidth as well.

  • 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. But you shuld take care about that counting starts from 0.
  • ExpandingWidth Here the ExpandingWidth is a dependency property of type double. It determines the expanded width of the items in the MetroFlow control. Although it is a public property, please take care that ExpandingWidth should not be used. It is intended for internal use only!

Events

Now in this section we will discuss the event of MetroFlow control which is given below.

  • SelectionChanged It's also an event this event occurs when the selected item has changed.
  • SelectionTap It;s also an event this event occurs when an item is tapped

MetroFlowData Items Properties

In this section we will discuss the properties of the MetroFlowData Items which is an item of the MetroFlow control and it's properties are given below.

  • ImageUri It's also a property of MetroFlowData named ImageUri; it is a property of type Uri. It determines the Image of the particular item in the MetroFlow control.
  • Title It's also a property of of MetroFlowData named Title; it is a property of type string. It determines the short description text of the particular item in the MetroFlow control.

Step 1: In this step first of all we have to open a Windows Phone application; let us see how you will open it.

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named as silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   

Step_1_1fig.gif

Step_1_2fig.gif

Step 2: Now in this step first of all we have to add the assemblies reference to the Windows Phone application; let's see how will you add it.

Step_2_1fig.gif

Step_2_2fig.gif

Step_2_3fig.gif

Step 3: In this step you will see that we have to write the code inside the MainPage.xaml file for the "c4f" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace.

Code: xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit" >

Step 4: In this step we will see a simple MetroFlow control syntax to initialize it's property in Windows Phone 7.

Code:

<c4f:MetroFlow Name="My_customizedMetroFlow" Margin="10" FontFamily="Comic Sans MS" FontSize="24">

           <c4f:MetroFlow.Items>

               <c4f:MetroFlowData ImageUri="images/images.jpg"  Title="Windows Phone 1" />

               <c4f:MetroFlowData ImageUri="images/images2.jpg" Title="Windows Phone 2" />

               <c4f:MetroFlowData ImageUri="images/images3.jpg" Title="Windows Phone 3" />

               <c4f:MetroFlowData ImageUri="images/images4.jpg" Title="Windows Phone 4" />
           </c4f:MetroFlow.Items>

           <c4f:MetroFlow.Background>

               <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                   <GradientStop Color="Black" Offset="0" />

                   <GradientStop Color="#FFCBDBB6" Offset="1" />

               </LinearGradientBrush>

           </c4f:MetroFlow.Background>
</
c4f:MetroFlow>

 

Step 5: In this step we are going to tell you that whenever you write the code for the MainPage.xaml.cs file then you have to add the namespaces which is shown in the figure given below.

 

Namesapce.gif

 

Step 6: In this step we will see the code for the MainPage.xaml.cs file in which we will see that the code is done on it cretated animated MetroFlow control at runtime, so the code is given below.

 

Code:


using
System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Coding4Fun.Phone.Controls;

using System.Windows.Media.Imaging;
namespace MyMetroflowapp

{

    public partial class MainPage : PhoneApplicationPage

    {

        MetroFlow My_dynamic_Metro_Flw;

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            this.My_dynamic_Metro_Flw = new MetroFlow();

            this.Populate_My_MetroFlw();

            this.ContentPanel.Children.Add(this.My_dynamic_Metro_Flw);
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            this.My_customizedMetroFlow.AnimationDuration = TimeSpan.FromSeconds(0.5);

        }
        public void Populate_My_MetroFlw()

        {

            this.My_dynamic_Metro_Flw.Items.Add(new MetroFlowData { Title = "Windows Phone 1", ImageUri = new Uri(@"images/images.jpg", UriKind.RelativeOrAbsolute) });

            this.My_dynamic_Metro_Flw.Items.Add(new MetroFlowData { Title = "Windows Phone 2", ImageUri = new Uri(@"images/images2.jpg", UriKind.RelativeOrAbsolute) });

            this.My_dynamic_Metro_Flw.Items.Add(new MetroFlowData { Title = "Windows Phone 3", ImageUri = new Uri(@"images/images3.jpg", UriKind.RelativeOrAbsolute) });

            this.My_dynamic_Metro_Flw.Items.Add(new MetroFlowData { Title = "Windows Phone 4", ImageUri = new Uri(@"images/images4.jpg", UriKind.RelativeOrAbsolute) });
            this.My_dynamic_Metro_Flw.SelectedColumnIndex = 2;

        }
    }
}

 

Step 7: In this step we are going to tell you that before writting the code given below you have to add some images as you want to add as I added in the application which is given below.

 

Images_figure.gif

 

Step 8: In this step we will see the complete code for the MainPage.xaml file which is given below.

 

Code:

<phone:PhoneApplicationPage

    x:Class="MyMetroflowapp.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True"> 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions> 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My Metro Flow App" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="64">

                <TextBlock.Foreground>

                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                       <GradientStop Color="Black" Offset="0" />

                       <GradientStop Color="#FFFFBC1B" Offset="1" />

                   </LinearGradientBrush>

                </TextBlock.Foreground>

            </TextBlock>

        </StackPanel> 

        <!--ContentPanel - place additional content here-->

        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <c4f:MetroFlow FontFamily="Comic Sans MS" FontSize="24">

                <c4f:MetroFlowData Title="My_Metro_flow_samle" ImageUri="images/images3.jpg" />

                <c4f:MetroFlowData ImageUri="images/images.jpg" Title="Windows Phone 1" />

                <c4f:MetroFlowData ImageUri="images/images2.jpg"/>

            </c4f:MetroFlow>

            <c4f:MetroFlow Name="My_customizedMetroFlow" Margin="10" FontFamily="Comic Sans MS" FontSize="24">

                <c4f:MetroFlow.Items>

                    <c4f:MetroFlowData ImageUri="images/images.jpg"  Title="Windows Phone 1" />

                    <c4f:MetroFlowData ImageUri="images/images2.jpg" Title="Windows Phone 2" />

                    <c4f:MetroFlowData ImageUri="images/images3.jpg" Title="Windows Phone 3" />

                    <c4f:MetroFlowData ImageUri="images/images4.jpg" Title="Windows Phone 4" />

                </c4f:MetroFlow.Items>

                <c4f:MetroFlow.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFCBDBB6" Offset="1" />

                    </LinearGradientBrush>

                </c4f:MetroFlow.Background>

            </c4f:MetroFlow>

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FF52976D" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

        </StackPanel>

    </Grid>
</
phone:PhoneApplicationPage>

 

Step 9: In this step we will see the design figure of the MainPage.xaml file which is given below.

 

designimg.gif

 

Step 10: Now it's time to run the application by pressing F5 and the output regarding this is given below.

 

Output 1: This one is the default output but you will see the differences that the third MetroFlow control will be loaded dynamically or at runtime. And when we click on the first column of every control then you see that it will animate like an image gallery.


Out1.gif

 

Output 2: Whenever we click on the second MetroFlow Column then you will see that it will be animated like a gallery control.


out2.gif

 

Output 3: Whenever we click on the third MetroFlow Column then you will see that it will be animated like a gallery control.


out3.gif

 

Output 4: Whenever we click on the fourth MetroFlow Column then you will see that it will be animated like a gallery control.


out4.gif

 

Here are some other resources which may help you.

 

How to Work with Items Controls in Windows Phone 7

Working With Various Phone Tasks in Windows Phone 7

RichTextBox in Windows Phone 7.1 or Mango

AutoComplete in Windows Phone 7

Getting Started With Local Database Operations in Windows Phone 7