WPF基础之样式

 样式基础

样式(Style)是组织和重用格式化选项的重要工具。不是使用重复的标记填充XAML,以便设置外边距、内边距、颜色以及字体等细节,而是创建一系列封装所有这些细节的样式,然后再需要之处通过属性来应用样式。

样式是可应用于元素的属性值集合。使用资源的最常见原因之一就是保存样式。

使按钮具有统一格式的实现方式一:资源

    <Window.Resources>
        <FontFamily x:Key="ButtonFontFamily">Times New Roman</FontFamily>
        <sys:Double x:Key="ButtonFontSize">18</sys:Double>
        <FontWeight x:Key="ButtonFontWeight">Bold</FontWeight>
    </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}">test</TextBlock>
    </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>one</Button>
        <Button Style="{x:Null}">two</Button>
        <Button>three</Button>
    </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}">onesfsfsfsfsdfsdf</Button>
    </Grid>

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

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

时间: 2024-10-27 05:00:57

WPF基础之样式的相关文章

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. 在DataGrid中的最高水平,你可以改变的外观和感觉,通过设置一些: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二.DataGrid自定义样式 DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大): DataGrid控件样式结构包括以下几个部分: 列头header样式 调整列头宽度的列分割线样式 行样式 行头调整高度样式 行头部样式

WPF自定义控件与样式(2)-自定义按钮FButton

一.前言.效果图 还是先看看效果图吧:   定义Button按钮名称叫FButton,主要是集成了字体图标(参考上一篇:WPF自定义控件与样式1-矢量字体图标(iconfont)).其实在WPF里,要实现本文FButton的需求,完全可以不用自定义控件,使用样式.模板就可以搞定了的. 二.按钮FButton控件定义 2.1 FButton继承自微软基础控件Button (C#代码) FButton继承自微软基础控件Button,没有什么逻辑代码,主要扩展了几个属性: 控件外观控制的属性,如圆角.

WPF快速入门系列(6)——WPF资源和样式

一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果多个控件都应用了多个格式的时候,我们就可以把这些格式封装成格式,然后在资源中定义这个格式,之前如果用到这个格式就可以直接使用这个样式,从而达到重用格式的手段.从中可以发现,WPF资源和WPF样式是相关的,我们经常把样式定义在资源中. 二.WPF资源详解 2.1 资源基础介绍 尽管可以在代码中创建和操

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

原文:WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合控件的样式定义: 二.ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,

关于WPF中关于样式和模板的区别

百度了下,改天整理. WPF中关于样式和模板的区别: 回答一: 1.WPF样式类似于Web应用程序中的CSS,在WPF中可以为控件定义统一的样式(Style).样式属于资源的一种,例如为Button定义统一的背景颜色和字体: <Window.Resources> <Style  TargetType="Button"> <Setter Property="Background" Value="Yellow" />

WPF自定义控件与样式(15)-终结篇

原文:WPF自定义控件与样式(15)-终结篇 系列文章目录  WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

WPF基础到企业应用系列6——布局全接触

一. 摘要 首先很高兴这个系列能得到大家的关注和支持,这段时间一直在研究Windows Azure,所以暂缓了更新,同时也本着想把它写好.宁缺毋滥的精神,在速度上自然也就慢了下来,这篇文章拖拖拉拉也经历了十多天才发布出来(每天写一点),不过请大家放心,这个系列一定会继续写下去.由于自己才疏学浅且是对这些技术的使用总结和心得体会,错误之处在所难免,怀着技术交流的心态,在这里发表出来,所以希望大家能够多多指点,这样在使一部分人受益的同时也能纠正我的错误观点,以便和各位共同提高. 这篇文章主要是对WP

WPF自定义控件与样式(15)-终结篇 &amp; 系列文章索引 &amp; 源码共享

系列文章目录  WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展 WPF自定义控件与样式(6)-ScrollV