WPF 10天修炼 第七天- WPF资源、样式、控件模板

WPF资源

对象资源

WPF允许在XAML标记的任意位置定义资源。比如在特定的控件、窗口或应用程序级别定义资源，WPF资源系统提供的对象资源有如下好处：

1、  高效：使用对象资源可以在一个地方定义而在多个地方使用，这使得WPF代码可重用一些对象信息。

2、  可维护：可以将一些设置信息放置在一个中心位置，并在多个地方使用。如果需要进行更改时，只需要在中心位置进行更改，方便代码的维护工作。

3、  可适应性：当确定的信息从应用程序中分离出来放在资源中，就可以动态地被改变。例如可以基于用户的偏好设置当前语言来更改信息。

下面是一个在Grid级别的资源，设置textblock的字体大小。

<Window x:Class="WPFDemo.Resource_FontSize"
        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:WPFDemo"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="Resource_FontSize" Height="300" Width="300"
        >
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!---Grid级别的资源-->
        <Grid.Resources>
            <s:Double x:Key="SmallSize" >20</s:Double>
            <s:Double x:Key="LargeSize">30</s:Double>
        </Grid.Resources>
        <TextBlock Text="小字体" Grid.Row="0">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="SmallSize" />
            </TextBlock.FontSize>
        </TextBlock>
        <TextBlock Text="大字体" Grid.Row="1">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="LargeSize" />
            </TextBlock.FontSize>
        </TextBlock>
    </Grid>
</Window>

　　

 

静态资源

静态资源就是上面使用StaticResource标记引用的资源。这种资源一旦被创建就不会被改变。静态资源必须先定义资源，否则会抛出异常。

应用程序资源

应用程序的资源作用域覆盖整个WPF应用程序，WPF将按照元素、窗口、应用程序、系统资源的顺序进行资源查找。当新建一个WPF项目时，在APP.xaml中会自动添加<Application.Resources>标签，可以在标签内添加应用程序级别的资源。

定义BackgroundColor系统资源

<Application x:Class="WPFDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Resource-FontSize.xaml"
             >
    <Application.Resources>
        <SolidColorBrush x:Key="BackgroundColor" Color="Yellow">
       </SolidColorBrush>
    </Application.Resources>
</Application>

调用BackgrouundColor资源 

在Window标签添加引用  Background="{StaticResource BackgroundColor}"

<Window x:Class="WPFDemo.Resource_FontSize"
        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:WPFDemo"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="Resource_FontSize" Height="300" Width="300"
        Background="{StaticResource BackgroundColor}"
        >
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!---Grid级别的资源-->
        <Grid.Resources>
            <s:Double x:Key="SmallSize" >20</s:Double>
            <s:Double x:Key="LargeSize">30</s:Double>
        </Grid.Resources>
        <TextBlock Text="小字体" Grid.Row="0">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="SmallSize" />
            </TextBlock.FontSize>
        </TextBlock>
        <TextBlock Text="大字体" Grid.Row="1">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="LargeSize" />
            </TextBlock.FontSize>
        </TextBlock>
    </Grid>
</Window>

使用资源字典组织资源 

可以在一个单独的XAML文件中定义资源，然后该资源可以在多个项目进行共享。独立的资源文件使用ResourceDictionary作为根元素。该XAML文件除了用于存储资源外，不能做任何其他的工作。

下面定义一个线性渐变的背景色

1、  首先新建WPF资源文件添加资源内容

2、  将资源文件设置生成操作位Page以确保资源被作为BAML文件编译。也可以将其指定为Reesource，这种方式将内嵌在程序集中，不被编译，运行时编译，性能开支较大。

3、为了使用该资源，需要将其合并到应用程序资源集合中，可以合并到指定窗口资源集合，但是通常合并到应用程序级别的集合。

新建WPF资源文件并添加内容

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFDemo">
    <!--定义渐变的背景色-->
    <LinearGradientBrush x:Key="brushLinear">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="Yellow" Offset="0.5" />
            <GradientStop Color="Blue" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
</ResourceDictionary>

将资源文件合并到应用程序资源中

<Application x:Class="WPFDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Resource-FontSize.xaml"
             >
    <Application.Resources>
        <ResourceDictionary>
            <SolidColorBrush x:Key="BackgroundColor" Color="Yellow"></SolidColorBrush>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="DictionaryDemo.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

在上面的例子中增加一个button按钮将其背景颜色设置为渐变

