zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    react
    问题总结21-07-12至21-08-15
    排序
    问题总结21-06-28至21-07-11
    问题总结21-06-14至21-06-27
    问题总结21-05-29至21-06-13
    问题总结21-04-19至21-05-28
    问题总结21-03-29至21-04-18
    问题总结21-03-08至21-03-28
    问题总结21-03-01至21-03-07
  • 原文地址:https://www.cnblogs.com/includeling/p/4569559.html
Copyright © 2011-2022 走看看