2013年07月04日

WPFサンプル:Thumbコントロールのドラッグ操作

   このエントリーをはてなブックマークに追加 Clip to Evernote
MSDNの説明によれば、「Thumb コントロールは、コントロールのサイズを変更するインフラストラクチャを提供します。」とのことなので、Thumbコントロールを使い、Canvasのサイズを変更するサンプルを書いてみました。
Thumb には、DragStarted、DragCompleted、および DragDelta イベントがあり、これでマウスのドラッグ操作を管理することができます。
まずは、XAMLです。

<Window x:Class="ThumbDargSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas Name="myCanvas" Width="170" Height="170"
                Background="RoyalBlue">
            <Thumb Name="myThumb" Canvas.Bottom="0" Canvas.Right="0"
                   Background="PaleGoldenrod" Width="14" Height="14"
                   DragStarted="onDragStarted"
                   DragDelta="onDragDelta" DragCompleted="onDragCompleted" />
        </Canvas>
    </Grid>
</Window>

Canvasの右下にThumbを配置しています。
先ほど説明したように、 DragStarted、DragCompleted、および DragDelta イベントにイベントハンドラを登録しています。
C#側では、onDragStartedで、マウスカーソルの形状とThumbの色を変えて、Dragが開始したことを 視覚的にわかるようにしています。

onDragDeltaは、マウスがDragされ位置が変わるたびに呼び出されます。
DragDeltaEventArgs の、VerticalChange、HorizontalChange でマウスの移動量がわかりますので、 この移動量にあわせて、CanvasのHeightとWidthを変更しています。

onDragCompletedは、マウスのボタンが離されたときに呼び出されます。マウスカーソルの形状とThumbの色を元に戻しています。

Thumb1
Thumb2
Thumb3

以下、C#のコードです。

using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
namespace ThumbDargSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        void onDragStarted(object sender, DragStartedEventArgs e) {
            myThumb.Background = Brushes.Orange;
            Cursor = Cursors.Hand;
        }
        void onDragDelta(object sender, DragDeltaEventArgs e) {
            double yAdjust = myCanvas.Height + e.VerticalChange;
            double xAdjust = myCanvas.Width + e.HorizontalChange;
            if ((xAdjust >= 0) && (yAdjust >= 0)) {
                myCanvas.Width = xAdjust;
                myCanvas.Height = yAdjust;
            }
        }
        void onDragCompleted(object sender, DragCompletedEventArgs e) {
            myThumb.Background = Brushes.CadetBlue;
            Cursor = Cursors.Arrow;
        }
    }
}


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52326684