WPF开发快速入门【2】WPF的基本特性(Style、Trigger、Template)

  • WPF开发快速入门【2】WPF的基本特性(Style、Trigger、Template)已关闭评论
  • 25 次浏览
  • A+
所属分类:.NET技术
摘要

概述 本文描述几个WPF的常用特性,包括:样式、触发器和控件模板。   样式/Style

概述

本文描述几个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】前言与目录 

代码下载:Learn WPF: WPF学习笔记 (gitee.com)