<Window x:Class="WPFDemo.Resource_FontSize"
        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:WPFDemo"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="Resource_FontSize" Height="300" Width="300"
        Background="{StaticResource BackgroundColor}"
        >
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!---Grid级别的资源-->
        <Grid.Resources>
            <s:Double x:Key="SmallSize" >20</s:Double>
            <s:Double x:Key="LargeSize">30</s:Double>
        </Grid.Resources>
        <TextBlock Text="小字体" Grid.Row="0">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="SmallSize" />
            </TextBlock.FontSize>
        </TextBlock>
        <TextBlock Text="大字体" Grid.Row="1">
            <TextBlock.FontSize>
                <StaticResource ResourceKey="LargeSize" />
            </TextBlock.FontSize>
        </TextBlock>
        <Button Grid.Row="2" Content="我是应用静态资源的渐变色">
            <Button.Background>
                <StaticResource ResourceKey="brushLinear" />
            </Button.Background>
        </Button>
    </Grid>
</Window>

WPF样式

样式是WPF中功能强大的特性，样式基于资源，但是比资源提供了更多重用代码特性。样式与资源相比，提供了额外的好处来使XAML更具可重用性和扩展性。假设在UI中有几个button控件。需要提供3中不同的显示风格。例如不同的FontSize ,FontFamily 和FontWeight 3个属性。此时可能会考虑使用资源的办法，使用该资源可以完成该功能，但是如果每个属性设置3中资源，将会有9中资源出现。在这里使用WPF的样式功能可以轻松解决这些问题。

样式设置优先级：

优先级	描述
元素（高）	元素本身定义的属性具有最高的优先级
样式（中）	在样式中定义的相同属性
父元素（低）	从视觉树的父元素中继承下来的属性

下面实例中会将样式的各种用法都涉及到：主要包括基本的样式、内联样式、在样式中设置属性的复杂应用、根据指定类型自动应用样式。

<Window x:Class="WPFDemo.StyleDemo"
        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:WPFDemo"
        mc:Ignorable="d"
        Title="StyleDemo" Height="300" Width="300">
    <Window.Resources>
        <!--基本样式 button 按钮样式-->
        <Style x:Key="ButtonStyle">
            <Setter Property="Control.FontFamily" Value="楷体"></Setter>
            <Setter Property="Control.FontSize" Value="20"></Setter>
        </Style>
        <!--基本样式 Textblock样式-->
        <Style x:Key="TextBlockStyle">
            <Setter Property="Control.FontFamily" Value="楷体"></Setter>
            <Setter Property="Control.FontSize" Value="40"></Setter>
        </Style>
        <!--仅限Button使用-->
        <Style x:Key="buttonBackgroundColor">
            <Setter Property="Button.Background" Value="LightGreen"></Setter>
        </Style>
        <!--使用TargetType指定样式使用的控件类型  自动套用样式-->
        <Style TargetType="{x:Type Label}">
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
        </Style>
        <!--控件基类样式-->
        <Style x:Key="BaseStyle">
            <Setter Property="Control.FontSize" Value="20"></Setter>
        </Style>
        <!--继承BaseStyle-->
        <Style x:Key="BaseButtonSyle" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
        </Style>
    </Window.Resources>
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="应用样式按钮" Style="{StaticResource ButtonStyle}"></Button>
        <Button Grid.Row="1" FontSize="10" Content="应用样式按钮并设置字体大小" ></Button>
        <TextBlock Grid.Row="2" Text="应用样式文本" Style="{StaticResource TextBlockStyle}"></TextBlock>
        <TextBlock Grid.Row="3" Text="没有应用样式文本" ></TextBlock>
        <Button Grid.Row="4"  FontSize="10" Content="使用内联样式设置字体为红色 背景为黄色" >
            <!--内联样式-->
            <Button.Style>
                <Style>
                    <Setter Property="Control.Foreground" Value="Red"></Setter>
                    <Setter Property="Control.Background" Value="Yellow"></Setter>
                </Style>
            </Button.Style>
        </Button>
        <Button Grid.Row="5" Content="设置背景色为渐变（在样式中使用属性）">
            <!--样式中使用属性-->
            <Button.Style>
                <Style>
                    <Setter Property="Button.Background">
                        <Setter.Value>
                            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="Red" Offset="0"/>
                                    <GradientStop Color="Yellow" Offset="0.5"/>
                                    <GradientStop Color="Blue" Offset="1"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
        <Button Grid.Row="6" Content="我是button，我设置了button样式 - 背景为LightGreen，起作用" Style="{StaticResource buttonBackgroundColor}"></Button>
        <TextBlock Grid.Row="7" Text="我是textblock，我设置了button样式 - 背景为LightGreen;不起作用" Style="{StaticResource buttonBackgroundColor}"></TextBlock>
        <Label Grid.Row="8"   Content="我是Label，Target设置Label 我自动套用Label样式 字体为30 字体为红色"></Label>
        <Button Grid.Row="9" Style="{StaticResource BaseButtonSyle}" Content="我使用的是继承样式"></Button>
    </Grid>
</Window>

样式触发器

