Mouse Move

マウスで図形(Border)を移動します。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Visual Studio を起動して[空白アプリ(ユニバーサル Windows)]を構築して下さい。
    デザイン画面でグレーの Border を貼り付けます。
    MainPage.xaml を直接書きかえた場合のソースコードです。Grid ~ /Grid の間に追加して下さい。
        <Grid>
            <Border x:Name="boder" Background="LightGray"
                Height="100" Width="100"  ManipulationMode="All"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Canvas.Left="11" Canvas.Top="11"/>
        </Grid>
    
  2. MainPage.xaml.cs の MainPage() 関数で PointerDevice のイベントを設定します。
    マウスでドラッグすると My_ManipulationDelta() 関数が呼び出されます。
    transforms, previousTransform, deltaTransform は移動を計算する領域です。
    InitManipulationTransforms() で領域を初期化します。
        public sealed partial class MainPage : Page
        {
            private TransformGroup transforms;
            private MatrixTransform previousTransform;
            private CompositeTransform deltaTransform;
    
            public MainPage()
            {
                this.InitializeComponent();
                boder.ManipulationDelta += new ManipulationDeltaEventHandler(My_ManipulationDelta);
                InitManipulationTransforms();
            }
    
  3. マウスの操作を検出して Border を移動します。
            void My_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
            {
                previousTransform.Matrix = transforms.Value;
                // Get center point for rotation
                Point center = previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y));
                deltaTransform.CenterX = center.X;
                deltaTransform.CenterY = center.Y;
    
                // Look at the Delta property of the ManipulationDeltaRoutedEventArgs to retrieve
                // the rotation, scale, X, and Y changes
                deltaTransform.Rotation = e.Delta.Rotation;
                deltaTransform.TranslateX = e.Delta.Translation.X;
                deltaTransform.TranslateY = e.Delta.Translation.Y;
            }
    
  4. transforms を初期化します。
            private void InitManipulationTransforms()
            {
                transforms = new TransformGroup();
                previousTransform = new MatrixTransform() { Matrix = Matrix.Identity };
                deltaTransform = new CompositeTransform();
    
                transforms.Children.Add(previousTransform);
                transforms.Children.Add(deltaTransform);
    
                // Set the render transform on the rect
                boder.RenderTransform = transforms;
            }
    
  5. Border を Ellipse(円)に変えてみましょう。(円に変えても名前は "boder" のままです)
    マウスを操作すると赤い円がついてきます。
        <Grid>
            <Ellipse x:Name="boder" Fill="#FFEB0A0A"
            Height="100" Width="100" ManipulationMode="All"
            HorizontalAlignment="Left" VerticalAlignment="Top"
            Canvas.Left="11" Canvas.Top="11"/>
        </Grid>
    

超初心者のプログラム入門(C# Frame Work)