Getting Started With Coding4Fun Toolkit in Windows Phone 7

Introduction

In this article we are going to explore the Coding4Fun toolkit for Windows Phone 7. It's a toolkit offering developers some additional controls and helper classes for Windows Phone 7 application development, designed to match the rich user experience of the Windows Phone 7. Here we will see how to attach the toolkit in our Windows Phone SDK. In this toolkit there are very many components included. It is probably a toolkit to provide some extra functionality with some extra controls which later can be used in our application. In this article we will discuss the Coding4Fun toolkit. Further it makes Windows Phone applications more effective and elegant. So for using the toolkit you have to use the steps which are given below.

Step 1: In this we see from where you download the toolkit; from Coding4Fun toolkit.

First of all click on the link given above then a window will open which is shown below.

Now click on the Download button, then a window will pop-up with the options agree or disagree then click on the agree button then you will see that a zip file will be downloaded to your system.

Step 2: In this step you will see that when you unzip that file then there will be some assemblies shown inside it so here we have to put these assemblies inside the Programs files folder of the C drive.

Go to your computer's C Drive and open the program files folder.

Now create the new folder named Coding4Fun and paste all the zip folder assemblies inside that.

Step 3: In this step we will see how to add these assemblies inside the Windows Phone application then:

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

Step 4: In this step you will add the assemblies from the folder which we have made in the programs file.

Step 5: Let's take an example of the TimeSpanPicker Control, an example of the Coding4Fun toolkit which is given below. Here we will see the code for the MainPage.xaml.cs file which 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.Toolkit;
namespace My_TimeSpanPickerDemo

{

       public partial class MainPage : PhoneApplicationPage

       {

             // Constructor

             public MainPage()

             {

                    InitializeComponent();

                    DataContext = this;
             }
             public TimeSpan My_TimeSpan6Sec { get { return TimeSpan.FromSeconds(6); } }

             public TimeSpan My_TimeSpan2Sec { get { return TimeSpan.FromSeconds(2); } }

       }
}

 

Step 6: In this step you will see which namespace reference you have to write on the above code given below.

 

 

Step 7: In this step one thing you have to be careful about is that whenever you use the toolkit you have to write the code in the Mainpage.xaml file as shown below.

 

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

 

Step 9: In this step you will see the code for the MainPage.xaml file which is given below.

 

Code:

 

<phone:PhoneApplicationPage

    x:Class="TimeSpanPickerDemo.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"

    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"

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

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

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

             <Grid.Resources>

                    <Style x:Key="sampleStyle" TargetType="controls:TimeSpanPicker">

                           <Setter Property="Background" Value="Black"/>

                           <Setter Property="BorderThickness" Value="1"/>

                           <Setter Property="Foreground" Value="YellowGreen"/>

                    </Style>

             </Grid.Resources>

        <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="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel> 

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

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

                    <controls:TimeSpanPicker Max="0:0:6" Step="0:0:2" Style="{StaticResource sampleStyle}" />

                    <controls:TimeSpanPicker  Max="{Binding My_TimeSpan6Sec}" Step="{Binding My_TimeSpan2Sec}"/>                   

             </StackPanel>

       </Grid>
</phone:PhoneApplicationPage>

 

Step 10: Now run the application by pressing F5 and the output related to that is given below.

 

Output 1: It's the Default output of the Windows Phone application.

 

Output 2: In this output we will see that we have set the TimeSpanPicker to 6 seconds.

 

Output 3: In this output we will see that we have set the TimeSpanPicker to 2 seconds.

Here are some other useful resources which may help you

 

Getting Started With AdControl in Windows Phone 7

The installed battery may not be properly connected to the computer

Getting URL of current page in Windows Phone dynamically through code

Setting The Start Page in Windows Phone 7 Application

System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone