在项目中经常会遇到类似如下要求的需求,创建允许自由拖动的控件,这样的需求可以使用WPF的装饰器Adorner来实现。
文章来源地址https://www.toymoban.com/news/detail-671021.html
一、什么是装饰器?
- Adorner 是一个抽象类,所有装饰器的实现都需要继承此类,比如ThumbBorderAdorner
- AdornerLayer 一个类,表示一个或多个装饰元素的装饰器呈现层
- 利用AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(userControl)函数,来获取指定控件是否有装饰器布局层
- 利用Adorner[] adorners = adornerLayer.GetAdorners(userControl);,来查看当前控件的装饰器个数
- AdornerDecorator 一个类,为可视化树中的子元素提供AdornerLayer
二、装饰器的使用场景
- 为现有的元素添加额外的装饰,如为Border添加8个装饰矩形
三、如何创建自定义的装饰器?
- 创建一个类,继承自Adorner类
- 重写此类中需要的函数
- OnRender(DrawingContext drawingContext) 在派生类中重写,参与由布局系统控制的呈现操作,调用此方法时,不直接使用此元素的呈现指令,而是将其保留供布局和绘制在以后异步使用,可以使用drawingContext 来绘制各种形状以及图形。
- ArrangeOverride() 为FrameworkElement派生类定位子元素并确定大小,在其中调用Arrange()函数,来定位子元素
- GetVisualChild() //获取第几个Thumb控件,在构造时使用
- 简单的装饰可以重写OnRender()函数,在其中绘制所需要的装饰,参照BorderAdorner
- 复杂一些的如需要可以定义VisualCollection的集合来存放装饰器,重写ArrangeOverride和GetVisualChild函数来实现,参照ThumbBorderAdorner
四、给控件使用自定义的Adorner
- 添加Adorner
AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(userControl); if (adornerLayer != null) { Adorner[] adorners = adornerLayer.GetAdorners(userControl); if (adorners == null || adorners.Count() == 0) { adornerLayer.Add(new ThumbBorderAdorner(userControl) { DragCompletedAction = ThumbBorderAdornerDragCompletedActionFunc }); } }
- 移除 Adorner
AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(userControl); if (adornerLayer != null) { Adorner[] adorners = adornerLayer.GetAdorners(userControl); if (adorners != null && adorners.Count() > 0) adornerLayer.Remove(adorners[0]); }
五、处理拖拽Thumb时,导致控件范围超出父级容器的情况
- 即在添加装饰器的控件中添加UserControl_SizeChanged()来处理控件大小和和未知变化
private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e) { int tempMargin = 1; //MarkRectUserControl控件始终在父级容器的1个像素以内 double left = Canvas.GetLeft(this); if (left < tempMargin) { left = tempMargin; Canvas.SetLeft(this, left); } double top = Canvas.GetTop(this); if (top < tempMargin) { top = tempMargin; Canvas.SetTop(this, top); } if (left + this.ActualWidth > canvasParent.ActualWidth - tempMargin) this.Width = canvasParent.ActualWidth - tempMargin - left; if (top + this.ActualHeight > canvasParent.ActualHeight - tempMargin) this.Height = canvasParent.ActualHeight - tempMargin - top; }
六、测试使用
<UserControl x:Class="BlogDemo.Views.AdornerTestUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:BlogDemo.Views" mc:Ignorable="d" Background="White" d:DesignHeight="450" d:DesignWidth="800" FontSize="20" Foreground="Blue" Loaded="UserControl_Loaded" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Text="请拖拽Thumb控件来改变,控件大小。" HorizontalAlignment="Center" Margin="10"/> <Canvas x:Name="Canvas_Main" Grid.Row="1"> <Border x:Name="Border_Text" Canvas.Left="200" Canvas.Top="100" Width="200" Height="100" BorderThickness="2" BorderBrush="Green" SizeChanged="Border_Text_SizeChanged"/> </Canvas> </Grid> </UserControl>
/// <summary> /// AdornerTestUserControl.xaml 的交互逻辑 /// </summary> public partial class AdornerTestUserControl : UserControl { public AdornerTestUserControl() { InitializeComponent(); } private void UserControl_Loaded(object sender, RoutedEventArgs e) { AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(Border_Text); if (adornerLayer != null) { Adorner[] adorners = adornerLayer.GetAdorners(Border_Text); if (adorners == null || adorners.Count() == 0) { adornerLayer.Add(new ThumbBorderAdorner(Border_Text)); } } } private void Border_Text_SizeChanged(object sender, SizeChangedEventArgs e) { int tempMargin = 100; double left = Canvas.GetLeft(Border_Text); if (left < tempMargin) { left = tempMargin; Canvas.SetLeft(Border_Text, left); } double top = Canvas.GetTop(Border_Text); if (top < tempMargin) { top = tempMargin; Canvas.SetTop(Border_Text, top); } if (Border_Text.ActualWidth < tempMargin) Border_Text.Width = tempMargin; if (Border_Text.ActualHeight < tempMargin) Border_Text.Height = tempMargin; if (left + Border_Text.ActualWidth > Canvas_Main.ActualWidth - tempMargin) Border_Text.Width = Canvas_Main.ActualWidth - tempMargin - left; if (top + Border_Text.ActualHeight > Canvas_Main.ActualHeight - tempMargin) Border_Text.Height = Canvas_Main.ActualHeight - tempMargin - top; } }
源码地址:https://gitee.com/LiuShuiRuoBing/code_blog文章来源:https://www.toymoban.com/news/detail-671021.html
到了这里,关于WPF-利用装饰器实现控件的自由拖动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!