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

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

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

代码

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

我会做这样的事情：

添加翻译转换并让您先前的转换将其置于一个组
使用translate transform为了使用鼠标事件中的位置移动画布
对于翻译的起点，您可以使用容器中的坐标

代码背后：

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>

Answer 2

鼠标按下后，我再次移动画布，从第一个位置开始移动。

附言

为了更稳定的代码，我添加了这个，但总是回到第一个位置

 private void Canvas_MouseLeave(object sender, MouseEventArgs e)
    {
        activated = false;
    }

如何在WPF中更改画布上的位置？

2 个答案: