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

WPF资源

对象资源

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

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

二、  可维护：能够将一些设置信息放置在一个中心位置，并在多个地方使用。若是须要进行更改时，只须要在中心位置进行更改，方便代码的维护工做。

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

 下面是一个在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文件除了用于存储资源外，不能作任何其余的工做。

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

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

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

三、为了使用该资源，须要将其合并到应用程序资源集合中，能够合并到指定窗口资源集合，可是一般合并到应用程序级别的集合。

 

新建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的触发器有下面的类型（属性触发器、数据触发器、事件触发器）：

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

二、MultiTrigger：相似于简单触发器，可是组合了多个条件，全部的条件必须被知足才会改变样式。

三、DataTrigger：与简单触发器相似，该触发器与数据绑定一块儿运行。可是该触发器是检测任何绑定的数据是否发生变化。

四、MultiDataTrigger：组合了多个DataTrigger。

五、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>