Style类提供了Triggers集合，每个样式可以有多个触发器，每个触发器是一个派生自System.Windows.TriggerBase类的实例。在WPF中，继承自TriggerBase的触发器有下面的类型（属性触发器、数据触发器、事件触发器）：

1、Trigger：简单触发器，该触发器检查特定的依赖的属性的值是否发生变化来使用Setter改变样式。

2、MultiTrigger：类似于简单触发器，但是组合了多个条件，所有的条件必须被满足才会改变样式。

3、DataTrigger：与简单触发器类似，该触发器与数据绑定一起运行。但是该触发器是检测任何绑定的数据是否发生变化。

4、MultiDataTrigger：组合了多个DataTrigger。

5、EventTrigger：这是最常用的触发器，当某个事件触发时来改变样式。

在触发器中如果多个触发器修改相同的属性，则最后触发的触发器优先。

<Window x:Class="WPFDemo.StyleTriggerDemo"
        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:WPFDemo"
        mc:Ignorable="d"
        Title="StyleTriggerDemo" Height="300" Width="300">
    <Window.Resources>
        <!--属性触发器 按下鼠标后字体增大 按钮旋转20度-->
        <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="20" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontSize" Value="20"></Setter>
                </Trigger>
            </Style.Triggers>
            <Setter Property="FontSize" Value="10"></Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#FF87F16F"/>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="50" />
        </Style>

        <!--多条件属性触发器 鼠标经过时显示字体颜色为黄色；鼠标按下并且字体为20时设置字体颜色为红色-->
        <Style x:Key="buttonStyle-Multi" TargetType="{x:Type Button}">
            <Setter Property="FontSize" Value="20" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Yellow" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsPressed" Value="True"/>
                        <Condition Property="FontSize" Value="20"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Red"></Setter>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>

        </Style>

        <!--事件触发器-->
        <Style x:Key="buttonClickStyle">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <!--定义事件触发器-->
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.1" To="1" Duration="0:0:2"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <!--数据触发器-->
        <Style x:Key="DataTextTrigger">
            <!---将控件的背景色设置为文本框中输入的颜色-->
            <Setter Property="Control.Background" Value="{Binding RelativeSource={RelativeSource Self},Path=Text}"></Setter>
            <Style.Triggers>
                <!--当文本中输入的字符超过20时，则文本框的Enable为false-->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=Text.Length}" Value="20">
                    <Setter Property="Control.IsEnabled" Value="False"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <!--多条件数据触发器-->
        <Style x:Key="DataTextTrigger-Multi">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <Setter Property="Control.Margin" Value="10" ></Setter>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding ElementName=cb1,Path=IsChecked}" Value="True"></Condition>
                        <Condition Binding="{Binding ElementName=cb2,Path=IsChecked}" Value="True"></Condition>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Control.Background" Value="Red"></Setter>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="0"   Name="but" Style="{StaticResource buttonStyle}" Content="属性触发器"/>
        <Button Grid.Row="1" Style="{StaticResource buttonStyle-Multi}"  Content="多条件属性触发器"/>
        <Button Grid.Row="2" Content="按钮" Style="{StaticResource buttonClickStyle}"></Button>
        <TextBox Grid.Row="3" Margin="10" Style="{StaticResource DataTextTrigger}" Text="LightBlue"></TextBox>
        <StackPanel Grid.Row="4" Name="panel1" Style="{StaticResource DataTextTrigger-Multi}">
            <CheckBox Name="cb1" >全选后改变背景颜色</CheckBox>
            <CheckBox Name="cb2" >全选后改变背景颜色</CheckBox>
        </StackPanel>
    </Grid>
</Window>

控件模板

在WPF中，每个控件都有一个默认的控件模板，用于定义控件的基本外观和行为。WPF使用ControlTemplate定义控件的外观，每个控件都有一个Template的属性。默认情况下。控件通过该属性获取呈现的外观，通过更改ControlTemplate，可以为控件定义一个新的样式

<Window x:Class="WPFDemo.TemplateDemo"
        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:WPFDemo"
        mc:Ignorable="d"
        Title="TemplateDemo" Height="300" Width="300">
    <Window.Resources>
        <ControlTemplate x:Key="ButtomTemplate" TargetType="{x:Type Button}">

            <Border Name="Border" BorderBrush="{TemplateBinding Foreground}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="5" Background="{TemplateBinding Background}"
                    TextBlock.Foreground="{TemplateBinding Foreground}"
                    Margin="{TemplateBinding Margin}">
                <ContentPresenter RecognizesAccessKey="True"
                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalAlignment}">

                </ContentPresenter>
            </Border>
            <!--设置模板触发器-->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver"  Value="True">
                    <Setter TargetName="Border" Property="Background" Value="Red"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="Yellow"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid> 

        <Button   Template="{StaticResource ButtomTemplate}" Margin="10" Background="LightBlue" Content="我是套用模板的button"></Button>
    </Grid>
</Window>