WPF 装饰器（Adorner）_Danny_hi的博客

相关文章推荐

心软的茄子 · wpf触发器介绍和用法举例__示例_属性· 1 周前 ·

曾经爱过的汉堡包 · WPF中TextBox绑定变量_wpf ...· 3 天前 ·

霸气的煎饼 · [WPF 基础知识系列] —— ...· 3 天前 ·

很拉风的香菜 · WPF中的binding（十一）- ...· 3 天前 ·

英姿勃勃的墨镜 · WPF --- TextBox的输入校验 ...· 3 天前 ·

痛苦的热水瓶 · 重要新闻_中华人民共和国外交部· 1 月前 ·

阳光的金鱼 · 如何看待3D美少女游戏公司 i ...· 8 月前 ·

才高八斗的柳树 · 司马太太18部作品【日漫控吧】_百度贴吧· 1 年前 ·

果断的火腿肠 · 初婚有刺动画,动画大全 - 快看漫画· 1 年前 ·

没有腹肌的鞭炮 · 雷克萨斯ES200被车友们戏称为雷肉肉，他又 ...· 1 年前 ·

using System . Threading . Tasks ; using System . Windows ; using System . Windows . Documents ; using System . Windows . Media ; namespace WpfApp1 public class TestAdorner : Adorner public TestAdorner ( UIElement adornedElement ) : base ( adornedElement ) protected override void OnRender ( DrawingContext drawingContext ) Rect adornedElementRect = new Rect ( this . AdornedElement . DesiredSize ) ; // Some arbitrary drawing implements. SolidColorBrush renderBrush = new SolidColorBrush ( Colors . Green ) ; renderBrush . Opacity = 0.2 ; Pen renderPen = new Pen ( new SolidColorBrush ( Colors . Navy ) , 1.5 ) ; double renderRadius = 5.0 ; // Draw a circle at each corner. drawingContext . DrawEllipse ( renderBrush , renderPen , adornedElementRect . TopLeft , renderRadius , renderRadius ) ; drawingContext . DrawEllipse ( renderBrush , renderPen , adornedElementRect . TopRight , renderRadius , renderRadius ) ; drawingContext . DrawEllipse ( renderBrush , renderPen , adornedElementRect . BottomLeft , renderRadius , renderRadius ) ; drawingContext . DrawEllipse ( renderBrush , renderPen , adornedElementRect . BottomRight , renderRadius , renderRadius ) ;

主窗体xaml代码：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="600"
        FontFamily="Microsoft YaHei" FontWeight="ExtraLight" >
    <Grid Margin="10" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel>
            <Button Content="开始添加装饰效果" Width="200" Height="40" Name="btn_test" Click="btn_test_Click"/>
            <Button Content="移除装饰效果" Width="200" Height="40" Name="btn_clear" Click="btn_clear_Click"/>
        </StackPanel>
        <Button x:Name="my_Button" Width="200" Height="40" Grid.Row="1"/>
    </Grid>
</Window>
主窗体后台代码 MainWindow.xaml.cs： 
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.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp1
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        private void btn_test_Click(object sender, RoutedEventArgs e)
            var layer = AdornerLayer.GetAdornerLayer(my_Button);
            layer.Add(new TestAdorner(my_Button));
        private void btn_clear_Click(object sender, RoutedEventArgs e)
            var layer = AdornerLayer.GetAdornerLayer(my_Button);
            var arr = layer.GetAdorners(my_Button);//获取该控件上所有装饰器，返回一个数组
            if(arr != null)
                for(int i = arr.Length - 1;i >= 0; i--)
                    layer.Remove(arr[i]);
运行效果：
 （为下面的Button四周添加了小圆圈效果）
  
示例二：
 装饰器TestAdorner类： 
public class TestAdorner : Adorner
        public TestAdorner(UIElement adornedElement) :base(adornedElement)
		protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
			Rect adornedElementRect = new Rect(this.AdornedElement.RenderSize);
			Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 1.0);
			// Draw a circle at each corner.
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.TopLeft.X - 3, adornedElementRect.TopLeft.Y - 3), new Point(adornedElementRect.TopLeft.X + 5, adornedElementRect.TopLeft.Y - 3));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.TopLeft.X - 3, adornedElementRect.TopLeft.Y - 3), new Point(adornedElementRect.TopLeft.X - 3, adornedElementRect.TopLeft.Y + 5));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.TopRight.X + 3, adornedElementRect.TopRight.Y - 3), new Point(adornedElementRect.TopRight.X - 5, adornedElementRect.TopRight.Y - 3));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.TopRight.X + 3, adornedElementRect.TopRight.Y - 3), new Point(adornedElementRect.TopRight.X + 3, adornedElementRect.TopRight.Y + 5));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.BottomLeft.X - 3, adornedElementRect.BottomLeft.Y + 3), new Point(adornedElementRect.BottomLeft.X + 5, adornedElementRect.BottomLeft.Y + 3));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.BottomLeft.X - 3, adornedElementRect.BottomLeft.Y + 3), new Point(adornedElementRect.BottomLeft.X - 3, adornedElementRect.BottomLeft.Y - 5));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.BottomRight.X + 3, adornedElementRect.BottomRight.Y + 3), new Point(adornedElementRect.BottomRight.X - 5, adornedElementRect.BottomRight.Y + 3));
			drawingContext.DrawLine(renderPen, new Point(adornedElementRect.BottomRight.X + 3, adornedElementRect.BottomRight.Y + 3), new Point(adornedElementRect.BottomRight.X + 3, adornedElementRect.BottomRight.Y - 5));
