[C#] WPFのThumbコントロールを使ってドラッグを実装する

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(&quot;x:{0} y:{1}&quot;, 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);
	}
}

 

カテゴリー: C#, XAML パーマリンク