Windows Phone 四、控件模版

控件模版的概念

Windows Phone中每一个控件都有一个默认的模版，用于描述控件的内部组成结构和外观样式

相对于原本的样式外观操作，自定义模版的可自定义性更强

最基本的重写控件模版

 1     <Grid>
 2         <!--Button按钮居中对齐-->
 3         <Button HorizontalAlignment="Center">
 4             <!--原生控件模版设置的就是Template属性-->
 5             <Button.Template>
 6                 <!--控件模版类型-->
 7                 <ControlTemplate>
 8                     <!--Border本身支持圆角-->
 9                     <Border
10                         BorderBrush="White"
11                         BorderThickness="3"
12                         CornerRadius="10,20,10,10">
13                         <TextBlock
14                             Text="Button"
15                             TextAlignment="Center"
16                             VerticalAlignment="Center"/>
17                     </Border>
18                 </ControlTemplate>
19             </Button.Template>
20         </Button>
21     </Grid>

BorderBrush 颜色　　BorderThickness 边框宽度　　CornerRadius 四个圆角的弧度

Text 内容　　TextAlignment 水平对齐方式　　VerticalAlignment 垂直对齐方式

绑定属性和重用（自定义控件模版）

 1     <Page.Resources>
 2         <!--圆角Button模版-->
 3         <ControlTemplate x:Key="CornerButton" TargetType="Button">
 4             <!--Border本身支持圆角-->
 5             <Border
 6                         Background="{TemplateBinding Button.Background}"
 7                         BorderBrush="{TemplateBinding Button.BorderBrush}"
 8                         BorderThickness="{TemplateBinding Button.BorderThickness}"
 9                         CornerRadius="10,20,10,10">
10                 <!--TemplateBinding是用来在模版中绑定当前控件属性-->
11                 <TextBlock
12                             Text="{TemplateBinding Button.Content}"
13                             TextAlignment="Center"
14                             VerticalAlignment="Center"/>
15             </Border>
16         </ControlTemplate>
17         <!--统一所有按钮-->
18         <Style TargetType="Button">
19             <Setter Property="Template" Value="{StaticResource CornerButton}"/>
20         </Style>
21     </Page.Resources>
22     <Grid>
23         <!--圆角Button模版，资源引用-->
24         <Button
25             Content="Button"
26             Background="Aqua"
27             BorderBrush="HotPink"
28             BorderThickness="15"
29             HorizontalAlignment="Center"
30             Template="{StaticResource CornerButton}">
31         </Button>
32     </Grid>

图标按钮展示内容

Button派生自ContentControl，所有ContentControl都是由ContentPersenter展示Content属性

 1     <Grid>
 2         <Button>
 3             <Button.Content>
 4                 <SymbolIcon Symbol="Accept"/>
 5             </Button.Content>
 6             <Button.Template>
 7                 <ControlTemplate>
 8                     <Border
 9                         BorderBrush="White"
10                         BorderThickness="3" CornerRadius="10">
11                         <ContentPresenter/>
12                     </Border>
13                 </ControlTemplate>
14             </Button.Template>
15         </Button>
16     </Grid>