使用Adorner显示WPF控件的边界点

WPF研究 同时被 3 个专栏收录
114 篇文章 3 订阅
102 篇文章 0 订阅
157 篇文章 1 订阅

当我们拖动WPF控件时,我们为了更清楚地需要显示控件,一般我们会在WPF控件所围成的矩形区域的四个边界点上作一个特殊的记号(比如圆点)。如下图:
WPF中显示控件的边界点

在Winform中,我们一般都是先找到控件所包围的矩形区域,然后画出四个边界点。那么,在WPF,如何显示这四个边界点呢?

答案是使用Adorner。Adorner是继承自FrameworkElement的抽象类:
public abstract class Adorner : FrameworkElement

首先,我们建立一个CircleAdorner类,它继承自Adorner:
//CircleAdorner.cs
using System;
using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;

namespace BrawDraw.Com.WPF
{
    public class CircleAdorner : Adorner
    {
        public CircleAdorner(UIElement adornedElement)
            : base(adornedElement)
      {
      }

      protected override void OnRender(DrawingContext drawingContext)
      {
        //找出控件所围成的矩形区域
        Rect adornedElementRect = new Rect(this.AdornedElement.DesiredSize);
        SolidColorBrush renderBrush = new SolidColorBrush(Colors.Red);
        renderBrush.Opacity = 1.0;
        Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 0.5);
        double renderRadius = 3.0;

        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);
      }
    }
}

上面这个类的作用是对相应控件的“附加绘制”,它画出控件的四个顶点。这里的OnRender相当于GDI+中的OnPaint。

下面我们对一个TextBox,一个包含于StackPanel中的Button和TextBox, 以及包含于Canvas中的Path进行“附加绘制”。

先看看XAML代码:
// Window1.xaml
<Window x:Class="BrawDraw.Com.WPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    Title="CircleAdornerDemo" Loaded="WindowLoaded" Height="464" Width="625"
>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="80"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBox
      Name="myTextBox"
      Height="50" Width="150"
      Grid.Row="0"
      Text="这是一个TextBox."
    />
    <StackPanel Name="myStackPanel" Grid.Row="1">
      <Button
        Name="myButton1"
        Width="150"
        Content="Adorned Button"
      />
      <TextBox Grid.Row="1" Name="textBox1" Height="100" Width="220" />
    </StackPanel>
    <Canvas Margin="51,141,162,59"  Name="myCanvas" Grid.Row="1">
    <Path StrokeThickness="1.000000" Stroke="#fffa0e0b" StrokeMiterLimit="1.000000" Data="F1 M 100.295898,66.248535 C 100.295898,66.248535 44.894531,33.529785 68.517578,66.316895 C 92.140137,99.104004 197.243164,6.331055 274.625000,133.188477 C 366.679688,46.227051 378.309570,2.718750 359.714844,25.067383"/>
    </Canvas>
  </Grid>
</Window>

下面是控制代码:
// Window1.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Collections;

namespace BrawDraw.Com.WPF
{

  public partial class Window1 : Window
  {
    AdornerLayer myAdornerLayer;
       
    public Window1()
    {
      InitializeComponent();
    }

    private void WindowLoaded(object sender, RoutedEventArgs e)
    {
      myAdornerLayer = AdornerLayer.GetAdornerLayer(myTextBox);
      myAdornerLayer.Add(new CircleAdorner(myTextBox));

      foreach (UIElement toAdorn in myStackPanel.Children)
      {
          myAdornerLayer.Add(new CircleAdorner(toAdorn));
      }

      foreach (UIElement toAdorn in myCanvas.Children)
      {
          myAdornerLayer.Add(new CircleAdorner(toAdorn));
      }
    }
  }
}

注意:这里使用AdornerLayer.Add(new CircleAdorner(UIElement)方法来完成这种附加。

  • 0
    点赞
  • 7
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值