Installing and Using WP7 Toolkit for Silverlight

Introduction

In this article we are going to see how to use the Windows Phone 7 Tool Kit for Silverlight which is available as open source which can be downloaded and installed to the local developer machine to use in the application development. The toolkit has been localized to support all the new languages supported by Mango along with new Mango specific controls like the HubTile, localization etc. The toolkit provides a rich set of controls which are available to kick start the development process with ease, just we need to download the tool kit and do some installation steps to make the tool kit fit with our development environment.

Below is the list of controls that is available with the Silverlight for Windows Phone 7 Tool Kit, which can be used straight forward with the application development with Windows phone.

• AutoCompleteBox
• ContextMenu
• DatePicker
• DateTimeConverters
• DatePicker
• ExpanderView
• GestureService/GestureListener
• HeaderedItemsControl
• HubTile
• ListPicker
• LocalizedResources
• LockablePivot
• LongListSelector
• MultiselectList
• Page Transitions
• PerformanceProgressBar
• PhoneTextBox
• TiltEffect
• TimePicker
• ToggleSwitch
• WrapPanel.

Let us jump start to see the step by step process on how to use this tool kit with Visual Studio 2010 IDE to develop applications for Windows Phone 7. Before that we need to download the tool kit from the location below and have the set up ready.

Link- http://silverlight.codeplex.com/releases/view/75888

Steps

Once we downloaded the package from the above link, run the package and we can see the wizard to install the package as shown in the screens below. Just complete the installation and we can see the tool kit installed successfully to the local development machine.

Once the installation is complete we can see the tool kit is installed to the particular folder as shown in the screen below. We can see the installation has occurred in the path C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Oct11 where we can access the tool kit sources. Now let us open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone 7 project with a valid project name as shown in the screen below.



Once the project is created we will add the reference to the Microsoft Windows Phone tool kit which we downloaded. To do that right click on the project and select add reference and point to the folder where the tool kit is downloaded and installed (C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Oct11\Bin) and select the dll Microsoft.Phone.Controls.Toolkit as shown in the screen below.



Now we have the tool kit ready, in order to use the controls we need to first add the namespace reference to the XAML Page as shown in the screen below. This will be standard across the project, here we are just telling the XAML loader that we are going to use the tool kit namespace with the page. We need to add this namespace to all the pages where ever we use the controls.




XAML Code

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

Now we will take an example of adding the autocomplete text box of the tool kit, to do that just go the grid and type the below code to get the autocomplete text box ready to use as shown in the screen below.




XAML Code
 

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

  <TextBlock Margin="31,29,195,519" Text="Autocomplete Text Box" >          

  <toolkit:AutoCompleteBox x:Name="acBoxDestination" Margin="31,94,0,428"  HorizontalAlignment="Left"   Width="407" />

</Grid>

Now go to the code behind and add the below code in the main loaded event so that when the application starts we will get the autocomplete text box loaded with the predefined data which we can change it as per the convenient way as shown in the screen below.



Code Behind
 

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;

namespace F5debugWp7ToolKit
{
    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

       public MainPage()

       {

           InitializeComponent();

           Loaded += new RoutedEventHandler(MainPage_Loaded);

       }

       void MainPage_Loaded(object sender, RoutedEventArgs e)

       {

           List lstnames = new List();

           lstnames.Add("Karthik");

           lstnames.Add("Ram");

           lstnames.Add("Rahman");

           lstnames.Add("Bhaskar");

           lstnames.Add("Arjun");

           this.acBoxSour.ItemsSource = lstnames;

       }

    }

}
 

Now we are done with our code, now run the application by pressing F5 directly from the keyboard and we can see the application loads with the emulator just input the starting letter and we can see the autocomplete box pulls the complete phrase as shown in the screen below.

Output Screens



Conclusion

So in this article we have seen how to download, install and then use the Windows Phone 7 tool kit can be used to develop a productive application with an example of using the Autocomplete text box.