实习笔记WPF装饰器Adorner

WPF装饰器就是，控件上的一层装饰效果， 装饰效果示例 效果如图

点击button后 ，给Button周围添加了装饰效果。如图 当然有多种方式，这只是其中的一种。

实现步骤

1 在程序中创造后缀为Adorner的类（以官方为准加上Adorner规范命名）继承Adorner类

命名空间 System.Windows.Documents （重写的OnRender 是来源于网络）

 public class ButtonAdorner : Adorner//创建装饰器 结尾以官方为准Adorner
    {
        public ButtonAdorner(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));
        }

    }

2 Xaml 中创 我们需要装饰的Button控件  命名 为button。再添加button 的Click事件 XAMl 代码如下 （Click事件主要是实现点击 添加装饰器和点击移除效果）

<Window
    x:Class="WPF装饰器Adorner.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:local="clr-namespace:WPF装饰器Adorner"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    Topmost="True"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

        <StackPanel x:Name="stackpanel" VerticalAlignment="Center">
            <Button
                x:Name="button"
                Grid.Row="0"
                Width="50"
                Height="50" />
            <Image
                Width="50"
                Height="50"
                Margin="50"
                Source="2.jpg" />
        </StackPanel>
        <ListBox Grid.Row="1" Width="150">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

        </ListBox>
        <StackPanel>
            <Button Click="button_Click" Content="添加装饰" />
            <Button Click="Button_Click_1" Content="移除" />
        </StackPanel>
    </Grid>
</Window>

3 点击事件代码如下 

using System.Windows;
using System.Windows.Documents;

namespace WPF装饰器Adorner
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            #region 给单个添加
            获取按钮本身装饰层
            //var s = AdornerLayer.GetAdornerLayer(button);
            //s.Add(new ButtonAdorner(button)); 
            #endregion
            //遍历stackpanel 中的子元素
            foreach (UIElement item in stackpanel.Children)//stackpanel 前端 StackPanel控件 命名
            {
                var s = AdornerLayer.GetAdornerLayer(item);
                s.Add(new ButtonAdorner(item));
            }
        }
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            #region 移除单个的写法
            //var s = AdornerLayer.GetAdornerLayer(button);//button 为前端控件命名
            获取装饰的集合
            //var ss = s.GetAdorners(button);
            //if (ss != null)
            //{
            //    for (int i = ss.Length - 1; i >= 0; i--)
            //    {
            //        s.Remove(ss[i]);
            //    }
            //} 
            #endregion
            foreach (UIElement item in stackpanel.Children)
            {
                var s = AdornerLayer.GetAdornerLayer(item);
                //获取装饰的集合
                var ss = s.GetAdorners(item);
                if (ss != null)
                {
                    for (int i = ss.Length - 1; i >= 0; i--)
                    {
                        s.Remove(ss[i]);
                    }
                }
            }
        }
    }
}