Windows Phone 四、控制項模版

標籤：

控制項模版的概念

Windows Phone中每一個控制項都有一個預設的模版，用於描述控制項的內部組成結構和外觀樣式

相對於原本的樣式外觀操作，自訂模版的可自訂性更強

最基本的重寫控制項模版

 1     <Grid> 2         <!--Button按鈕置中對齊--> 3         <Button HorizontalAlignment="Center"> 4             <!--原生控制項模版設定的就是Template屬性--> 5             <Button.Template> 6                 <!--控制項模版類型--> 7                 <ControlTemplate> 8                     <!--Border本身支援圓角--> 9                     <Border10                         BorderBrush="White"11                         BorderThickness="3"12                         CornerRadius="10,20,10,10">13                         <TextBlock14                             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                 <TextBlock12                             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         <Button25             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>

 

Windows Phone 四、控制項模版