Moonmile Solutions Blog

[C#] WPFのThumbコントロールを使ってドラッグを実装する | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/3701

どうせなので続きをちょっと書いておきます。

Thumb コントロールを使うと、コントロールのドラッグが簡単にできるようになったのですが、汎用的に使うにしては色々な処理をいれないと駄目なのが難点です。特にドラッグに必要な、

• DragStarted
• DragCompleted
• DragDelta

の３つを実装する必要があるのです。なので、これをユーザーコントロールでくるんでしまいます。ユーザコントロールは UserControl を継承していますが、直接 Thumb コントロールを継承するように変更します。

<Thumb x:Class=&quot;SampleWpfDragBitmap.ThumbDrag&quot;
             xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
             xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
             xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; 
             xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; 
             mc:Ignorable=&quot;d&quot; 
             d:DesignHeight=&quot;50&quot; d:DesignWidth=&quot;50&quot;
            DragCompleted=&quot;mark_DragCompleted&quot;
            DragStarted=&quot;mark_DragStarted&quot;
            DragDelta=&quot;mark_DragDelta&quot; 
       >
    <Thumb.Template>
        <ControlTemplate TargetType=&quot;Thumb&quot;>
            <Ellipse Fill=&quot;{TemplateBinding Background}&quot; Width=&quot;50&quot; Height=&quot;50&quot;/>
        </ControlTemplate>
    </Thumb.Template>
</Thumb>

内部のテンプレート記述はそのままです。ルートとなるタグが「Thumb」に変えるのがミソですね。
あと、このコントロールを使う方から背景画像（Background）を指定できるように、TemplateBinding を指定しておきます。これで Thumb コントロールには Background プロパティがないのですが、この ThumbDrag コントロールでは背景を指定できるようになります。

/// <summary>
/// ThumbDrag.xaml の相互作用ロジック
/// </summary>
public partial class ThumbDrag : System.Windows.Controls.Primitives.Thumb
{
	public ThumbDrag()
	{
		InitializeComponent();
	}

	private void mark_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
	{
	}
	private void mark_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)
	{
	}
	private void mark_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
	{
		Canvas.SetLeft(this, Canvas.GetLeft(this) + e.HorizontalChange);
		Canvas.SetTop(this, Canvas.GetTop(this) + e.VerticalChange);
	}
}

ユーザーコントロールのほうで実装するのは、DragDelta イベントだけです。

<Window x:Class=&quot;SampleWpfDragBitmap.MainWindow&quot;
        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot; xmlns:my=&quot;clr-namespace:SampleWpfDragBitmap&quot;>
    <Canvas >
        <my:ThumbDrag  Canvas.Left=&quot;32&quot; Canvas.Top=&quot;36&quot; Height=&quot;58&quot; x:Name=&quot;thumbDrag1&quot; Width=&quot;56&quot; BorderThickness=&quot;2&quot; BorderBrush=&quot;green&quot; Background=&quot;#FFB72323&quot; />
        <Button Canvas.Left=&quot;428&quot; Canvas.Top=&quot;0&quot; Content=&quot;Color&quot; Height=&quot;23&quot; Name=&quot;button1&quot; Width=&quot;75&quot; Click=&quot;button1_Click&quot; />
        <Button Canvas.Left=&quot;428&quot; Canvas.Top=&quot;40&quot; Content=&quot;Bitmap&quot; Height=&quot;23&quot; Name=&quot;button2&quot; Width=&quot;75&quot; Click=&quot;button2_Click&quot; />
    </Canvas>
</Window>

この ThumbDrag コントロールを使う場合は、上記のように my:ThumbDrag とします。一度コンパイルして、ツールバーからドロップすれば自動で作られます。

ボタンを2つ付けておいて、背景の色を変えるテストと、背景にビットマップを貼りつけるテストをいれています。

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

	private void button1_Click(object sender, RoutedEventArgs e)
	{
		this.thumbDrag1.Background = Brushes.Green;
	}

	private void button2_Click(object sender, RoutedEventArgs e)
	{
		var bmp = new BitmapImage(new Uri("images/snap.png",UriKind.Relative));
		var br = new ImageBrush(bmp);
		this.thumbDrag1.Background = br;
	}
}

