WPF基础之样式

2021-06-21 19:03

阅读:441

标签:动画效果   anim   cond   focus   要求   animation   targe   mat   时间   

 样式基础

     样式(Style)是组织和重用格式化选项的重要工具。不是使用重复的标记填充XAML,以便设置外边距、内边距、颜色以及字体等细节,而是创建一系列封装所有这些细节的样式,然后再需要之处通过属性来应用样式。
样式是可应用于元素的属性值集合。使用资源的最常见原因之一就是保存样式。
使按钮具有统一格式的实现方式一:资源
    Window.Resources>
        FontFamily x:Key="ButtonFontFamily">Times New RomanFontFamily>
        sys:Double x:Key="ButtonFontSize">18sys:Double>
        FontWeight x:Key="ButtonFontWeight">BoldFontWeight>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        Button FontFamily="{StaticResource ButtonFontFamily}" FontSize="{StaticResource ButtonFontSize}" FontWeight="{StaticResource ButtonFontWeight}"> 
        Button>
    Grid>
这个示例可以正常工作,它将字体细节(所谓的magic number)移出的标记。但也存在两个问题。
  • 除了资源的名称相似之外,没有明确指定三个资源是相关的。这使维护应用程序变得复杂。
  • 需要使用资源的标记非常繁琐。还没有原来不使用资源时简明。
样式为解决这个问题提供了非常好的解决方案。可独立的用户封装所有希望设置的属性的样式。
 Window.Resources>
        Style x:Key="BigFontButtonStyle">
            Setter Property="Control.FontFamily" Value="Times New Roman"/>
            Setter Property="Control.FontSize" Value="18"/>
            Setter Property="Control.FontWeight" Value="Bold"/>
        Style>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        Button Style="{StaticResource BigFontButtonStyle}"> 
        Button>
    Grid>
通过样式系统不仅可以创建多组明显相关的属性设置,而且使得应用程序这些设置更加容易,从而精简了标记。

 设置属性

每个Style对象都封装了一个Setter对象的集合。每个Setter对象设置元素的单个属性。在某些情况下不能使用简单的特性字符设置属性值。可使用嵌套的元素代替如:
 Setter Property="Control.Background">
        Setter.Value>
            ImageBrush  TileMode="Tile" ViewboxUnits="Absolute" Viewport="0 0 32 32" ImageSource="" Opacity="0.3">ImageBrush>
         Setter.Value>
Setter>

 创建只应用按钮的样式  

  Style x:Key="BigFontButtonStyle" TargetType="Button">
            Setter Property="FontFamily" Value="Times New Roman"/>
            Setter Property="FontSize" Value="18"/>
            Setter Property="FontWeight" Value="Bold"/>
        Style>

 关联事件处理程序

实现大量元素鼠标悬停效果。
Window.Resources>
        Style x:Key="MouseOverHighlightStyle">
            EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter">EventSetter>
            EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave">EventSetter>
        Style>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        TextBlock Style="{StaticResource MouseOverHighlightStyle}">TextBlock>
    Grid>

 多层样式

     每个WPF元素一次只能使用一个样式对象,这像是一种限制,但由于属性值的继承和样式继承特性,这种限制实际是不存在的。例如,希望为一组控件使用相同的字体,又不想为每个控件应用相同的样式。对于这种情况,可将他们放置到面板中,并设置容器的样式。只要设置的属性具有属性值继承特性,这些值就会传递到子元素。使用这种模型的属性包括
IsEnabled、IsVisible、Foreground以及所有字体属性。
另外一些情况,可能希望在另一个样式的基础上建立样式,可用BasedOn特性。
Window.Resources>
        Style x:Key="BigFontButtonStyle">
            Setter Property="Control.FontFamily" Value="Times New Roman"/>
            Setter Property="Control.FontSize" Value="18"/>
            Setter Property="Control.FontWeight" Value="Bold"/>
        Style>
        Style x:Key="NewBigButtonBigFontStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            Setter Property="Control.Foreground" Value="Red"/>
            Setter Property="Control.Background" Value="DarkBlue"/>
        Style>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        TextBlock Style="{StaticResource NewBigButtonBigFontStyle}">testTextBlock>
    Grid>

 通过类型自动应用样式

上面都是具有名称的样式,还有一种为特定类型元素自动应用的样式。
 Window.Resources>
        Style TargetType="Button">
            Setter Property="Control.FontFamily" Value="Times New Roman"/>
            Setter Property="Control.FontSize" Value="18"/>
            Setter Property="Control.FontWeight" Value="Bold"/>
        Style>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        Button>oneButton>
        Button Style="{x:Null}">twoButton>
        Button>threeButton>
    Grid>
