样式(style)是组织和重用格式化选项的重要工具。创建一系列封装某些细节的样式,然后通过属性来应用样式。

行为(behavior)是一款重用用户界面代码更有挑战性的工具。基本思想是:使用行为封装一些通用的UI功能。如果具有适当的行为,可使用一两行XAML标记将其附加到任何元素。

样式基础

样式就是可应用于元素的属性值集合。样式支持触发器,当属性发生变化时,可通过触发器改变控件的样式。

样式有5个重要属性:

属性 说明
Setters 设置属性值,自动关联事件处理程序的Setter对象或者EventSetter对象的集合
Triggers 继承自TriggerBase类,并能自动改变样式设置的对象集合。例如,当另一个属性改变时,或者当发生某个事件时,可以修改样式
Resources 希望用于样式的资源集合。例如,可能需要使用一个对象设置多个属性。这时,更高效 的做法是作为资源创建对象,然后再Setter对象中使用该资源(而不是使用嵌套的标签为每一个Setter对象的一部分创建对象)
BasedOn 通过该属性可创建继承自(并且可以选择地进行重写)其他样式设置的更具体形式
TargetType 该属性标识应用样式的元素类型。通过该属性可创建只影响特定类型元素的设置器,还可以创建能够为恰当的元素类型自动起作用的设置器
<Style x:Key="TextBlockBaseStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="TextWrapping" Value="NoWrap" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Height" Value="Auto" />
</Style>

触发器

使用触发器,可以自动完成简单的样式改变,例如,当属性发生改变时进行相应,并自动调整样式。触发器通过Style.Triggers集合链接到样式。每个样式都可以有任意多个触发器,而且每个触发器都是TriggerBse的派生类实例。

名称 说明
Trigger 最简单的触发器,可以监测依赖项属性的变化,然后使用设置器改变样式
MutiTrigger 和Trigger类似,但是触发器联合了多个条件。只有满足所有条件,才会启动触发器
DataTrigger 这种触发器使用数据绑定,与Trigger类似,只不过监测是任意绑定数据的变化
MultiDataTrigger 联合多个数据触发器
EventTrigger 最复杂的触发器,当事件发生时,这种触发器应用动画

简单触发器

每个简单的触发器都指定了正在监视的属性,以及正在等待的属性值。触发器的优点是不需要为翻转他们而编写任何逻辑。只要停止触发器(条件不满足时),元素就会恢复到之前的属性值。

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Opacity" Value=".9" />
    </Trigger>
    <Trigger Property="IsPressed" Value="True">
        <Setter Property="Opacity" Value=".6" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
        <Setter Property="Opacity" Value="0.4" />
    </Trigger>
</Style.Triggers>

触发器的顺序决定了哪个触发器最终生效,最后的触发器会生效。

如果希望创建只有当几个条件都成立时才激活的触发器,就可以使用MutiTrigger。这种触发器提供了一个Conditions集合,可通过该集合定一系列触发条件,这些条件不分先后顺序,只有全部满足时,触发器才会工作。

事件触发器

普通触发器等待属性发生变化,而事件触发器等待特定的事件被触发。事件触发器要求用户提供一系列修改控件的动作,这些动作通常被用作动画。

行为

基本思想:创建封装了一些通用用户界面功能的行为。这一功能可以是基本功能(如启动故事板或导航到超链接),也可以是复杂功能(如处理多点触摸交互,或构建使用实时物理引擎的碰撞模型)。一旦构建功能,就可将他们添加到任意应用程序的另一个控件中,具体方法是将该控件链接到适当的行为并设置行为的属性。

using Microsoft.Xaml.Behaviors;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Course04
{
    public class DragInCanvasBehavior : Behavior<UIElement>
    {
        protected override void OnAttached()
        {
            base.OnAttached(); 
            
            this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
        }
        protected override void OnDetaching()
        {
            base.OnDetaching();
            this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        }         Canvas canvas = null;
        bool isDragging = false;
        Point mouseOffset;
        private void AssociatedObject_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if(isDragging)
            {
                this.AssociatedObject.ReleaseMouseCapture();
                isDragging = false;
            }
        }
        private void AssociatedObject_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if(isDragging)
            {
                Point point = e.GetPosition(canvas);
                this.AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
                this.AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
            }
        }
        private void AssociatedObject_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if(canvas == null)
            {
                canvas = (Canvas)VisualTreeHelper.GetParent(this.AssociatedObject); 
            }
            isDragging = true;
            mouseOffset = e.GetPosition(this.AssociatedObject);
            this.AssociatedObject.CaptureMouse();
        }
        
    }
}

XAML代码:

<Window
    x:Class="Course04.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Course04"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <MediaElement LoadedBehavior="Play" Source="Normal.wav" Visibility="Collapsed" />
        <Canvas>
            <Rectangle Canvas.Left="60" Canvas.Top="20" Width="40" Height="50" Fill="Red" />
            <Ellipse Canvas.Left="80" Canvas.Top="100" Width="80" Height="50" Fill="Green">
                <b:Interaction.Behaviors>
                    <local:DragInCanvasBehavior />
                </b:Interaction.Behaviors>
            </Ellipse>
            <Rectangle Canvas.Left="70" Canvas.Top="200" Width="40" Height="50" Fill="Yellow" />
        </Canvas>
    </Grid>
</Window>

WPF进阶技巧和实战05-样式与行为的更多相关文章

  1. WPF进阶技巧和实战03-控件(3-文本控件及列表控件)

    系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...

  2. WPF进阶技巧和实战03-控件(4-基于范围的控件及日期控件)

    系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...

  3. WPF进阶技巧和实战08-依赖属性与绑定01

    依赖项属性 定义依赖项属性 注意:只能为依赖对象(继承自DependencyObject的类)添加依赖项属性.WPF中的元素基本上都继承自DependencyObject类. 静态字段 名称约定(属性 ...

  4. WPF进阶技巧和实战07--自定义元素01

    完善和扩展标准控件的方法: 样式:可使用样式方便地重用控件属性的集合,甚至可以使用触发器应用效果 内容控件:所有继承自ContentControl类的控件都支持嵌套的内容.使用内容控件,可以快速创建聚 ...

  5. WPF进阶技巧和实战06-控件模板

    逻辑树和可视化树 System.Windows.LogicalTreeHelper System.Windows.Media.VisualTreeHelper 逻辑树类(LogicalTreeHelp ...

  6. WPF进阶技巧和实战03-控件(5-列表、树、网格02)

    数据模板 样式提供了基本的格式化能力,但是不管如何修改ListBoxItem,他都不能够展示功能更强大的元素组合,因为了每个ListBoxItem只支持单个绑定字段(通过DisplayMemberPa ...

  7. WPF进阶技巧和实战03-控件(5-列表、树、网格01)

    列表控件 ItemsControl为列表项控件定义了基本功能,下图是ItemsControl的继承关系: 在继承自ItemsControl类的层次结构中,还显示了项封装器(MenuItem.TreeV ...

  8. WPF进阶技巧和实战09-事件(1-路由事件、鼠标键盘输入)

    理解路由事件 当有意义的事情发生时,有对象(WPF的元素)发送的用于通知代码的消息,就是事件的核心思想.WPF通过事件路由的概念增强了.NET事件模型.事件由允许源自某个元素的事件由另一个元素引发.例 ...

  9. WPF进阶技巧和实战09-事件(2-多点触控)

    多点触控输入 多点触控输入和传统的基于比的输入的区别是多点触控识别手势,用户可以移动多根手指以执行常见的操作,放大,旋转,拖动等. 多点触控的输入层次 WPF允许使用键盘和鼠标的高层次输入(例如单击和 ...

  10. WPF进阶技巧和实战07--自定义元素02

    在01节中,研究了如何开发自定义控件,下节开始考虑更特殊的选择:派生自定义面板以及构建自定义绘图 创建自定义面板 创建自定义面板是一种比较常见的自定义控件开发子集,面板可以驻留一个或多个子元素,并且实 ...

随机推荐

  1. 什么是.NET CLI CLR IL JIT GC,它们是如何工作的

    参考网址: https://cloud.tencent.com/developer/article/1432891 1:什么是.NET? NET 是 Microsoft 的用以创建 XML Web 服 ...

  2. hive简单数据分析

    简单查询分析 select brand_id from user_log limit 10; -- 查看日志前10数据 好像也没啥,和SQL相同,,limit取前多少条  , as取别名 查询条数统计 ...

  3. xmake v2.5.7 发布,包依赖锁定和 Vala/Metal 语言编译支持

    xmake 是一个基于 Lua 的轻量级跨平台构建工具,使用 xmake.lua 维护项目构建,相比 makefile/CMakeLists.txt,配置语法更加简洁直观,对新手非常友好,短时间内就能 ...

  4. OpenCV入门系列教学(三)绘制几何形状及添加文本

    一.绘制简单的几何形状和添加文本 opencv中绘制图形很简单,我们只需要使用下面这些常用函数即可. #画线 cv2.line() #画圆 cv2.circle() #画矩形 cv. rectangl ...

  5. Android Parsing between JSON and Kotlin Object with Google Gson Library

    Parsing between JSON and Kotlin Object with Google Gson Library dependencies { ... implementation 'c ...

  6. NOIP模拟50

    过分的神圣,往往比恶魔更加恶质. 前言 最大的一个收获就是不要动不动就码线段树,一定要审清楚题目之后再码!! T1 一开始理解错题了,以为答案是就是 \(\dfrac{\operatorname{le ...

  7. Asp.net Core Jwt简单使用

    .net 默认新建Api项目不需要额外从Nuget添加Microsoft.AspNetCore.Authentication.JwtBearer appsettings.json { "Lo ...

  8. 创建 Spring容器的三种方式

    一.src路径下打包完在war包的classes层级下 1.Spring容器创建的三种方式 创建Bean容器之后创建对象: 其中第三种使用的是BeanFactory对象 2.spring通过配置文件用 ...

  9. nacos配置中心模块详解

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 配置中心 业务上的配置,功能开关,服务治理上对弱依赖的降级,甚至数据库的密码等,都可能用到动态 ...

  10. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...