こんな風に、Background プロパティに Brush を指定すれば良いのです。背景画像の場合には、ImageBrush を作成して設定します。

こうやって、コントロールにしておくと複数コピーするのが簡単なんですよね。これは、XAML のコードを3つコピーしたものです。

さて、これを動的に増やしたり減らしたりする場合はどうするかというと…まじめに VisualTreeHelper を使ってもよいのですが、数がさほど多くないのであれば、あらかじめ XAML 上で固定で追加しおいて見えないようにしておく、というのがコード的に楽ですね。「最大値」は決まってしまいますが、業務アプリの場合はこれで十分かと。

WPFでコントロールをドラッグ(1) | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/709
Thumbコントロールでドラッグ | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/698

なところで、WPF のドラッグコントロールを探していたのですが、どうやら Thumb コントロールを使って template で形状を変えるのがよさそうです。ここでは、Thumb.Template を使って形状を変えていますが、まぁ、これを static resource に書いても良いし、それは色々ってところでしょう。

<Window x:Class=&quot;SampleWpfDrag.MainWindow&quot;
        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;>
    <Canvas>
        <TextBlock Canvas.Left=&quot;0&quot; Canvas.Top=&quot;0&quot; Height=&quot;22&quot; Name=&quot;textPos&quot; Width=&quot;75&quot; Text=&quot;x:0 y:0&quot; />
        <Thumb Canvas.Left=&quot;37&quot; Canvas.Top=&quot;30&quot; Height=&quot;30&quot; Name=&quot;mark&quot;  Width=&quot;30&quot; Background=&quot;LightBlue&quot;
               DragCompleted=&quot;mark_DragCompleted&quot;
               DragStarted=&quot;mark_DragStarted&quot;
               DragDelta=&quot;mark_DragDelta&quot;
               >
            <Thumb.Template>
                <ControlTemplate TargetType=&quot;Thumb&quot;>
                    <Ellipse Fill=&quot;LightBlue&quot; Width=&quot;30&quot; Height=&quot;30&quot; />
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>
</Window>

ドラッグイベント自体は、前の記事に書いた通りで、複数のコントロールを利用する場合には、別途イベントの追加の仕方を考えたほうがよいかなと。ただし、ドラッグイベント自体は基本的に変わらないので、なんらかの形で Thumb コントロールを包んでやるほうが実装的には良い気がします。画面上からはみだすとか、そんな感じの動きとか。

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

	private void printPos(UIElement el)
	{
		int x = (int)Canvas.GetLeft(el);
		int y = (int)Canvas.GetTop(el);
		textPos.Text = string.Format("x:{0} y:{1}", x, y);
	}

	/// <summary>
	/// ドラッグ開始
	/// </summary>
	/// <param name=&quot;sender&quot;></param>
	/// <param name=&quot;e&quot;></param>
	private void mark_DragStarted(object sender,
		System.Windows.Controls.Primitives.DragStartedEventArgs e)
	{
		mark.Background = new SolidColorBrush(Colors.Orange);
	}
	/// <summary>
	/// ドラッグ終了
	/// </summary>
	/// <param name=&quot;sender&quot;></param>
	/// <param name=&quot;e&quot;></param>
	private void mark_DragCompleted(object sender,
		System.Windows.Controls.Primitives.DragCompletedEventArgs e)
	{
		mark.Background = new SolidColorBrush(Colors.Purple);
	}

	/// <summary>
	/// ドラッグ中
	/// </summary>
	/// <param name=&quot;sender&quot;></param>
	/// <param name=&quot;e&quot;></param>
	private void mark_DragDelta(object sender,
		System.Windows.Controls.Primitives.DragDeltaEventArgs e)
	{
		printPos(mark);
		Canvas.SetLeft(mark, Canvas.GetLeft(mark) + e.HorizontalChange);
		Canvas.SetTop(mark, Canvas.GetTop(mark) + e.VerticalChange);
	}
}