WPF 进阶 -模板（控件模板,组织模板资源,构建更复杂的模板）

1 2 3 集 1.13h

控件模板

理解控件模板

创建控件模板

模板绑定

模板触发器

<Window x:Class="MoBan.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MoBan"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
            <Border x:Name="border" BorderBrush="Orange" BorderThickness="3" CornerRadius="2" Background="Red" TextBlock.Foreground="White">
                <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="border" Property="Background" Value="DarkRed"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="border" Property="Background" Value="Blue"></Setter>
                    <Setter TargetName="border" Property="BorderBrush" Value="IndianRed"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="5">
            <Button Margin="5" Padding="3" >Normal Button</Button>
            <Button Margin="5" Padding="13" >Normal Button</Button>
            <Button Margin="5" Padding="13" Template="{StaticResource ButtonTemplate}">Templated Button</Button>
        </StackPanel>
    </Grid>
</Window>

　　

 

2.组织模板资源：

使用资源字典

由用户选择的皮肤

 

添加资源文件Resources/GradientButton.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MoBan">
    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3"  x:Key="HB">
        <GradientStop Color="Wheat" Offset="0"/>
        <GradientStop Color="Blue" Offset="1"/>
    </RadialGradientBrush>
    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3"  x:Key="PB">
        <GradientStop Color="Wheat" Offset="0"/>
        <GradientStop Color="Blue" Offset="1"/>
    </RadialGradientBrush>

    <SolidColorBrush Color="Blue" x:Key="DB"></SolidColorBrush>
    <SolidColorBrush Color="Gray" x:Key="DiB"></SolidColorBrush>

    <ControlTemplate x:Key="cp1">
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
              
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--写了下面的Style  Property="Control.Template" 之后，只要在Window.Resources 包含本文件 所有的按钮都会自动使用下面的Style-->
    <!--Style TargetType="{x:Type Button}">
        <Setter Property="Control.Template" Value="{StaticResource Dib}"></Setter>
    </-->
    
</ResourceDictionary>

创建资源字典，使用资源字典的ResourceDictionary.MergedDictionaries元素

<Window x:Class="MoBan.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MoBan"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/GradientButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="5">
            <Button Margin="10" Padding="5" x:Name="cmd1" Click="Clicked">A Simple With Custum Template</Button>
            <Button Margin="10" Padding="5" x:Name="cmd2" Click="Clicked">A Simple With Custum Template</Button>
            <Button Margin="10" Padding="5" x:Name="cmd3" Click="Clicked">A Simple With Custum Template</Button>
            <Button Margin="10" Padding="5" x:Name="cmd4" IsEnabled="False">A Simple With Custum Template</Button>
        </StackPanel>
    </Grid>
</Window>

交替使用不同的资源字典：

添加资源文件Resources/GradientButtonVariant.xaml

动态使用不同的资源字典

private void Clicked(object sender ,RoutedEventArgs routedEventArgs)
        {
            ResourceDictionary resourceDictionary = new ResourceDictionary();
            resourceDictionary.Source = new Uri("Resources/GradientButtonVarient.xaml", UriKind.Relative);
            this.Resources.MergedDictionaries[0] = resourceDictionary;
        }

 

3.构建更复杂的模板：

 

 

 

 

 

 源码在17章节源码