- A+
概述
本文描述几个WPF的常用特性,包括:样式、触发器和控件模板。
样式/Style
Style就是控件的外观,在XAML中,我们通过修改控件的属性值来设置它的样式,如:
<!--直接定义style--> <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>
这样写的缺点是如果有一组控件具备同样的样式,代码不能复用,每个都要单独设置。所以,需要将样式代码提取出来,以便共用。
<UserControl.Resources> <Style x:Key="Border1" TargetType="Border"> <Setter Property="Background" Value="Orange"/> </Style> </UserControl.Resources> <!--在文件头部定义--> <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource Border1}"/>
TargetType="Border"表示这个样式表是针对Border控件的,Border1是这个样式的名字,如果不设置Key,表示对该页面范围内的所有Border控件均有效。
上述这个样式是定义在该控件头部的,它的有效范围就是当前页面。如果有多个页面或窗体需要用到同样的样式,那就需要在App.xaml中进行定义。
实际应用时,我们一般不会直接在App.xaml中定义样式,而是会新建一个资源字典文件,在该资源文件中进行定义,然后在App.xaml中包含该文件即可。
资源文件的定义:Style/Colors.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="Border2" TargetType="Border"> <Setter Property="Background" Value="Chocolate"/> </Style> </ResourceDictionary>
在App.xaml中包含该资源文件
<Application x:Class="LearnWPF.App"> <Application.Resources> <ResourceDictionary> <ResourceDictionary Source="Style/Colors.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
我们还可以在类库中定义样式,定义方式同上,同时,仍需要在在App.xaml中包含该资源文件,但包含方式和本地的不一样。
<ResourceDictionary Source="pack://application:,,,/LearnWPF.Controls;component/Style/CommonColors.xaml"/>
可以看出,这和我们引用第三方控件中的样式资源的方式是一样的。
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! --> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
触发器/Triggger
在样式中应用触发器,是指在控件某个触发属性变化时,要执行的属性变化,或启动某个动画。
<UserControl.Resources> <Style x:Key="MyButton" TargetType="Button"> <Setter Property="FontSize" Value="14"/> <Setter Property="FontWeight" Value="Normal"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold"/> </Trigger> </Style.Triggers> </Style> </UserControl.Resources>
以上表示当IsMouseOver=True时,将修改该控件的FontSize和FontWeight属性。IsMouseOver=False时,控件属性将恢复原来的值。
控件模板/ControlTemplate
有时候,我们需要完全修改控件的外观,这时就需要用到ControlTemplate,如下代码定义一个带指示灯的按钮
<Window.Resources> <Style x:Key="myButton" TargetType="Button"> <Setter Property="Background" Value="SeaGreen"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border BorderThickness="1" BorderBrush="Gray" Background="{TemplateBinding Background}" CornerRadius="10" > <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" > <Ellipse Width="20" Height="20" Fill="Green" Margin="10"/> <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" Margin="2 0"/> </StackPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
需要注意:这里有两个地方声明了TargetType="Button"。TemplateBinding 表示采用控件原来的值。在控件模板的定义中,也是可以使用Trigger的。
<Window.Resources> <Style x:Key="myButton" TargetType="Button"> <Setter Property="Background" Value="Silver"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border BorderThickness="1" BorderBrush="Gray" Background="{TemplateBinding Background}" CornerRadius="10" > <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" > <Ellipse x:Name="ell" Width="20" Height="20" Fill="LightGreen" Margin="10"/> <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" Margin="2 0"/> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True" > <Setter TargetName="ell" Property="Fill" Value="Red"/> <Setter Property="FontSize" Value="18"/> <Setter Property="Foreground" Value="White"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
与前文提到的Trigger不同,这里在设置属性时,多了一个TargetName="ell"
<Setter TargetName="ell" Property="Fill" Value="Red"/>
这表示,该项操作是针对ell这个控件的。
如果没有指定TargetName,能设定的属性仅仅是包含Button这个控件所具备的属性,Button是没有Fill属性的,就算原始控件是包含Fill属性的,也不能保证该属性的设置能向下延伸到你想要修改的控件,所以在ControlTemplate中修改控件属性时应指定TargetName 。
资源
系列目录:WPF开发快速入门【0】前言与目录