Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version
Go to top

Expression Blend 4 for Windows Phone

, 31 May 2010
An important thing in Blend for Windows Phone is that it is pretty much the same as in Silverlight with Blend. All the features work in the same way...
WindowsPhoneApplication1.zip
WindowsPhoneApplication1
WindowsPhoneApplication1.suo
WindowsPhoneApplication1
ApplicationIcon.png
Background.png
Bin
Debug
ApplicationIcon.png
Background.png
de
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
en
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
es
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
fr
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
it
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
ja
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
ko
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
Microsoft.Expression.Interactions.dll
System.Windows.Interactivity.dll
WindowsPhoneApplication1.dll
WindowsPhoneApplication1.xap
zh-Hans
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
zh-Hant
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
Properties
SampleData
AwardSampleDataSource
ViewModels
<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation" 
    xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.AwardSampleDataSource" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
    x:Class="WindowsPhoneApplication1.App"
    >

    <!-- Resources for following the Windows Phone design guidelines -->
    <Application.Resources>
        <!--************ THEME RESOURCES ************-->

        <!-- Font Names -->

        <!--************ THEME RESOURCES ************-->

        <!--***** LISTBOX/LISTBOXITEM TEMPLATES *****-->

        <!--************ BUTTON TEMPLATE ************-->

        <!--********* PHONE SLIDER TEMPLATE *********-->
    <!--****** PHONE TOGGLESWITCH TEMPLATE ******-->
    	<SampleData:records x:Key="AwardSampleDataSource" d:IsDataSource="True"/>
