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>

  

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

静态资源

静态资源就是上面使用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>

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

使用资源字典组织资源 

可以在一个单独的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 10天修炼 第七天- WPF资源、样式、控件模板

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>

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

样式触发器

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 10天修炼 第七天- WPF资源、样式、控件模板

控件模板

在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>

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

上一篇:常用的Linux操作二


下一篇:九,WPF资源