wpf 利用Thumb 实现控件拖动

功能:实现控件的拖动(以Textblock举例)

核心 就是利用Canvas.SetLeft 来控制Textblock的位置。

首先,先看页面布局

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ThumbStyle1" TargetType="{x:Type Thumb}">
            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent">
                            <Grid>
                                <Border BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" BorderThickness="0,0,1,1" Background="Transparent"/>
                                <Border BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" BorderThickness="0,0,1,1" Background="Transparent" Margin="1"/>
                                <Border Background="Transparent" Margin="2"/>
                            </Grid>
                        </Border>
                    </ControlTemplate> 
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Canvas  >
            <Grid x:Name="grid" Width="100" Canvas.Left="20" Canvas.Top="20" Height="20" Background="LightBlue" >
                <Grid.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Grid.RenderTransform>
                <TextBlock   >here</TextBlock>
                <Thumb DragDelta="Thumb_DragDelta" Style="{StaticResource ThumbStyle1}"/> 
            </Grid>
        </Canvas>
    </Grid>
</Window>

这里需要注意的点有,一个是需要把要移动的控件 与thumb 放在一个容器里面,移动控件,实际上移动的是Grid 这个整体,第二thumb 要设置Background为transparent,否则Textblock会被thumb 覆盖,三 鼠标点击等操作需要相应修改,改到Grid这层上去,四是要设置grid的canvas.left和canvas.top的初始值

然后后台的Thumb_DragDelta 方法为

  private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Point ptChange = grid.RenderTransform.Transform(new Point(e.HorizontalChange, e.VerticalChange));
            double left = Canvas.GetLeft(grid);
            double top = Canvas.GetTop(grid);
            Console.WriteLine(left+","+top+","+  e.HorizontalChange+","+ e.VerticalChange);
            Canvas.SetLeft(grid, left + ptChange.X);
            Canvas.SetTop(grid, top + ptChange.Y);
           
        }

这里面在拿 旧的left和top值的时候,需要注意旋转问题,应该获取旋转之后的偏移量。(坐标系不统一导致的 http://www.mamicode.com/info-detail-47132.html

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值