MouseDragElementBehavior でドラッグ移動

MouseDragElementBehavior を使うと簡単に実装する事ができます。

MouseDragElementBehavior が無い
MainWindow
1. MainWindow.xaml
2. MainWindow.xaml.cs
ShapeObject ユーザーコントロール

MouseDragElementBehavior が無い

Visual Studio 2019 から Behavior が標準搭載されなくなりました。

なので、NuGet パッケージから入れる必要があります。

プロジェクトに「Microsoft.Xaml.Behaviors.Wpf」パッケージを入れます。

MainWindow

MainWindow.xaml

<Window
  <!-- 省略 -->
  >
  <Grid x:Name="LayoutRoot">
    <Button Content="図形追加" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Width="120"
            Style="{StaticResource MaterialDesignRaisedButton}" 
            Margin="10,80,0,0"
            Click="AddShape_Click"/>
  </Grid>
</Window>

Grid コントロールにユーザーコントロールを追加するため、LayoutRoot という名前をつけました。こうする事でコードビハインドから参照することが出来ます。

MainWindow.xaml.cs

private void AddShape_Click(object sender, RoutedEventArgs e)
{
  LayoutRoot.Children.Add(new ShapeObject(100, 150));
}

図形追加ボタンを押したら、Grid コントロール ShapeObject ユーザーコントロールを追加しています。引数で追加位置を指定できるようにしています。

ShapeObject ユーザーコントロール

ShapeObject ユーザーコントロールを作っていきます。

ShapeObject.xaml

<UserControl
  <!-- 省略 -->
  >
    <b:Interaction.Behaviors>
        <b:MouseDragElementBehavior 
            ConstrainToParentBounds="True"
            X="{Binding XPosition, Mode=TwoWay}" 
            Y="{Binding YPosition, Mode=TwoWay}"/>
    </b:Interaction.Behaviors>
    <Grid>
        <StackPanel>
            <TextBlock TextWrapping="Wrap" Text="{Binding XPosition, StringFormat=X:{0}}"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding YPosition, StringFormat=Y:{0}}"/>
        </StackPanel>
    </Grid>
</UserControl>

UserControl に MouseDragElementBehavior を付けています。これだけで、ドラッグ移動させることが出来ます。

ConstrainToParentBounds を True にする事で、外に出なくなります。

表示位置を表示するために、ViewModel とバインドして TextBlock で表示しています。

ShapeObject.xaml.cs

using System.Windows;
using System.Windows.Controls;
namespace WpfApp1
{
  public partial class ShapeObject : UserControl
  {
    public ShapeObject(double _XPosition, double _YPosition)
    {
      InitializeComponent();
      DataContext = new ShapeObjectViewModel()
      {
        XPosition = _XPosition,
        YPosition = _YPosition
      };
      HorizontalAlignment = HorizontalAlignment.Left;
      VerticalAlignment = VerticalAlignment.Top;
      Width = 100;
      Height = 100;
    }
  }
}

初期化してます。

ShapeObjectViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace WpfApp1 {
  public class ShapeObjectViewModel : INotifyPropertyChanged {
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public double XPosition {
      get { return _XPosition; }
      set {
        if (value != _XPosition) {
          _XPosition = value;
          NotifyPropertyChanged("XPosition");
        }
      }
    }
    private double _XPosition;
    public double YPosition {
      get { return _YPosition; }
      set {
        if (value != _YPosition) {
          _YPosition = value;
          NotifyPropertyChanged("YPosition");
        }
      }
    }
    private double _YPosition;
  }
}

ドラッグ移動で表示位置が変わったら通知されるようにしています。

手順が面倒くさいです。