上面的例子中第二个按钮显示替换了样式,将style设置为null,有效的删除了样式。

 触发器

     使用触发器可自动完成简单的样式的改变,不需要使用代码,也可以完成不少工作。
触发器通过Style.Trigger集合链接到样式。每个样式可以有任意多个触发器。每个触发器都是System.Windows.TriggerBase的实例。
TriggerBase的子类
 
 
名称 说明
Trigger 这是一种最简单的触发器。可以监测依赖项属性的变化,然后设置器改变样式。
MultiTrigger 与Trigger类似,但这种触发器联合了多个条件。只有满足了所有这些条件,才会启动触发器。
DataTrigger 这种触发器使用数据绑定,与Trigger类似,只不过监视的是任意绑定数据的变化。
MultiDataTrigger 联合多个数据触发器。
EventTrigger 这是最复杂的触发器。当事件发生时,这种触发器应用动画。

 简单触发器

     可为任何依赖项属性关联简单触发器。例如,可通过相应Control类的IsFocused、IsMouseOver以及IsPressed属性的变化,创建鼠标悬停效果和焦点效果。
每个触发器都制定了正在监视的属性以及正在等待的属性值。当属性值出现时,将应用Trigger.Setters集合里的设置器。
Window.Resources>
        Style x:Key="BigFontButton">
            Style.Setters>
                Setter Property="Control.FontFamily" Value="Times New Roman"/>
                Setter Property="Control.FontSize" Value="18"/>
                Setter Property="Control.FontWeight" Value="Bold"/>
            Style.Setters>
            Style.Triggers>
                Trigger Property="Control.IsFocused" Value="True">
                    Setter Property="Control.Foreground" Value="DarkRed"/>
                Trigger>
            Style.Triggers>
        Style>
    Window.Resources>
触发器的优点是不需要为翻转他们而编写任何代码。
如果希望几个条件都满足时才激活触发器,可使用MultiTrigger
Style.Triggers>
                MultiDataTrigger>
                    MultiDataTrigger.Conditions>
                        Condition Property="Control.IsFocused" Value="true"/>
                        Condition Property="Control.IsMouseOver" Value="true"/>
                    MultiDataTrigger.Conditions>
                    MultiDataTrigger.Setters>
                        Setter Property="Control.Foreground" Value="DarkRed"/>
                    MultiDataTrigger.Setters>
                MultiDataTrigger>
            Style.Triggers>

 事件触发器

      普通触发器等待属性发生变化,而事件触发器等待特定事件被引发。事件触发器要求用户提供一系列修改控件的动作。这些动作常用于动画。
如监听MouseEnter事件,然后动态改变按钮的FontSize属性从而形成动画效果,在0.2秒的时间内容字体放大到22个单位。
Window.Resources>
        Style x:Key="BigFontButton">
            Style.Setters>
                Setter Property="Control.FontFamily" Value="Times New Roman"/>
                Setter Property="Control.FontSize" Value="18"/>
                Setter Property="Control.FontWeight" Value="Bold"/>
            Style.Setters>
            Style.Triggers>
                EventTrigger RoutedEvent="Mouse.MouseEnter">
                    EventTrigger.Actions>
                        BeginStoryboard>
                            Storyboard>
                                DoubleAnimation Duration="0:0:3" Storyboard.TargetProperty="FontSize"
                                                 To="50"/>
                            Storyboard>
                        BeginStoryboard>
                    EventTrigger.Actions>
                EventTrigger>
                EventTrigger RoutedEvent="Mouse.MouseLeave">
                    EventTrigger.Actions>
                        BeginStoryboard>
                            Storyboard>
                                DoubleAnimation Duration="0:0:3" Storyboard.TargetProperty="FontSize"/>
                            Storyboard>
                        BeginStoryboard>
                    EventTrigger.Actions>
                EventTrigger>
            Style.Triggers>
        Style>
    Window.Resources>
    Grid Name="gird1" ShowGridLines="True">
        Button HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BigFontButton}">onesfsfsfsfsdfsdfButton>
    Grid>

 

与属性触发器不同如果希望元素返回原始状态,需要反转事件触发器。如上面例子,需要编写MouseLeav事件的触发器。不需要指明字体的大小,默认会恢复成第一次动画之前的字体大小。
技术分享图片技术分享图片
 

WPF基础之样式

标签:动画效果   anim   cond   focus   要求   animation   targe   mat   时间   

原文地址:https://www.cnblogs.com/lovezhangyu/p/10229250.html


评论


亲,登录后才可以留言!