WPF网格拖动自动布局效果

WPF网格拖动自动布局效果

使用Canvas和鼠标相关事件实现如下的效果：

XAML代码：

<Window x:Class="CanvasTest.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:CanvasTest"
        mc:Ignorable="d"
        Name="root"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="#0785D4"/>
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="Width" Value="45"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="RadiusX" Value="4"/>
            <Setter Property="RadiusY" Value="4"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <ScaleTransform/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Opacity="0.8" BlurRadius="4" Color="#8A8A8A" ShadowDepth="0"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=root,Path=IsDraging}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0.9" Duration="0:0:0.15"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0.9" Duration="0:0:0.15"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>

                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="1" Duration="0:0:0.25"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="1" Duration="0:0:0.25"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.Background>
            <VisualBrush Viewport="0,0,50,50" Stretch="None" ViewportUnits="Absolute" TileMode="Tile">
                <VisualBrush.Visual>
                    <Rectangle Stroke="#C6C6C6" RadiusX="0" RadiusY="0" StrokeDashArray="4,2" Width="50" Height="50" Fill="Transparent" StrokeThickness="0.5"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>
        <Canvas Name="canvas" Margin="2.5">
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="0" Canvas.Top="0"/>
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="50" Canvas.Top="0"/>
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="100" Canvas.Top="0"/>

            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="0" Canvas.Top="50" />
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="50" Canvas.Top="50"/>
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="100" Canvas.Top="50"/>

            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="0" Canvas.Top="100" />
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="50" Canvas.Top="100"/>
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="100" Canvas.Top="100"/>

            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="95" Height="95" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="200" Canvas.Top="150">
                <Rectangle.Fill>
                    <ImageBrush ImageSource=".\Koala.jpg" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="Fant">
                    </ImageBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="95" Height="45" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Canvas.Left="350" Canvas.Top="150"/>

        </Canvas>
    </Grid>
</Window>

C#代码

 public partial class MainWindow : Window
 {
     public MainWindow()
     {
         InitializeComponent();
     }

     public bool IsDraging
     {
         get { return (bool)GetValue(IsDragingProperty); }
         set { SetValue(IsDragingProperty, value); }
     }
     public static readonly DependencyProperty IsDragingProperty =
         DependencyProperty.Register("IsDraging", typeof(bool), typeof(MainWindow), new PropertyMetadata(false));

     Point lastPoint = default;
     private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
     {
         IsDraging = true;
         (sender as Rectangle)?.CaptureMouse();
         lastPoint = e.GetPosition(canvas);
     }

     private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
     {
         IsDraging = false;
         (sender as Rectangle)?.ReleaseMouseCapture();
         Point nowPoint = e.GetPosition(canvas);
         int index_X = (int)nowPoint.X / 50;
         int index_Y = (int)nowPoint.Y / 50;

         Point target = new Point(index_X * 50, index_Y * 50);

         Canvas.SetLeft(sender as Rectangle, target.X);
         Canvas.SetTop(sender as Rectangle, target.Y);
         for (int i = 0; i < canvas.Children.Count; i++)
         {
             Panel.SetZIndex(canvas.Children[i], i);
         }

         Panel.SetZIndex(sender as Rectangle, canvas.Children.Count);
     }

     private void Rectangle_MouseMove(object sender, MouseEventArgs e)
     {
         if (e.LeftButton == MouseButtonState.Released || !IsDraging)
         {
             return;
         }

         var nowPoint = e.GetPosition(canvas);
         var rect = (sender as Rectangle);
         Panel.SetZIndex(rect, 999);
         Point offset = new Point(nowPoint.X - lastPoint.X, nowPoint.Y - lastPoint.Y);

         Canvas.SetLeft(rect, Canvas.GetLeft(rect) + offset.X);
         Canvas.SetTop(rect, Canvas.GetTop(rect) + offset.Y);
         lastPoint = nowPoint;
     }
 }

项目地址github