1. Problem
You would like to enhance your user interface with some new controls but don't want to spend time making them.
2. Solution
You can use the Silverlight for Windows Phone Toolkit, which is available from CodePlex at http://silverlight.codeplex.com.
3. How It Works
The Microsoft.Phone.Controls.Toolkit.dll
assembly that you download from the CodePlex site has 12 controls. Some
are new controls, and others are enhanced versions of existing
controls.
At the time of this
writing, the Silverlight for Windows Phone Toolkit is the February 2011
version. It contains the following controls:
The AutoCompleteBox control is an enhanced version of the TextBox control that implements the autocomplete feature. While you are writing text, a pop-up appears, suggesting similar words.
The ContextMenu
control, as its name indicates, provides a context menu. Tapping and
holding a control results in a pop-up being shown with menu items. You
can define different event handlers to respond to menu item selection.
The DatePicker and TimePicker controls allow users to easily select a date and a time, respectively.
The GestureService/GestureListener controls help developers to easily manage gestures in a Silverlight application .
The ListPicker
control is a sort of combo box allowing users to pick a value from a
list. Depending on its attributes, the list can either be shown as a
pop-up or can fill the full screen.
The LongListSelector
control, as its name suggests, provides a list that is capable of
containing a lot of items and of automatically adding a scrollbar when
needed.
The Page Transitions are a set of classes dedicated to adding page transition effects during page navigation.
The PerformanceProgressBar control is an enhanced version of the ProgressBar
control that uses the compositor thread to paint itself. Differing from
the user interface thread, the compositor is a separate thread that
manages animation and other dedicated tasks. This thread performs better
than the user interface thread, and this control uses it to create the
progress bar animation.
The TiltEffect
control provides a highly required animation from the Internet
community: the tilt effect. The tilt animation is applied to controls
that implement the Click event adding
a shaking effect when the control is clicked. The TiltEffect control
provides an attached property set to a container control such as the Page that adds the tilt effect to its own controls.
The ToggleSwitch
control is used to turn on or off settings or features that you have
added to your application. For example, the Windows Phone 7 operating
system uses this control on its Settings page to activate or deactivate
Airplane mode.
The WrapPanel control is an enhanced version of the StackPanel that implements a wrap feature for the controls it contains.
4. The Code
To demonstrate this
recipe, we have borrowed the official example that ships with the
Silverlight for Windows Phone Toolkit library. To use it in your code,
you first need to add a reference to the library that usually is
installed in the %Program Files%\Microsoft SDKs\Windows Phone\v7.0\Toolkit path.
The PhoneToolkitSample
application has a main page with 11 buttons. Each of them points to a
control demo. (The date and time pickers have been grouped together, so
there are really 12 controls, as stated earlier.)
The AutoCompleteBox control is defined in the AutoCompleteBoxSample.xaml page. First of all, it is worth noting the toolkit namespace added to the Page tag (this is common to all pages using the toolkit controls):
<phone:PhoneApplicationPage
x:Class="PhoneToolkitSample.Samples.AutoCompleteBoxSample"
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:toolkit="clr-
namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
. . .
The usual ContentPanel grid is replaced by a stack panel containing two TextBlock controls and two AutoCompleteBox controls. The ItemSource property is used to define the source from which suggestions are picked and shown. The second AutoCompleteBox control uses a two-line suggestion, such as the one used by Internet Explorer that shows both page title and its URL.
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="AutoCompleteBox, single-line items"
Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:AutoCompleteBox VerticalAlignment="Top"
ItemsSource="{StaticResource words}" Margin="0,12"/>
<TextBlock Text="AutoCompleteBox, double-line items"
Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:AutoCompleteBox
InputScope="Url"
ItemsSource="{StaticResource websites}"
Margin="0,12"
ValueMemberPath="Item1">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,7">
<TextBlock
Margin="8,0"
Text="{Binding Item1}"/>
<TextBlock
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="#ff666666"
Margin="8,-6,8,2"
Text="{Binding Item2}"/>
</StackPanel>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
</StackPanel>
The ContextMenu control is demonstrated in the ContextMenuSample.xaml page. The menu items composing the context menu have to be defined within the ContextMenu tags. Those tags have to be nested within the ContextMenuService.ContextMenu tags. Each menu item is defined by the MenuItem tag that provides the Header attribute used to specify the menu item text and the Click event handler.
. . .
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel VerticalAlignment="Top">
<TextBlock Text="last selection:"
Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock x:Name="lastSelection"
Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<StackPanel VerticalAlignment="Center">
<Border Margin="0,12" BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" Background="Transparent"
VerticalAlignment="Center" Padding="16">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem
Header="this is a menu item"
Click="MenuItem_Click"/>
<toolkit:MenuItem
Header="this is another menu item"
Click="MenuItem_Click"/>
<toolkit:MenuItem
Header="this is a yet another menu item"
Click="MenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="Tap and hold here to invoke a ContextMenu"
Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Margin="0,12" BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" Background="Transparent"
VerticalAlignment="Center" Padding="16">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem
Header="Always-on item"
Command="{Binding AlwaysCommand}"/>
<toolkit:MenuItem
Header="Intermittent item"
Command="{Binding IntermittentCommand}"/>
<toolkit:MenuItem
Header="Always-on item with param"
Command="{Binding AlwaysCommand}"
CommandParameter="param1"/>
<toolkit:MenuItem
Header="Intermittent item with param"
Command="{Binding IntermittentCommand}"
CommandParameter="param2"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="Tap and hold here to invoke a
ContextMenu with items bound to ICommands"
Style="{StaticResource PhoneTextNormalStyle}"
TextWrapping="Wrap"/>
</Border>
<Border Margin="0,12" BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" Background="Transparent"
VerticalAlignment="Center" Padding="16">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="false">
<toolkit:MenuItem
Header="option 1"
Click="MenuItem_Click"/>
<toolkit:MenuItem
Header="option 2"
Click="MenuItem_Click"/>
<toolkit:MenuItem
Header="option 3"
Click="MenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock
Text="Tap and hold here to invoke a ContextMenu with IsZoomEnabled=false"
Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/>
</Border>
</StackPanel>
</Grid>
The DatePicker control and TimePicker control are shown in the DateTimePickerSample.xaml page. Within the ContentPanel code section, the DatePicker and TimePicker are defined with the ValueChanged event management.
. . .
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="select date" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:DatePicker ValueChanged="DatePicker_ValueChanged"/>
<TextBlock Text="select time" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:TimePicker ValueChanged="TimePicker_ValueChanged"/>
<TextBlock Text="note" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}">
<TextBlock.Text>
To see the correct ApplicationBar icons in the DatePicker and
TimePicker, you will need to create a folder in the root of your project
called "Toolkit.Content" and put the icons in there. You can copy them
from this project. They must be named "ApplicationBar.Cancel.jpg" and
"ApplicationBar.Check.jpg", and the build action must be "Content".
</TextBlock.Text>
</TextBlock>
</StackPanel>
. . .
The ListPickerSample.xaml file contains the demonstration of the ListPicker control. Two list pickers are defined. The first is the simple version providing the Header
attribute that is shown as a title and some fixed values defined as
system strings. The second list picker control is composed by two item
templates: the ItemTemplate tag defines the item when the value has been selected and the list picker is closed, and the FullModeItemTemplate
tag defines the list of available items that will be shown in
full-screen mode. In this example, both item templates define a
rectangle and a text block with predefined colors:
. . .
<StackPanel Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker Header="background">
<sys:String>dark</sys:String>
<sys:String>light</sys:String>
<sys:String>dazzle</sys:String>
</toolkit:ListPicker>
<!-- For best performance, set the CacheMode on items below a ListPicker -->
<!-- that will be dropping down. -->
<toolkit:ListPicker ItemsSource="{Binding}" Header="accent color"
FullModeHeader="ACCENTS" CacheMode="BitmapCache">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}" Width="24" Height="24"/>
<TextBlock Text="{Binding}" Margin="12 0 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<Rectangle Fill="{Binding}" Width="43" Height="43"/>
<TextBlock Text="{Binding}" Margin="16 0 0 0" FontSize="43"
FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