窗体MainWindow.xaml代码：




    
 
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="600"
        FontFamily="Microsoft YaHei" FontWeight="ExtraLight" >
    <Grid Margin="10" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel>
            <Button Content="开始添加装饰效果" Width="200" Height="40" Name="btn_test" Click="btn_test_Click"/>
            <Button Content="移除装饰效果" Width="200" Height="40" Name="btn_clear" Click="btn_clear_Click"/>
        </StackPanel>
        <StackPanel Grid.Row="1" Name="my_Panel">
            <Button Width="200" Height="40" Margin="0 30 0 10"/>
            <TextBox Width="200" Height="40" Margin="0 10 0 10"/>
        </StackPanel>
    </Grid>
</Window>
主窗体后台代码 MainWindow.xaml.cs： 
public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        private void btn_test_Click(object sender, RoutedEventArgs e)
            foreach (UIElement item in my_Panel.Children)
                var layer = AdornerLayer.GetAdornerLayer(item);
                layer.Add(new TestAdorner(item));
        private void btn_clear_Click(object sender, RoutedEventArgs e)
            foreach (UIElement item in my_Panel.Children)
                var layer = AdornerLayer.GetAdornerLayer(item);
                var arr = layer.GetAdorners(item);//获取该控件上所有装饰器，返回一个数组
                if (arr != null)
                    for (int i = arr.Length - 1; i >= 0; i--)
                        layer.Remove(arr[i]);
运行效果：
 （给控件周围添加了四个红框）
 
                    WPF 装饰器（Adorner）装饰器可以用来给显示的控件添加一些装饰的效果；示例一：首先添加一个装饰器类：TestAdornerusing System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Documents;using System.Wind
				　　看到这个标题，您可能会在脑中产生一个疑问：Adorner是什么？Adorner是WPF窗口中独立的一层，支持在界面元素之上执行独立的绘制及用户交互。可以说，Adorner在您的WPF程序中无处不在。在WPF中，从编辑框控件中光标的显示和选中效果的支持，到具有数据焦点的控件所具有的虚线外框，都是通过Adorner实现的。
什么是Adorner
　　鉴于您可能不熟悉Adorne...
，我之前是修改的ControlTemplate。类似于将一个带数字的控件，放在另一个控件的右上角，来实现的这个效果。
原来WPF有个Adorner，也可以实现这样的效果。
WPF中很多控件，都带Adorner层。这相当于一个控件的装饰层。我们在这里面可以做出很多蛮好的效果。比如错误提示等。
项目中有时需要在图片上标注热区，在HTML中有<area>标签，但在WPF中目前还没现成的控件来实现这这一功能。至于图片热区功能有道词典的【图解词典】是个不错的例子，如图1： 
什么是Adorner？
Adoner 是一个绑定到某个UIElement自定义的FrameWorkElemnt 。Adoner被渲染在AdornerLayer,而AdornerLay...
下面来分解一下遮罩层实现原理：
定有不可用装饰类，DisabledAdorner继承Adorner装饰类。Adorner是继承FrameworkElement元素基类。
定义集合VisualCollectione用于添加Grid，定义Grid容器用于遮罩控件。
private VisualCollection _visCollec;
private Grid _grid;
				在一个page页面上添加一个半透明的遮罩层，遮罩层里显示一个用户控件。 效果就是微信的winows版的搜索功能。
这里要借助AdornerLayer。
首先自定义一个用户控件。这里就不描述了。
然后定义一个类继承Adorner。
代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using S
				Adorner是WPF中一种特殊的视觉元素，可以用于在其他元素上添加装饰或者附加功能。Adorner通常用于实现在用户界面上的一些特殊效果，比如鼠标悬停提示、错误提示、操作提示等。
Adorner需要继承自Adorner类，并在构造函数中调用基类的构造函数，并将需要装饰的元素作为参数传递进去。Adorner类中有一个AdornedElement属性，用于获取被装饰的元素。
Adorner类中有一个OnRender方法，用于绘制Adorner的外观。在OnRender方法中可以使用DrawingContext来绘制Adorner的外观，也可以使用VisualBrush来填充Adorner的内容。
Adorner的使用方法：
1. 创建一个Adorner类，继承自Adorner类，并在构造函数中调用基类的构造函数，并将需要装饰的元素作为参数传递进去。
2. 重写Adorner类的OnRender方法，用于绘制Adorner的外观。
3. 在需要装饰的元素上调用AdornerLayer.GetAdornerLayer方法获取AdornerLayer对象。
4. 调用AdornerLayer的Add方法，将Adorner添加到AdornerLayer中。
下面是一个简单的例子：
```csharp
public class MyAdorner : Adorner
    public MyAdorner(UIElement adornedElement) : base(adornedElement)
    protected override void OnRender(DrawingContext drawingContext)
        base.OnRender(drawingContext);
        // 绘制Adorner的外观
        drawingContext.DrawEllipse(Brushes.Red, null, new Point(AdornedElement.RenderSize.Width / 2, AdornedElement.RenderSize.Height / 2), AdornedElement.RenderSize.Width / 2, AdornedElement.RenderSize.Height / 2);
// 在需要装饰的元素上添加Adorner
var adornedElement = new Button { Content = "Click me!" };
var adornerLayer = AdornerLayer.GetAdornerLayer(adornedElement);
var myAdorner = new MyAdorner(adornedElement);
adornerLayer.Add(myAdorner);
这个例子中，我们创建了一个MyAdorner类，继承自Adorner类，并重写了OnRender方法，在OnRender方法中绘制了一个红色的圆形。然后我们创建了一个Button元素，并将其作为参数传递给MyAdorner的构造函数，创建了一个AdornerLayer对象，并调用Add方法将MyAdorner添加到AdornerLayer中，从而实现了在Button元素上添加了一个红色的圆形装饰器。