WPF: 旋转Thumb后,DragDelta移动距离出错的解决

当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉。

<Grid x:Name="gridMain" Width="100" Height="50" Background="Green" RenderTransformOrigin="0.5,0.5" Canvas.Left="100" Canvas.Top="100"> 
                <Grid.RenderTransform>
                    <RotateTransform x:Name="rotate" Angle="90"></RotateTransform>
                </Grid.RenderTransform>
                <Thumb x:Name="thumbMain" Opacity="0.8" DragDelta="Thumb_DragDelta"></Thumb>
            </Grid>
private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Canvas.SetLeft(gridMain, Canvas.GetLeft(gridMain) + e.HorizontalChange);
            Canvas.SetTop(gridMain, Canvas.GetTop(gridMain) + e.VerticalChange);
        }

 

 

这是由于坐标系不统一造成的。Canvas.SeltLeft 和 Canvas.SetTop是用的Canvas坐标系。而Thumb的e.HorizontalChange 和 e.VerticalChange 是根据鼠标相对于Thumb自身坐标系计算出来的, 两个坐标系有个90度的角度差。将e.HorizontalChange 和 e.VerticalChange转换到Canvas的坐标系下,拖拽就没问题了。如下:

private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Point ptChange = rotate.Transform(new Point(e.HorizontalChange, e.VerticalChange));
            Canvas.SetLeft(gridMain, Canvas.GetLeft(gridMain) + ptChange.X);
            Canvas.SetTop(gridMain, Canvas.GetTop(gridMain) + ptChange.Y);
        }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现WPF Thumb mvvmlight 实现rectangle 移动旋转: 1. 创建一个名为“Thumb”的控件,用于在Rectangle上实现拖动和旋转。 2. 使用MVVMLight框架创建一个ViewModel来处理Thumb的拖动和旋转的逻辑。 3. 在ViewModel中实现以下功能: - 实现拖动Thumb时Rectangle的移动逻辑。 - 实现旋转Rectangle的逻辑。 4. 在XAML中使用Thumb控件和ViewModel来实现Rectangle的拖动和旋转。 下面是一个实现移动Rectangle和旋转Rectangle的示例代码(基于MVVMLight框架): 1. 创建Thumb控件 ```xml <Thumb x:Name="ThumbControl" Width="10" Height="10" DragDelta="ThumbControl_DragDelta" DragStarted="ThumbControl_DragStarted" DragCompleted="ThumbControl_DragCompleted"/> ``` 2. 创建ViewModel ```csharp public class RectangleViewModel : ViewModelBase { private double _left; private double _top; private double _angle; public double Left { get { return _left; } set { Set(ref _left, value); } } public double Top { get { return _top; } set { Set(ref _top, value); } } public double Angle { get { return _angle; } set { Set(ref _angle, value); } } public void Move(double deltaX, double deltaY) { Left += deltaX; Top += deltaY; } public void Rotate(double deltaAngle) { Angle += deltaAngle; } } ``` 3. 实现ViewModel中的逻辑 ```csharp private void ThumbControl_DragDelta(object sender, DragDeltaEventArgs e) { ViewModel.Move(e.HorizontalChange, e.VerticalChange); } private void ThumbControl_DragStarted(object sender, DragStartedEventArgs e) { // Do something } private void ThumbControl_DragCompleted(object sender, DragCompletedEventArgs e) { // Do something } private void ThumbControl_MouseWheel(object sender, MouseWheelEventArgs e) { ViewModel.Rotate(e.Delta); } ``` 4. 在XAML中使用Thumb控件和ViewModel ```xml <Grid> <Rectangle x:Name="MyRectangle" Width="100" Height="100" Margin="{Binding Top, Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter=0, Mode=OneWay},{Binding Left, Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter=0, Mode=OneWay},0,0"> <Rectangle.RenderTransform> <RotateTransform Angle="{Binding Angle}"/> </Rectangle.RenderTransform> </Rectangle> <Thumb x:Name="ThumbControl" Width="10" Height="10" DragDelta="ThumbControl_DragDelta" DragStarted="ThumbControl_DragStarted" DragCompleted="ThumbControl_DragCompleted" MouseWheel="ThumbControl_MouseWheel" Margin="{Binding Top, Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter=-5, Mode=OneWay},{Binding Left, Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter=-5, Mode=OneWay},0,0"/> </Grid> ``` 需要注意的是,在XAML中需要使用Binding来绑定ViewModel中的属性,并使用转换器将double值转换成Thickness值。同时,需要使用RotateTransform来实现旋转效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值