<!-- Color Resources -->
    	<Color x:Key="PhoneBackgroundColor">#FF1F1F1F</Color>
    	<Color x:Key="PhoneContrastForegroundColor">Black</Color>
    	<Color x:Key="PhoneForegroundColor">White</Color>
    	<Color x:Key="PhoneInactiveColor">#FF666666</Color>
    	<Color x:Key="PhoneDisabledColor">#FF808080</Color>
    	<Color x:Key="PhoneSubtleColor">#FF999999</Color>
    	<Color x:Key="PhoneContrastBackgroundColor">#FFFFFFFF</Color>
    	<Color x:Key="PhoneTextBoxColor">#FFBFBFBF</Color>
    	<Color x:Key="PhoneBorderColor">#FFCCCCCC</Color>
    	<Color x:Key="PhoneTextSelectionColor">Black</Color>
    	<Color x:Key="PhoneAccentColor">#FF1BA1E2</Color>

        <!-- Brush Resources -->
    	<SolidColorBrush x:Key="PhoneAccentBrush" Color="{StaticResource PhoneAccentColor}"/>
    	<SolidColorBrush x:Key="PhoneBackgroundBrush" Color="{StaticResource PhoneBackgroundColor}"/>
    	<SolidColorBrush x:Key="PhoneContrastForegroundBrush" Color="{StaticResource PhoneContrastForegroundColor}"/>
    	<SolidColorBrush x:Key="PhoneForegroundBrush" Color="{StaticResource PhoneForegroundColor}"/>
    	<SolidColorBrush x:Key="PhoneInactiveBrush" Color="{StaticResource PhoneInactiveColor}"/>
    	<SolidColorBrush x:Key="PhoneDisabledBrush" Color="{StaticResource PhoneDisabledColor}"/>
    	<SolidColorBrush x:Key="PhoneSubtleBrush" Color="{StaticResource PhoneSubtleColor}"/>
    	<SolidColorBrush x:Key="PhoneContrastBackgroundBrush" Color="{StaticResource PhoneContrastBackgroundColor}"/>
    	<SolidColorBrush x:Key="PhoneTextBoxBrush" Color="{StaticResource PhoneTextBoxColor}"/>
    	<SolidColorBrush x:Key="PhoneBorderBrush" Color="{StaticResource PhoneBorderColor}"/>
    	<SolidColorBrush x:Key="PhoneTextSelectionBrush" Color="{StaticResource PhoneTextSelectionColor}"/>
    	<SolidColorBrush x:Key="TransparentBrush" Color="Transparent"/>

        <!-- Touch Target Area -->
    	<Thickness x:Key="PhoneTouchTargetOverhang">12</Thickness>

        <!-- Default Border Size-->
    	<Thickness x:Key="PhoneDefaultBorderThickness">3</Thickness>

        <!-- Font sizes -->
    	<FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
    	<FontFamily x:Key="PhoneFontFamilyLight">Segoe WP Light</FontFamily>
    	<FontFamily x:Key="PhoneFontFamilySemiLight">Segoe WP Semilight</FontFamily>
    	<FontFamily x:Key="PhoneFontFamilySemiBold">Segoe WP Semibold</FontFamily>

        <!--14pt-->
    	<system:Double x:Key="PhoneFontSizeSmall">18.667</system:Double>
        <!--15pt-->
    	<system:Double x:Key="PhoneFontSizeNormal">20</system:Double>
        <!--17pt-->
    	<system:Double x:Key="PhoneFontSizeMedium">22.667</system:Double>
        <!--19pt-->
    	<system:Double x:Key="PhoneFontSizeMediumLarge">25.333</system:Double>
        <!--24pt-->
    	<system:Double x:Key="PhoneFontSizeLarge">32</system:Double>
        <!--32pt-->
    	<system:Double x:Key="PhoneFontSizeExtraLarge">42.667</system:Double>
        <!--54pt-->
    	<system:Double x:Key="PhoneFontSizeExtraExtraLarge">72</system:Double>

        <!-- TextBox styles -->
    	<Style x:Key="PhoneTextBoxStyle" TargetType="TextBox">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxBrush}"/>
    	</Style>

        <!-- TextBlock styles -->
    	<Style x:Key="PhoneTextNormalStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextPageTitle1Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextNormalStyle}">
    		<Setter Property="Margin" Value="20,20,0,0" />
    	</Style>

    	<Style x:Key="PhoneTextSubtleStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextTitle1Style" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextPageTitle2Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextTitle1Style}">
    		<Setter Property="Margin" Value="20,43,0,0" />
    	</Style>

    	<Style x:Key="PhoneTextTitle2Style" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextTitle3Style" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextExtraLargeStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextGroupHeaderStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextLargeStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextSmallStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextContrastStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneContrastForegroundBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextAccentStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
    	</Style>

    	<Style x:Key="PhoneTextBodyTextStyle" TargetType="TextBlock">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="LineHeight" Value="32"/>
    		<Setter Property="TextWrapping" Value="Wrap"/>
    		<Setter Property="Margin" Value="20,20,20,0" />
    	</Style>

        <!--***** LISTBOX/LISTBOXITEM TEMPLATES *****-->
    	<Style x:Key="PhoneListBox" TargetType="ListBox">
    		<Setter Property="Padding" Value="1"/>
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="HorizontalContentAlignment" Value="Left"/>
    		<Setter Property="VerticalContentAlignment" Value="Top"/>
    		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="ListBox">
    					<Grid>
    						<ScrollViewer Foreground="{TemplateBinding Foreground}" x:Name="ScrollViewer" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Margin="7,1,1,1">
    							<ItemsPresenter/>
    						</ScrollViewer>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="ItemContainerStyle">
    			<Setter.Value>
    				<Style TargetType="ListBoxItem">
    					<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    					<Setter Property="VerticalContentAlignment" Value="Center"/>
    					<Setter Property="HorizontalAlignment" Value="Stretch"/>
    					<Setter Property="VerticalAlignment" Value="Stretch"/>
    					<Setter Property="Background" Value="{StaticResource TransparentBrush}"/>
    					<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    					<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    					<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    					<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    					<Setter Property="BorderThickness" Value="0"/>
    					<Setter Property="Padding" Value="0"/>
    					<Setter Property="Template">
    						<Setter.Value>
    							<ControlTemplate TargetType="ListBoxItem">
    								<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    									<VisualStateManager.VisualStateGroups>
    										<VisualStateGroup x:Name="CommonStates">
    											<VisualState x:Name="Normal"/>
    											<VisualState x:Name="MouseOver" />
    											<VisualState x:Name="Disabled">
    												<Storyboard>
    													<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background" Duration="0">
    														<DiscreteObjectKeyFrame KeyTime="0">
    															<DiscreteObjectKeyFrame.Value>
    																<SolidColorBrush Color="Transparent"/>
    															</DiscreteObjectKeyFrame.Value>
    														</DiscreteObjectKeyFrame>
    													</ObjectAnimationUsingKeyFrames>
    													<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
    												</Storyboard>
    											</VisualState>
    										</VisualStateGroup>
    										<VisualStateGroup x:Name="SelectionStates">
    											<VisualState x:Name="Unselected"/>
    											<VisualState x:Name="Selected"/>
    										</VisualStateGroup>
    									</VisualStateManager.VisualStateGroups>
    									<Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
    										<ContentPresenter x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    									</Grid>
    								</Grid>
    							</ControlTemplate>
    						</Setter.Value>
    					</Setter>
    				</Style>
    			</Setter.Value>
    		</Setter>
    	</Style>

    	<Style x:Key="PhoneListBoxItemLayout" TargetType="mpc:ListViewItem">
    		<Setter Property="Background" Value="Transparent" />
    		<Setter Property="ImageStretch" Value="UniformToFill" />
    		<Setter Property="HorizontalAlignment" Value="Stretch"/>
    		<Setter Property="Padding" Value="0"/>
    		<Setter Property="Height" Value="82"/>
    		<!-- The intended height of the control is 95 but the ItemsControl pads each element with 12 -->
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="mpc:ListViewItem">
    					<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}" Height="{TemplateBinding Height}">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="*"/>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<TextBlock Grid.Column="0" x:Name="ItemText"  Text="{TemplateBinding Text}" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="-3,-4,0,0"/>
    						<ContentPresenter Grid.Column="1" x:Name="SecondaryContent" Content="{TemplateBinding SecondaryContent}" VerticalAlignment="Center" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="TextWithIconTemplate">
    			<Setter.Value>
    				<ControlTemplate TargetType="mpc:ListViewItem">
    					<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="43"/>
    							<ColumnDefinition Width="*"/>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<Image Grid.Column="0" Source="{TemplateBinding ImageSource}" Stretch="{TemplateBinding ImageStretch}" Width="43" Height="43"/>
    						<TextBlock Grid.Column="1" Margin="9,-4,0,0" x:Name="ItemText" Text="{TemplateBinding Text}" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" />
    						<ContentPresenter Grid.Column="2" x:Name="SecondaryContent" Content="{TemplateBinding SecondaryContent}" VerticalAlignment="Center" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="TextAndDetailsTemplate">
    			<Setter.Value>
    				<ControlTemplate TargetType="mpc:ListViewItem">
    					<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="*"/>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<StackPanel Grid.Column="0" VerticalAlignment="Center" >
    							<TextBlock x:Name="ItemText" Text="{TemplateBinding Text}" Style="{StaticResource PhoneTextExtraLargeStyle}"  HorizontalAlignment="Left" Margin="-3,-13,0,0"  />
    							<TextBlock x:Name="DetailsText" Text="{TemplateBinding Details}" Style="{StaticResource PhoneTextSubtleStyle}"  HorizontalAlignment="Left" Margin="-1,-6,0,0" />
    						</StackPanel>
    						<ContentPresenter Grid.Column="1" x:Name="SecondaryContent" Content="{TemplateBinding SecondaryContent}" VerticalAlignment="Center" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="TextAndDetailsWithIconTemplate">
    			<Setter.Value>
    				<ControlTemplate TargetType="mpc:ListViewItem">
    					<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="43"/>
    							<ColumnDefinition Width="*"/>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<Image Grid.Column="0" Source="{TemplateBinding ImageSource}" Stretch="{TemplateBinding ImageStretch}" Width="43" Height="43" VerticalAlignment="Top"/>
    						<StackPanel Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center">
    							<TextBlock x:Name="ItemText" Text="{TemplateBinding Text}" Style="{StaticResource PhoneTextExtraLargeStyle}" HorizontalAlignment="Left" Margin="-3,-13,0,0"/>
    							<TextBlock x:Name="DetailsText" Text="{TemplateBinding Details}" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Left" Margin="-1,-6,0,0" />
    						</StackPanel>
    						<ContentPresenter Grid.Column="2" x:Name="SecondaryContent" Content="{TemplateBinding SecondaryContent}" VerticalAlignment="Center" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="CustomTemplate">
    			<Setter.Value>
    				<ControlTemplate TargetType="mpc:ListViewItem">
    					<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="*"/>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<TextBlock Grid.Column="0" Margin="12,0,0,0" x:Name="ItemText" Text="{TemplateBinding Text}" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" />
    						<ContentPresenter Grid.Column="1" x:Name="SecondaryContent" Content="{TemplateBinding SecondaryContent}" VerticalAlignment="Center" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>

        <!--************ BUTTON TEMPLATE ************-->
    	<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
    		<Setter Property="Background" Value="{StaticResource TransparentBrush}"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="MinHeight" Value="72" />
    		<Setter Property="BorderThickness" Value="{StaticResource PhoneDefaultBorderThickness}"/>
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    		<Setter Property="Padding" Value="10,0,10,5"/>

    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="ButtonBase">
    					<Grid Background="Transparent">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="foregroundContainer" Storyboard.TargetProperty="Control.Foreground">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Border.Background">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundColor}" />
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Border.BorderBrush">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundColor}" />
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="foregroundContainer" Storyboard.TargetProperty="Control.Foreground">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Control.BorderBrush">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Control.Background">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}" />
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused"/>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">
    							<ContentControl x:Name="foregroundContainer" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FontSize="{TemplateBinding FontSize}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    						</Border>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>

        <!--********* PHONE SLIDER TEMPLATE *********-->
    	<Style x:Key="PhoneSlider" TargetType="Slider">
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="Maximum" Value="10"/>
    		<Setter Property="Minimum" Value="0"/>
    		<Setter Property="MinHeight" Value="84"/>
    		<Setter Property="MinWidth" Value="60"/>
    		<Setter Property="Value" Value="0"/>
    		<Setter Property="BorderBrush" Value="{x:Null}"/>
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Slider">
    					<Grid x:Name="Root" Background="{TemplateBinding Background}">
    						<Grid.Resources>
    							<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
    								<Rectangle />
    							</ControlTemplate>
    							<ControlTemplate x:Key="PhoneSimpleThumb" TargetType="Thumb">
    								<Rectangle />
    							</ControlTemplate>
    						</Grid.Resources>
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<DoubleAnimation Duration="0" Storyboard.TargetName="HorizontalTrack" Storyboard.TargetProperty="Opacity" To="0.55" />
    										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HorizontalThumbDisabledOverlay" Storyboard.TargetProperty="Visibility">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<DoubleAnimation Duration="0" Storyboard.TargetName="VerticalTrack" Storyboard.TargetProperty="Opacity" To="0.55" />
    										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="VerticalThumbDisabledOverlay" Storyboard.TargetProperty="Visibility">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Grid x:Name="HorizontalTemplate">
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="Auto"/>
    								<ColumnDefinition Width="0"/>
    								<ColumnDefinition Width="*"/>
    							</Grid.ColumnDefinitions>
    							<Rectangle x:Name="HorizontalTrack" Fill="{StaticResource PhoneForegroundBrush}" Opacity="0.2" StrokeThickness="0" Grid.ColumnSpan="3" Margin="0,24,0,0" VerticalAlignment="Top" Height="12"/>
    							<Rectangle Fill="{TemplateBinding Foreground}" StrokeThickness="0" Grid.Column="0" Margin="0,24,0,0" VerticalAlignment="Top" Height="12"/>
    							<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Background="Transparent"/>
    							<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Column="2" Background="Transparent"/>
    							<Thumb x:Name="HorizontalThumb" Width="1" Margin="-1,0,0,0" Grid.Column="1" BorderThickness="0" Template="{StaticResource PhoneSimpleThumb}" Background="Transparent" RenderTransformOrigin="0.5,0.5">
    								<Thumb.RenderTransform>
    									<ScaleTransform ScaleX="32" ScaleY="1"/>
    								</Thumb.RenderTransform>
    							</Thumb>
    							<Rectangle x:Name="HorizontalThumbDisabledOverlay" IsHitTestVisible="False" Opacity="0.55" Visibility="Collapsed" Fill="{StaticResource PhoneDisabledBrush}" Grid.Column="1" Height="12" Margin="0,24,0,0" VerticalAlignment="Top"/>
    						</Grid>
    						<Grid x:Name="VerticalTemplate">
    							<Grid.RowDefinitions>
    								<RowDefinition Height="*"/>
    								<RowDefinition Height="0"/>
    								<RowDefinition Height="Auto"/>
    							</Grid.RowDefinitions>
    							<Rectangle x:Name="VerticalTrack" Fill="{StaticResource PhoneForegroundBrush}" Opacity="0.2" StrokeThickness="0" HorizontalAlignment="Left" Margin="24,0,0,0" Width="12" Grid.RowSpan="3"/>
    							<Rectangle Fill="{TemplateBinding Foreground}" StrokeThickness="0" Grid.Row="2"  HorizontalAlignment="Left" Margin="24,0,0,0" Width="12"/>
    							<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Background="Transparent" Grid.Row="2"/>
    							<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Row="2" Background="Transparent"/>
    							<Thumb x:Name="VerticalThumb" Width="{TemplateBinding Width}" Height="1" Margin="0,-1,0,0" IsTabStop="True" Grid.Row="1" BorderThickness="0" Template="{StaticResource PhoneSimpleThumb}" Background="Transparent" RenderTransformOrigin="0.5,0.5">
    								<Thumb.RenderTransform>
    									<ScaleTransform ScaleX="1" ScaleY="32"/>
    								</Thumb.RenderTransform>
    							</Thumb>
    							<Rectangle x:Name="VerticalThumbDisabledOverlay" HorizontalAlignment="Left" Margin="24,0,0,0" Width="12" IsHitTestVisible="False" Opacity="0.55" Visibility="Collapsed" Fill="{StaticResource PhoneDisabledBrush}" Grid.Row="1"/>
    						</Grid>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>

        <!--****** PHONE TOGGLESWITCH TEMPLATE ******-->
    	<Style x:Key="PhoneToggleSwitch" TargetType="ToggleButton">
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneBorderBrush}"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneBorderBrush}"/>
    		<Setter Property="BorderThickness" Value="2"/>
    		<Setter Property="MinWidth" Value="136"/>
    		<Setter Property="MaxWidth" Value="136"/>
    		<Setter Property="MinHeight" Value="96"/>
    		<Setter Property="MaxHeight" Value="96"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="ToggleButton">
    					<Grid Background="Transparent">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver" />
    								<VisualState x:Name="Pressed"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames  Storyboard.TargetName="border" Storyboard.TargetProperty="Visibility" >
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Collapsed</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames  Storyboard.TargetName="borderDisabled" Storyboard.TargetProperty="Visibility" >
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="CheckStates">
    								<VisualState x:Name="Checked" >
    									<Storyboard>
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButton" Storyboard.TargetProperty="(Canvas.Left)" To="80" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOn" Storyboard.TargetProperty="Width" To="78" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButtonDisabled" Storyboard.TargetProperty="(Canvas.Left)" To="80" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOnDisabled" Storyboard.TargetProperty="Width" To="78" />
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Unchecked">
    									<Storyboard>
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButton" Storyboard.TargetProperty="(Canvas.Left)" To="0" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOn" Storyboard.TargetProperty="Width" To="0" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButtonDisabled" Storyboard.TargetProperty="(Canvas.Left)" To="0" />
    										<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOnDisabled" Storyboard.TargetProperty="Width" To="0" />
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused"/>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>

    						<Border x:Name="border"  BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Width="112" Height="32" HorizontalAlignment="Right" Margin="0,32,0,32" >
    							<Canvas x:Name="switchContainer" Margin="2">
    								<Rectangle x:Name="rectangleSwitchOn" Width="0" Height="24" Fill="{TemplateBinding Foreground}" />
    								<Grid x:Name="switchButton" Width="24" Height="24" Canvas.Left="0"  Background="{StaticResource PhoneForegroundBrush}" >
    									<Rectangle Fill="{StaticResource PhoneBackgroundBrush}" Width="2" HorizontalAlignment="Left"  StrokeThickness="0" Margin="5,4,0,4" />
    									<Rectangle Fill="{StaticResource PhoneBackgroundBrush}" Width="2" HorizontalAlignment="Center"  StrokeThickness="0" Margin="0,4,0,4" />
    									<Rectangle Fill="{StaticResource PhoneBackgroundBrush}" Width="2" HorizontalAlignment="Right"  StrokeThickness="0" Margin="0,4,5,4" />
    								</Grid>
    							</Canvas>
    						</Border>

    						<Border x:Name="borderDisabled" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{StaticResource PhoneInactiveBrush}" Width="112" Height="32" HorizontalAlignment="Right" Margin="0,32,0,32" Visibility="Collapsed" >
    							<Canvas x:Name="switchContainerDisabled" Margin="2">
    								<Rectangle x:Name="rectangleSwitchOnDisabled" Width="0" Height="24" Fill="{StaticResource PhoneInactiveBrush}" />
    								<Grid x:Name="switchButtonDisabled" Width="24" Height="24" Canvas.Left="0"  Background="{StaticResource PhoneInactiveBrush}" />
    							</Canvas>
    						</Border>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    </Application.Resources>

    <!--RootFrame points to and loads the first page of your application-->
    <Application.RootVisual>
        <phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>
    </Application.RootVisual>

</Application>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Somnath Mondal
Technical Lead
India India
No Biography provided

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 31 May 2010
Article Copyright 2010 by Somnath Mondal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid