WPF学习（9）样式和行为

╰+哭是因爲堅強的太久メ 2021-11-26 07:40 282阅读 0赞

在asp.net世界中，我们的美工人员会为我们准备好静态页面，它注意包括三个部分：html、css和js。而在WPF世界里，也同样有着类似这三个部分的静态页面：Xaml、Style和Behaviors，当然，它们和前面三者的作用并不对等。Style几乎完成了css和js的功能，而Sliverlight 3中引入的Behaviors（封装到Expression Blend 3中和Expression Blend 3 SDK中）只是为了方便代码的复用，我们在后面详细来说。本文主要从Style样式和Behaviors行为两个方面来讲。

# 1.Style #

先来看看Style类的属性：

![132105111439523.png][]

## 1.1Setters ##

Setters是Style默认的内容属性，是Setter对象或者EventSetter对象的集合，所以可以省略Style.Setters而直接使用Setter或EventSetter。

Setter是用于设置属性值的，这个属性还得是依赖属性。EventSetter是自动关联事件处理程序的。举个例子：

xaml代码：

cs代码：

private void Label_MouseMove(object sender, MouseEventArgs e)
    {
          MessageBox.Show("Mouse Move!!");
    }

看下效果：

![132303010193511.png][]

需要说明一下几点：

1）以资源的形式要比内嵌的形式更具灵活性

2）在内嵌的形式中，设置属性值时，要么指定TargetType，要么使用Class.Property的形式

3）"<Setter Property="Control.Background">...</setter>"与"<Setter Property="Background">...</setter>"的区别在于，前者先去设置Control的Backgroud属性，然后应用该样式的控件继承，而后者直接去设置应用该样式的控件的属性

## 1.2Triggers ##

Triggers，即为触发器，使用它可以自动完成简单的样式改变。主要有以下几种触发器：

![132329478372204.png][]

具个例子，一并说明下这五种触发器：

xaml代码：

用到的两个Converter:

字符串长度转布尔类：

public class L2BConverter:IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                return (int)value > 6 ? true : false;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                return null;
            }
        }

字符串转布尔类

class S2BConverter:IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                Regex regex = new Regex(@"^\d*$");
                return !regex.IsMatch(value.ToString());
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }

效果大家可以copy代码运行看看。

## 1.3Resources ##

Style的Resources属性是ResourceDictionary类型，可以放一些在style中需要共享的对象资源。来看个例子：

xaml代码：

效果如下：

![152351577135295.png][]

## 1.4BaseOn ##

Style的BaseOn属性，可以实现Style的继承，从而实现多层样式。来看个简单的例子：

xaml代码：

效果图如下：

![160023030837439.png][]

## 1.5TargetType ##

这个属性，指定的是应用该Style的控件的类型。我们以一个例子为切入点来说明下：

xaml代码：

效果如下：

![160045386358306.png][]

首先，你可能会奇怪，指定了TargetType的Style这里没有x:key来标识该资源，这是因为xaml解析器会自动以其对象类型来当作它的key，类似这样：x:key="\{x:Type Button\}"。

另外，需要说明一下几点：

1）设置了TargetType类型的Style会应用该种类型的所有控件。

2）如果某该类型控件另外还设置了Style，会进行Merge的操作（由StaticResource或DynamicResource和TargetType确定的Style和ThemeStyle的合并）。StaticResource或DynamicResource和TargetType相同的Setter属性值，前者优先级高，不同的Setter属性值均起作用。

# 2.Behaviors #

Style提供了重用一组属性设置的方法，为帮助构建统一良好的界面迈出了重要的一步，但是，还是有很多的限制，比如对于动画的支持不够。我们知道，通常要设计一个动画效果，需要很多的xaml代码。而这样的动画也经常会在其他的地方使用，但是我们却不得不复制那一大块代码，为了DRY，微软在Expression Blend 3推出了Behaviors行为的特性。

首先，我们需要了解Behaviors这样几个关键点：

1）Behaviors可复用代码集合（UI功能），可以被任何对象附加使用

2）设计人员和开发人员只需要将它附加到元素上，而无需写任何的逻辑代码

3）一个Behaviors可以被多个对象元素同时使用

与Behaviors相关的程序集：

**System.Windows.Interactivity.dll**,该链接库定义了Behaviors（行为）基础类，有了该链接库支持，即可支持Behaviors（行为）；

**Microsoft.Expression.Interactions.dll**,该链接库提供了一些扩展行为类库，以及一些Action和Trigger类，作为演示实例；

Behaviors主要包括Trigger、Action和Behavior三个部分。需要注意的是，这里的Trigger和WPF的Trigger并不完全一样，可以同时使用它们。

![161747171007493.png][]

IAttachObject接口的定义很简单：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

// 摘要:
        //     供可以附加到另一个对象的对象使用的接口。
        public interface IAttachedObject
        {
            // 摘要:
            //     获得关联的对象。
            //
            // 备注:
            //     代表此实例附加到的对象。
            DependencyObject AssociatedObject { get; }
    
            // 摘要:
            //     附加到指定的对象。
            //
            // 参数:
            //   dependencyObject:
            //     要附加到的对象。
            void Attach(DependencyObject dependencyObject);
            //
            // 摘要:
            //     将此实例与其关联的对象分离。
            void Detach();
        }

AssociatedObject是一个只读的依赖对象属性，它指定行为的应用者。

## 2.1自定义一个Behavior ##

下面我们来自己定义一个Behaviors看看，要实现的效果是在Canvas中的控件可任意拖动：

先定义一个继承自Behavior<UIElement>的DragInCanvasBehavior类

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Interactivity;
    using System.Windows.Media;
    
    namespace CustomBehaviorsLib
    {
        public class DragInCanvasBehavior:Behavior<UIElement>
        {
            protected override void OnAttached()
            {
                base.OnAttached();
                //Hook up event handlers
                this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
                this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
                this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
            }
    
            void AssociatedObject_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
            {
                if (isDragging)
                {
                    AssociatedObject.ReleaseMouseCapture();
                    isDragging = false;
                }
            }
    
            void AssociatedObject_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
            {
                if (isDragging)
                {
                    Point point = e.GetPosition(canvas);
                    AssociatedObject.SetValue(Canvas.TopProperty, point.Y-mouseOffset.Y);
                    AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
                }
            }
            private Canvas canvas;
            private bool isDragging = false;
            private Point mouseOffset;
            void AssociatedObject_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
            {
                if (canvas == null)
                    canvas = (Canvas)VisualTreeHelper.GetParent(this.AssociatedObject);
                isDragging = true;
                mouseOffset = e.GetPosition(AssociatedObject);
                AssociatedObject.CaptureMouse();
            }
            protected override void OnDetaching()
            {
                base.OnDetaching();
                //detach event handlers
                this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
                this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
                this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
            }
        }
    }

然后在window4.xaml中添加对DragInCanvasBehavior类所在类库的引用，同时添加System.Window.Interactivity.dll的引用。

xaml代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

通过向BehaviorCollection类型的Interaction.Behaviors附加属性添加DragInCanvasBehavior实例。

效果如下：

![162138319137328.png][]![162140449864484.png][]

这里只是给红色的Canvas添加了DragInCanvasBehavior，所以只有红色的Canvas可以Drag。

Expression Blend 3 以及之后的版本（4和4.5）都有Behaviors提供了很好的支持，内部提供了好多封装好的Behaviors。况且，使用blend可以很方便简单的使用它。

## 2.2Expression Blend中Behaviors ##

Expression Blend是和Visual Studio配套使用的，也就是说对应的采用的是相同的解决方案文件格式，Blend 3对应VS2008，Blend 4对应VS2010，Blend 5对应VS2012。

![162213197859552.png][]

这里提供许多现成的行为，也包含自定义的Behaviors。用法基本类似，这里我们以MouseDragElementBehavior为例，来介绍下在Expression Blend中对Behaviors的使用。

先向界面拖放一个主Canvas，里面放三个子Canvas，背景颜色分别设为Yello、Red和Blue。然后将MouseDragElementBehavior拖放到红色的子Canvas上面，代码便自动完成了，实现了与上面相同的效果，及其方便快捷。

![162247518004064.png][]

有关Expression Blend的使用技巧，将会单独来讲，在后面模板和动画的学习中还将会提到。

转载于:https://www.cnblogs.com/jellochen/p/3551915.html

[132105111439523.png]: /images/20211126/1e3e8c9713ea47b4a05c3f05e4825f23.png
[132303010193511.png]: /images/20211126/8efa09bb6c544e21bf8058577fd305cc.png
[132329478372204.png]: /images/20211126/af770ca3eee5488299188ae377ab827e.png
[152351577135295.png]: /images/20211126/1d03dc796de94e52939a191d8226d2c2.png
[160023030837439.png]: /images/20211126/7c5f1adffb62452788a857d885723ba9.png
[160045386358306.png]: https://images0.cnblogs.com/blog/514048/201402/160045386358306.png
[161747171007493.png]: https://images0.cnblogs.com/blog/514048/201402/161747171007493.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif
[162138319137328.png]: https://images0.cnblogs.com/blog/514048/201402/162138319137328.png
[162140449864484.png]: https://images0.cnblogs.com/blog/514048/201402/162140449864484.png
[162213197859552.png]: https://images0.cnblogs.com/blog/514048/201402/162213197859552.png
[162247518004064.png]: https://images0.cnblogs.com/blog/514048/201402/162247518004064.png