WPF 在image控件用鼠标拖拽出矩形

今天有小伙伴问我一个问题，在image控件用鼠标拖拽出矩形，本文告诉大家如何使用鼠标画出矩形

做出来的效果先请大家看一下

最简单的方法是在 Down 的时候记录按下的点，在移动的时候重新计算所在的宽度

先在界面使用一个图片和一个矩形

    <Grid x:Name="Grid"><Image Source="TIM截图20180811150831.png"></Image><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">欢迎访问我博客 http://lindexi.oschina.io </TextBlock><Rectangle x:Name="Rectangle" StrokeThickness="2" Stroke="Black" HorizontalAlignment="Left" VerticalAlignment="Top"></Rectangle></Grid>

需要注意，图片的位置需要修改为自己需要的图片

这里的 Rectangle 需要做一些设置，主要 HorizontalAlignment 和 VerticalAlignment 必须设置为左上角

现在打开 cs 代码，在按下和移动修改矩形

MouseDown += MainWindow_MouseDown;MouseMove += MainWindow_MouseMove;MouseUp += MainWindow_MouseUp;

需要两个字段来记录当前是否按下和第一次按下所在的坐标

刚才给 Grid 的命名就是为了拿到相对 Grid 的坐标

        private void MainWindow_MouseDown(object sender, MouseButtonEventArgs e){_started = true;_downPoint = e.GetPosition(Grid);}private bool _started;private Point _downPoint;

在鼠标按下时拿到按下的坐标，通过这个坐标就可以计算出矩形所在的位置

        private void MainWindow_MouseUp(object sender, MouseButtonEventArgs e){_started = false;}private void MainWindow_MouseMove(object sender, MouseEventArgs e){if (_started){var point = e.GetPosition(Grid);var rect = new Rect(_downPoint, point);Rectangle.Margin = new Thickness(rect.Left, rect.Top, 0, 0);Rectangle.Width = rect.Width;Rectangle.Height = rect.Height;}}

代码就是这么简单，通过修改 Margin 的方法修改矩形

如果对于高手，我建议使用 RenderTransform 的方式而不是使用 Margin 这里使用这个方法只是看起来简单

因为性能最差 Canvas.SetLeft Canvas.SetTop，性能中等 Margin，性能最好 RenderTransform 当然使用 RenderTransform 的方法没有使用 Margin 那样容易了解

我搭建了自己的博客 https://lindexi.gitee.io/ 欢迎大家访问，里面有很多新的博客。只有在我看到博客写成熟之后才会放在csdn或博客园，但是一旦发布了就不再更新

如果在博客看到有任何不懂的，欢迎交流，我搭建了 dotnet 职业技术学院欢迎大家加入

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。

WPF 在image控件用鼠标拖拽出矩形相关推荐

TreeView控件中实现拖拽的功能
#region 节点拖拽事件 //当用户开始拖动节点时 private void tvModel_ItemDrag(object sender, ItemDragEve ...
WPF中通过控件Margin属性设置控件位置
WPF中通过控件Margin属性设置控件位置一.Margin属性简介二.Margin在cs文件中定义三.Margin设置控件位置四.参考文档一.Margin属性简介在使用WPF进行页面设计 ...
WPF 4 日历控件（Calendar）
WPF 4 日历控件(Calendar) 原文:WPF 4 日历控件(Calendar) 在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性.相信自从VS2010 Beta 版放出 ...
WPF Thumb、控件、窗体、内容、Shape拖动
实例地址:WPFThumb.控件.窗体.内容拖动实例-C#文档类资源-CSDN下载 WPF常见拖动方式: 1.窗体拖动:使用窗体自带拖动方法,DragMove(). 2.Thumb控件拖动:WPF拖动 ...
有关WPF中DataGrid控件的基础应用总结
基础说明 DataGrid是WPF提供的基础控件,它可以非常轻松的呈现出一张表格,本文章会按照从易到难的顺序依次将DataGrid的使用方法进行解说,除了MSDN上给出的最基本的例子之外,给出了三个比 ...
WPF Calendar 日历控件样式自定义
原文:WPF Calendar 日历控件样式自定义粗略的在代码上做了些注释 blend 生成出来的模版有的时候会生成跟 vs ui界面不兼容的代码会导致可视化设计界面报错崩溃掉但是确不 ...
WPF 曲线图表控件（自制）（二）
原文:WPF 曲线图表控件(自制)(二) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/775218 ...
WPF编程--地图控件GMap使用
目录编辑 1.环境 2. NuGet导入依赖 3. 添加MapControl类 4. 编辑MainView.xaml.cs 5. 编辑MainView.xaml 6. 启动验证源码: http ...
WPF源码控件库《Newbeecoder.UI》轮播
轮播控件是一种强大且视觉上吸引人的方式来呈现多个数据项,本文讨论Newbeecoder.UI轮播控件的原理和一个简单的演示应用程序. 轮播控件是包含Canvas控件的 WPF 用户控件,项目控件是的子 ...

WPF 在image控件用鼠标拖拽出矩形

WPF 在image控件用鼠标拖拽出矩形相关推荐

最新文章

热门文章