How to get and edit the default Styles of the Silverlight for WP7 Toolkit controls

published on: 3/7/2011 | Views: N/A | Tags: WP7Toolkit Styling

by WindowsPhoneGeek

Recently we received several questions about how to edit the default Style/ControlTemplate of the Silverlight for Windows Phone 7 toolkit controls in Expression Blend. Unfortunately currently the control templates of the toolkit controls are not editable in Blend.

If you try to edit a particular control you will get an empry ControlTemplate without elements.

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="ListPickerControlTemplate1" TargetType="toolkit:ListPicker"/>
</phone:PhoneApplicationPage.Resources>

Getting the default Style/ControlTemplate of the Silverlight for Windows Phone toolkit controls

However you can get the default Style/ControlTemplate directly from the toolkit source code. The steps are as follows:

1.) Download the latest version of the Silverlight for Windows Phone Toolkit

2.)Open the PhoneToolkit solution

3.)Go to the Microsoft.Phone.Controls.Toolkit project and find the Themes folder

4.) Open the Generic.xaml file from the Themes folder

5.) From here you can get all default styles of the Silverlight for Windows Phone toolkit controls.

Using the default Style/ControlTemplate of the Silverlight for Windows Phone toolkit controls

In order to use or modify the style of any particular control just copy its Style from the Generic.xaml and give it some Name/Key. For example:

<Style TargetType="toolkit:ListPicker" x:Name=”MyCustomStyle”>
    <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="toolkit:ListPicker">
                ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<toolkit:ListPicker  Style="{StaticResource MyCustomStyle}" />

I hope that this post was helpful.

You can also take a look these articles: 

• Customizing ListPicker for WP7 - Part1
• Customizing ListPicker for WP7 - Part2

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to get and edit the default Styles of the Silverlight for WP7 Toolkit controls'

Title Your Name

Comment