WPF-控件模版 Template

空间模板

Template 模板

1 如何定义一个模板

每一个按钮空间里面都会有一个 template 标签，代表模版属性，一些这个控件的固有属性设置就在 template 标签里设置了。

xml 复制代码

  <Button>
      <Button.Template>
          <ControlTemplate>
              <Border  Background="Red" Height="40" Width="40" CornerRadius="5">
                  <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">中国</TextBlock>
              </Border>
          </ControlTemplate>
      </Button.Template>
  </Button>

如何复用一个模版
将资源 template 定义在资源之上。对资源进行引用

xml 复制代码

<Window.Resources>
    <ControlTemplate x:Key="ButtonTemp">
        <Border  Background="Red" Height="40" Width="40" CornerRadius="5">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">中国</TextBlock>
        </Border>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Template="{StaticResource ButtonTemp}">
    </Button>
</Grid>

如何绑定一个 template 的控件属性，自由定义属性，使用 Background="{TemplateBinding Background}" 定义绑定，再由使用时进行传输

xml 复制代码

 <Window.Resources>
     <ControlTemplate x:Key="ButtonTemp">
         <Border  Height="40" Width="40" CornerRadius="5"
                  Background="{TemplateBinding Background}">
             <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">中国</TextBlock>
         </Border>
     </ControlTemplate>
<Grid>
     <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center">
         <Button Template="{StaticResource ButtonTemp}" Background="Green">
         </Button>
         <Button Template="{StaticResource ButtonTemp}" Background="Orange">
         </Button>
     </StackPanel>
</Grid>
 </Window.Resources>

如果你想给 template 设置默认属性，可以添加额外的 setter 来实现，本身 template 不支持

xml 复制代码

 <Window.Resources>
     <ControlTemplate x:Key="ButtonTemp" TargetType="Button">
         <Border Height="40" Width="40" CornerRadius="5"
             Background="{TemplateBinding Background}">
             <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">中国</TextBlock>
         </Border>
     </ControlTemplate>
     <Style TargetType="Button">
         <Setter Property="Template" Value="{StaticResource ButtonTemp}" />
         <Setter Property="Background" Value="Red" />
     </Style>
 </Window.Resources>

 <Grid>
     <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center">
         <Button Background="Green"></Button>
         <Button Background="Orange"></Button>
         <Button></Button>
         <!-- 这个按钮将使用默认的红色背景 -->
     </StackPanel>
 </Grid>

Template 模板触发器

如何定义要给模板触发器

使用 ControlTemplate.Triggers 标签。

xml 复制代码

<!--定义一个触发器-->
<Window.Resources>
    <ControlTemplate x:Key="ButtonTemp" TargetType="Button">
        <Border Name="border" Height="40" Width="40" CornerRadius="5"
            Background="{TemplateBinding Background}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"></ColumnDefinition>
                    <ColumnDefinition Width="25"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <ContentPresenter Grid.Column="1"  HorizontalAlignment="Center" VerticalAlignment="Center" />
                <TextBlock Grid.Column="0" Text="A" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
            </Grid>
        </Border>
        <!--定义一个触发器-->
        <ControlTemplate.Triggers>
           <!-- TargetName 定义触发器的作用域的范围-->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" TargetName="border"
             Value="#FFBEE6FD"/>
                <Setter Property="BorderBrush" TargetName="border"
             Value="#FF3C7FB1"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style TargetType="Button">
        <Setter Property="Template" Value="{StaticResource ButtonTemp}" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="Content" Value="AAA" />
    </Style>
</Window.Resources>