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.