EKsumic's Blog

The current theme of this website is Japanese learning.

Click the left button to use the catalog.

OR

C#Winform向WPF过渡入门(六)

什么是控件模板?

先解释一个最基本的问题,有人觉得模板和定义样式差不多,其实不然。

样式终归是样式,

模板的话,非要定义的话,就说俩字“自举”。

为啥要提到“自举”,其实XAML有人多功能都是微软工作人员帮你自举出来的。

举个例子:

你在VS里面 视图 - 其它窗口 - 找到【文档大纲】这个东西。

打开来,它是一个控件树

假设你在Grid里面写了个Button,你可以在控件树里面找到它,右击→编辑模板→编辑副本,

这样可以快速创建一个模板。(这样的方式其实就是创建了一个Style)

附源码:

<Window.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" 
                                          RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel VerticalAlignment="Center">
        <Button Content="Hello" Width="100" VerticalAlignment="Center" Height="40" Style="{DynamicResource ButtonStyle}"/>
    </StackPanel>
</Grid>

创建完成后,我们可以注意到,在Style里面的最后一个标签的属性是Template。(这可不是随便定义的哟!)

Template里面最终有一个叫ControlTemplate的元素,它的TargetType继承了x:Type Button。(先不要管这是什么)

我们现在可以通过改变ControlTemplate里面的内容来改变按钮的样式。

在Border里面修改的属性将应用于所有的按钮。

这不还是定义样式嘛?

不,不是。

它与一般定义样式最大的区别在于还是在于“自举”,

你可以想象成Style是外,而Template是内

ContentPresenter已经是“自举”相关的属性了。

你可以看到,在ControlTemplate里面,定了大量的TemplateBinding,依赖外部的一个BorderBrush,这已经是自举出来的东西了。

举个例子:

假设你删除了上面代码的HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 属性,你在Button中将无法正常使用HorizontalAlignment。

TemplateBinding HorizontalContentAlignment的作用其实是为了帮助按钮中的文字居中,这个是预定义的。(你就算是写Style也是基于这样的模板)

就这样,模板套模板,最后套出了你能使用的最简单的wpf。

关于模板触发器

ControlTemplate.Triggers是模板触发器。

这里面有一些预设值。(又是自举)

通常情况下,作为初学者,你不需要去动这些东西,只要知道就行,之后想深入研究的时候再说。

不过说实在的,以后大概会看到非常多的<Setter>罢。:D


基本模板

抛开上面复杂的模板不谈,我们来写一个最基本的:

<Window.Resources>
    <ControlTemplate x:Key="defaultButtonTemplate" TargetType="Button">
        <Border Background="Red" CornerRadius="5">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                <TextBlock Text="★" VerticalAlignment="Center"/>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalAlignment}"
                              />
            </StackPanel>
        </Border>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Content="Hello" Width="100" 
                Template="{StaticResource defaultButtonTemplate}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Height="40"/>
</Grid>

同样地,你可以测试删除

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"

看看会发生什么,这样能帮助你理解上面的内容。

 

下一篇:WPF设计之数据模板

This article was last edited at 2020-09-13 16:15:09

* *