C# wpf Canvas中實現(xiàn)控件拖動調(diào)整大小的示例
更新時間：2022年08月05日 09:14:31 作者：CodeOfCC
本文主要介紹了C# wpf Canvas中實現(xiàn)控件拖動調(diào)整大小的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
我們做圖片編輯工具、視頻編輯工具、或者畫板有時需要實現(xiàn)控件縮放功能，比如圖片或圖形可以拉伸放大或縮小，實現(xiàn)這種功能通常需要8個點，對應(yīng)4條邊和4個角，在wpf中通?？梢允褂醚b飾器實現(xiàn)。
一、功能說明
8個點方放置在控件的8個方位上，通過拖動這些點對控件進行拉伸或縮小，示意圖如下：
二、如何實現(xiàn)？
1.繼承Adorner
通過裝飾器的方式添加8個點在控件上，這樣既可以不影響控件布局，又可以自由擺放8點控件。通過重寫方法，給裝飾添加控件。必要的重寫的方法如下面示例所示：
public class CanvasAdorner : Adorner
{
//獲取裝飾器的元素個數(shù)
protected override Visual GetVisualChild(int index);
//指定裝飾器子元素個數(shù)
protected override int VisualChildrenCount{get;}
//布局，添加的子元素需要手動布局。
protected override Size ArrangeOverride(Size finalSize);
}
2.使用Thumb
因為Thumb實現(xiàn)拖動比較容易，有相關(guān)事件獲取拖動距離。在裝飾器中定義8個Thumb，對應(yīng)8個方位點。
示例代碼如下：
//4條邊 Thumb _leftThumb, _topThumb, _rightThumb, _bottomThumb; //4個角 Thumb _lefTopThumb, _rightTopThumb, _rightBottomThumb, _leftbottomThumb;
初始化
public CanvasAdorner(UIElement adornedElement) : base(adornedElement)
{
//初始化thumb
_leftThumb = new Thumb();
_leftThumb.HorizontalAlignment = HorizontalAlignment.Left;
_leftThumb.VerticalAlignment = VerticalAlignment.Center;
_leftThumb.Cursor = Cursors.SizeWE;
//其他略...
}
3.實現(xiàn)拖動邏輯
在Thumb的DragDelta事件可以獲取拖動距離，根據(jù)八個方位的不同計算并修改控件的大小。
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
//1.右側(cè)點HorizontalChange加寬
//2.左側(cè)點HorizontalChange減寬，加左移
//3.下側(cè)點VerticalChange加高
//4.上側(cè)點VerticalChange減高，加上移
}
三、完整代碼
代碼如下：
public class CanvasAdorner : Adorner
{
//4條邊
Thumb _leftThumb, _topThumb, _rightThumb, _bottomThumb;
//4個角
Thumb _lefTopThumb, _rightTopThumb, _rightBottomThumb, _leftbottomThumb;
//布局容器，如果不使用布局容器，則需要給上述8個控件布局，實現(xiàn)和Grid布局定位是一樣的，會比較繁瑣且意義不大。
Grid _grid;
UIElement _adornedElement;
public CanvasAdorner(UIElement adornedElement) : base(adornedElement)
{
_adornedElement = adornedElement;
//初始化thumb
_leftThumb = new Thumb();
_leftThumb.HorizontalAlignment = HorizontalAlignment.Left;
_leftThumb.VerticalAlignment = VerticalAlignment.Center;
_leftThumb.Cursor = Cursors.SizeWE;
_topThumb = new Thumb();
_topThumb.HorizontalAlignment = HorizontalAlignment.Center;
_topThumb.VerticalAlignment = VerticalAlignment.Top;
_topThumb.Cursor = Cursors.SizeNS;
_rightThumb = new Thumb();
_rightThumb.HorizontalAlignment = HorizontalAlignment.Right;
_rightThumb.VerticalAlignment = VerticalAlignment.Center;
_rightThumb.Cursor = Cursors.SizeWE;
_bottomThumb = new Thumb();
_bottomThumb.HorizontalAlignment = HorizontalAlignment.Center;
_bottomThumb.VerticalAlignment = VerticalAlignment.Bottom;
_bottomThumb.Cursor = Cursors.SizeNS;
_lefTopThumb = new Thumb();
_lefTopThumb.HorizontalAlignment = HorizontalAlignment.Left;
_lefTopThumb.VerticalAlignment = VerticalAlignment.Top;
_lefTopThumb.Cursor = Cursors.SizeNWSE;
_rightTopThumb = new Thumb();
_rightTopThumb.HorizontalAlignment = HorizontalAlignment.Right;
_rightTopThumb.VerticalAlignment = VerticalAlignment.Top;
_rightTopThumb.Cursor = Cursors.SizeNESW;
_rightBottomThumb = new Thumb();
_rightBottomThumb.HorizontalAlignment = HorizontalAlignment.Right;
_rightBottomThumb.VerticalAlignment = VerticalAlignment.Bottom;
_rightBottomThumb.Cursor = Cursors.SizeNWSE;
_leftbottomThumb = new Thumb();
_leftbottomThumb.HorizontalAlignment = HorizontalAlignment.Left;
_leftbottomThumb.VerticalAlignment = VerticalAlignment.Bottom;
_leftbottomThumb.Cursor = Cursors.SizeNESW;
_grid = new Grid();
_grid.Children.Add(_leftThumb);
_grid.Children.Add(_topThumb);
_grid.Children.Add(_rightThumb);
_grid.Children.Add(_bottomThumb);
_grid.Children.Add(_lefTopThumb);
_grid.Children.Add(_rightTopThumb);
_grid.Children.Add(_rightBottomThumb);
_grid.Children.Add(_leftbottomThumb);
AddVisualChild(_grid);
foreach (Thumb thumb in _grid.Children)
{
thumb.Width = 16;
thumb.Height = 16;
thumb.Background = Brushes.Green;
thumb.Template = new ControlTemplate(typeof(Thumb))
{
VisualTree = GetFactory(new SolidColorBrush(Colors.White))
};
thumb.DragDelta += Thumb_DragDelta;
}
}
protected override Visual GetVisualChild(int index)
{
return _grid;
}
protected override int VisualChildrenCount
{
get
{
return 1;
}
}
protected override Size ArrangeOverride(Size finalSize)
{
//直接給grid布局，grid內(nèi)部的thumb會自動布局。
_grid.Arrange(new Rect(new Point(-_leftThumb.Width / 2, -_leftThumb.Height / 2), new Size(finalSize.Width + _leftThumb.Width, finalSize.Height + _leftThumb.Height)));
return finalSize;
}
//拖動邏輯
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
var c = _adornedElement as FrameworkElement;
var thumb = sender as FrameworkElement;
double left, top, width, height;
if (thumb.HorizontalAlignment == HorizontalAlignment.Left)
{
left =double.IsNaN( Canvas.GetLeft(c))?0: Canvas.GetLeft(c) + e.HorizontalChange;
width = c.Width - e.HorizontalChange;
}
else
{
left = Canvas.GetLeft(c);
width = c.Width + e.HorizontalChange;
}
if (thumb.VerticalAlignment == VerticalAlignment.Top)
{
top = double.IsNaN(Canvas.GetTop(c)) ? 0 : Canvas.GetTop(c) + e.VerticalChange;
height = c.Height - e.VerticalChange;
}
else
{
top = Canvas.GetTop(c);
height = c.Height + e.VerticalChange;
}
if (thumb.HorizontalAlignment != HorizontalAlignment.Center)
{
if (width >= 0)
{
Canvas.SetLeft(c, left);
c.Width = width;
}
}
if (thumb.VerticalAlignment != VerticalAlignment.Center)
{
if (height >= 0)
{
Canvas.SetTop(c, top);
c.Height = height;
}
}
}
//thumb的樣式
FrameworkElementFactory GetFactory(Brush back)
{
var fef = new FrameworkElementFactory(typeof(Ellipse));
fef.SetValue(Ellipse.FillProperty, back);
fef.SetValue(Ellipse.StrokeProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")));
fef.SetValue(Ellipse.StrokeThicknessProperty, (double)2);
return fef;
}
}
四、使用示例
示例代碼如下：
xaml
<Canvas Margin="20">
<Border x:Name="border" Width="200" Height="200" Background="Gray" ></Border>
</Canvas>
在窗口或控件的Loaded事件中添加裝飾器：
cs
private void window_Loaded(object sender, RoutedEventArgs e)
{
var layer = AdornerLayer.GetAdornerLayer(border);
layer.Add(new CanvasAdorner(border));
}
效果預(yù)覽：
總結(jié)
以上就是今天要講的內(nèi)容，本文講述了控件縮放的方法與實現(xiàn)，都相對較簡單，尤其是實現(xiàn)也是特意精簡了代碼，比如布局直接使用Grid控件，拖動的邏輯也是較為簡化，最終呈現(xiàn)的效果還是比較不錯的。
到此這篇關(guān)于C# wpf Canvas中實現(xiàn)控件拖動調(diào)整大小的示例的文章就介紹到這了,更多相關(guān)C# wpf Canvas控件拖動調(diào)整大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了C#如何使用OpenCvSharp實現(xiàn)透視變換的功能,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,需要的小伙伴可以參考下2023-11-11
本篇文章為大家?guī)硪粋€橫版2D射擊小游戲，游戲制作超級簡單，玩法一學(xué)就會。文中的示例代碼講解詳細，快跟隨小編一起動手試一試2022-03-03
這篇文章主要介紹了c# 操作word寫入特殊字符的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
AOP面向切面編程(Aspect Oriented Programming)，是通過預(yù)編譯方式和運行期動態(tài)代理實現(xiàn)程序功能的統(tǒng)一維護的一種技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用C#實現(xiàn)AOP常見的幾種方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要為大家詳細介紹了C#抽象類與抽象方法的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
今天又遇到這個問題了，問了問同事，他說最近面試的時候，也問道他了，于是給我講了講，現(xiàn)在大概是記住了，分享一下。2013-04-04
桶排序是一種快速且高效的排序算法,通過將數(shù)據(jù)分配到有序桶中并分別排序,適合均勻分布數(shù)據(jù),它的時間復(fù)雜度為O(n),但不適合數(shù)據(jù)分布極不均勻或數(shù)據(jù)范圍很大的情況,桶排序算法簡單、易實現(xiàn),可調(diào)整桶的大小和數(shù)量以適應(yīng)不同數(shù)據(jù),感興趣的可以了解一下2024-10-10
這篇文章主要為大家詳細介紹了.NET6實現(xiàn)分布式定時任務(wù)的完整方案,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-04-04
這兩個方法很容易理解，只實現(xiàn)了最基本的功能，如果需要可以查看源代碼獲取更多信息。2009-07-07
本篇文章小編為大家介紹，關(guān)于c#二叉樹的實現(xiàn)。需要的朋友參考下2013-04-04