Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Installing and Using WP7 Tool Kit for Silverlight

DZone's Guide to

Installing and Using WP7 Tool Kit for Silverlight

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.

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 and 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.

2012-02-29 14h49_582012-02-29 14h50_10

2012-02-29 14h51_46

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.

2012-02-29 15h36_06

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.

2012-02-29 15h41_57

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.

2012-02-29 15h50_06

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.

2012-02-29 15h54_21

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.

2012-02-29 15h57_40

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:

image

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.

Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.

 

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.

Topics:

Published at DZone with permission of Karthikeyan Anbarasan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}