如何改变WPF中画布的位置？

Question

如何更改画布的运行时位置，在其中动态添加控件（例如标签、线条）？

我可以使用所有控件缩放画布，但无法使用 MouseMove、MouseUp、MouseDown 移动到另一个位置。

<Canvas Name="canvas" Width="1000" Height="400"
            Margin="100 0 0 50"
            Background="White"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Center"
            MouseWheel="Canvas_MouseWheel"
            MouseMove="Canvas_MouseMove"
            MouseUp="Canvas_MouseUp"
            MouseDown="Canvas_MouseDown">
        <Canvas.RenderTransform>
            <ScaleTransform x:Name="st" />
        </Canvas.RenderTransform>
    </Canvas>

我在互联网上找到了这段代码，但对于我的情况不起作用

bool activated;
    Point point;

    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        activated = true;
        point = Mouse.GetPosition(canvas);
        Mouse.Capture(canvas);
    }

    private void Canvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (activated)
        {
            double top = Canvas.GetTop(canGraph) + Mouse.GetPosition(canvas).Y - point.Y;
            Canvas.SetTop(canvas, top);
            double left = Canvas.GetLeft(canvas) + Mouse.GetPosition(canvas).X - point.X;
            Canvas.SetLeft(canvas, left);
            point = Mouse.GetPosition(canvas);
        }
    }

    private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
    {
        activated = false;
        Mouse.Capture(null);
    }

Answer 1

编辑 - 我提供的之前的解决方案在第一次移动元素后如果没有更多代码就无法工作，所以这里有一个更好的解决方案

为了正常工作，画布元素必须与其父元素的坐标系对齐，这是我们通过将画布放在左上角来实现的，如果你不把它放在那里，你必须自己计算差异。

代码隐藏

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        canvas.CaptureMouse();
    }

    Stopwatch sw = new Stopwatch();
    private void Canvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (canvas.IsMouseCaptured)
        {
            translate.X = e.GetPosition(container).X;
            translate.Y = e.GetPosition(container).Y;
        }
    }

    private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
    {
        canvas.ReleaseMouseCapture();
    }

XAML

<Grid Background="Green" x:Name="container">
    <Canvas Name="canvas" Width="100" Height="100"
        Margin="0 0 0 0"
        Background="Purple"
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        MouseMove="Canvas_MouseMove"

        MouseDown="Canvas_MouseDown">
        <StackPanel Background="White">

        <TextBlock >asdasda</TextBlock>
        <TextBlock >cccc</TextBlock>
        <TextBlock >aaaaa</TextBlock>
        <TextBlock >bbbb</TextBlock>
        </StackPanel>
    <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="st" />
                <TranslateTransform x:Name="translate" />
            </TransformGroup>
        </Canvas.RenderTransform>
</Canvas>
</Grid>

原答案

XAML

我会做这样的事情：

• 添加平移变换并保留之前的变换，将其放入组中

• 使用平移变换以便根据鼠标事件的位置移动画布

• 对于翻译的起点，您可以使用容器中的坐标

背后代码：

bool activated;
    Point point;

    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        activated = true;
        point = e.GetPosition(container);
    }

    private void Canvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (activated)
        {
            translate.X = e.GetPosition(container).X - point.X;
            translate.Y = e.GetPosition(container).Y - point.Y;
        }
    }

    private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
    {
        activated = false;
    }

XAML

<Canvas Name="canvas" Width="100" Height="100"
        Margin="0 0 0 0"
        Background="Purple"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        MouseMove="Canvas_MouseMove"
        MouseUp="Canvas_MouseUp"
        MouseDown="Canvas_MouseDown">
    <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="st" />
                <TranslateTransform x:Name="translate" />
            </TransformGroup>
        </Canvas.RenderTransform>
</Canvas>
</Grid>