在前面资源一文中也提过样式，样式就如同我们做HTML页排版时常用到的CSS样式表，它是对于特定娄型的可视化元素，应该可以直接说是针对控件的一种可重用的属性设置列表，这样对于需要设置相同属性值的同类型的多个控件来讲是大大提高效率，我们不必要为每个控件做重复的动作。
下面是一个TextBox的样式示例，我们希望通过引用资源中的样式，使得页面上的所有TextBox控件都具有统一的外观，而且都只能输入数字。
<phone:PhoneApplicationPage.Resources>
<!--不带key的样式，应用于所有TextBlock元素-->
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="Yellow"/>
</Style>
<!--带key的样式，只有引用该资源的元素才应用-->
<Style x:Key="MyTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="InputScope">
<Setter.Value>
<InputScope>
<InputScopeName NameValue="Number"/>
</InputScope>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="PageTitle" Text="样式示例" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="文本一："/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="文本二："/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="文本三："/>
<TextBlock Grid.Column="0" Grid.Row="3" Text="文本四："/>
<TextBlock Grid.Column="0" Grid.Row="4" Text="文本五："/>
<TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="3"/>
<TextBox Grid.Column="1" Grid.Row="4"/>
</Grid>
</Grid>
// 摘要:
// 表示按钮控件。
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]
public class Button : ButtonBase
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="Template1" TargetType="ButtonBase">
<Grid>
<!--状态组-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="pressed"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="disable"
Storyboard.TargetProperty="Opacity"
To="0.5" Duration="0:0:0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="focussbd"
Storyboard.TargetProperty="Opacity"
To="0.88"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="background" Background="{TemplateBinding Background}">
<Rectangle x:Name="pressed" Opacity="0" RadiusX="2" RadiusY="2">
<Rectangle.Fill>
<LinearGradientBrush
StartPoint=".5,0"
EndPoint=".5,1">
<GradientStop Color="SkyBlue" Offset=".1"/>
<GradientStop Color="Blue" Offset=".9"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="disable" Opacity="0" Fill="Gray" RadiusX="2" RadiusY="2"/>
<Border x:Name="focussbd" BorderBrush="LightGreen" BorderThickness="2" CornerRadius="2" Opacity="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="ContentPanel" Margin="12,0,12,0">
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="135,155,0,0" Name="button1" VerticalAlignment="Top" Width="160" Template="{StaticResource Template1}" />
</Grid>
控件模板有时候很难一两句话讲清楚，别看它好像很多东西，其实很简单，它无非包括两个东西——状态和UI元素，至于怎么个布局法，完全取决于你希望怎么设计了。
Windows Phone开发（16）：样式和控件模板,布布扣,bubuko.com
原文：http://www.cnblogs.com/lonelyxmas/p/3582608.html