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

概述

本文描述几个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)

posted @ 2022-08-23 16:34  seabluescn  阅读(1551)  评论(0编辑  收藏  举报