Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 30 – Installing and using WP7 Tool kit 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.      [more]

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.

clip_image002clip_image004

clip_image006

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.

clip_image008

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.

clip_image010

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.

clip_image012

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.

clip_image014

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.

clip_image016

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:

clip_image018

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.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter