0

http://d.hatena.ne.jp/CoMo/20110316/
http://zawapro.com/?p=988

上記を参考に以下のようにしました。

グリッド模様は表示されるのですが、「ドラッグ対象のオブジェクト」が表示されません。

グリッド模様を構築処理によって「ドラッグ対象のオブジェクト」が上書きされているのだと思うのですが、
ドラッグ対象のオブジェクトを再度描画させるにはどのようにすべきなのでしょうか?

MainWindow.xamlファイル

  <Canvas Grid.Row="2" Name="canvas" SnapsToDevicePixels="True" Loaded="canvas_Loaded" SizeChanged="canvas_SizeChanged">
        <Thumb DragDelta="Thumb_DragDelta" Canvas.Left="0" Canvas.Top="0">
            <Thumb.Template>
                <ControlTemplate>
                    <!--ドラッグ対象のオブジェクトを定義する-->
                    <Grid Width="100" Height="30">
                        <Ellipse Fill="LightBlue" Stroke="Blue" />
                        <TextBlock Text="動く物体" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>

MainWindow.xaml.csファイル

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

        //Thumbコントロールのドラッグイベント処理
        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {

            var thumb = sender as Thumb;
            if (thumb == null) return;

            //ドラッグ量に応じてThumbコントロールを移動する
            Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
            Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
        }

        private const int GRID_SIZE = 50;
        private ScaleTransform scaleTransform = new ScaleTransform();

        private void canvas_Loaded(object sender, RoutedEventArgs e)
        {
            BuildView();
        }

        private void canvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            BuildView();
        }

        // グリッド模様の構築
        private void BuildView()
        {
            canvas.Children.Clear();

            // 縦線
            for (int i = 0; i < canvas.ActualWidth; i += GRID_SIZE)
            {
                Path path = new Path()
                {
                    Data = new LineGeometry(new Point(i, 0), new Point(i, canvas.ActualHeight)),
                    Stroke = Brushes.Aqua,
                    StrokeThickness = 1
                };

                path.Data.Transform = scaleTransform;

                canvas.Children.Add(path);
            }

            // 横線
            for (int i = 0; i < canvas.ActualHeight; i += GRID_SIZE)
            {
                Path path = new Path()
                {
                    Data = new LineGeometry(new Point(0, i), new Point(canvas.ActualWidth, i)),
                    Stroke = Brushes.Aqua,
                    StrokeThickness = 1
                };

                path.Data.Transform = scaleTransform;

                canvas.Children.Add(path);
            }
        }
    }

1 件の回答 1

0

BuildView()canvas.Children.Clear()が原因です。Thumbのみを残すように

canvas.Children.RemoveRange(1, canvas.Children.Count - 1);

と変えてみてください。

なおグリッド模様程度であればcanvas.Childrenを弄らなくてもDrawingBrushで十分対応できます。

<Canvas>
    <Canvas.Background>
        <DrawingBrush
            ViewportUnits="Absolute"
            Viewport="0,0,50,50"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Pen>
                        <Pen
                            Brush="Aqua" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry
                            Rect="0,0,50,50" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Canvas.Background>
</Canvas>
1
  • Children.RemoveRangeで範囲が選択できるのですね。勉強になります。試してみて、期待通りになりました!
    – kanko
    Commented 2018年2月1日 2:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。