wpf 利用Thumb 实现控件拖动

楚墨一
2023-12-01

功能:实现控件的拖动(以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

 

 类似资料: