7

我是 WPF 的新手。

当我单击鼠标并能够顺利拖动它时，我想在 Canvas 上绘制一个小圆圈。

我怎样才能做到这一点？

4

4 回答 4

3

我会在 XAML 文件中定义一个画布和一个椭圆：

<Canvas Background="White" Name="canvas" Width="950" Height="500" MouseDown="MouseMove">
    <Ellipse Name="bola" Canvas.Left="130" Canvas.Top="79" Width="50" Height="50" Fill="Green"  />
</Canvas>

请注意，canvas 具有属性MouseDown="MouseMoveFunction"。每当您单击画布时，都会调用该事件处理程序。如果您希望它随着鼠标移动而移动，请使用MouseMove="MouseMoveFunction"

然后每次移动鼠标时更新椭圆的位置。以下代码进入在鼠标事件上调用的函数中：

    private void MouseMove(object sender, MouseEventArgs e)
    {
        Point punto = e.GetPosition(canvas);
        int mouseX = (int)punto.X;
        int mouseY = (int)punto.Y;
        bola.SetValue(Canvas.LeftProperty, (double)mouseX); //set x
        bola.SetValue(Canvas.TopProperty, (double)mouseY); //set y

    }
于 2012-03-20T22:54:19.940 回答
3

“不管它是什么”很重要，因为 WPF 中元素的放置高度依赖于父容器。在 Canvas 内向右移动 20px 的内容很容易（只需添加到 Canvas.Left），但在 Grid 中这样做要困难得多（您必须处理 Column、ColumnSpan 和 Margin）。

有一篇代码项目文章描述了如何在画布中拖动元素：在画布中拖动元素

如果您只想移动那个圆圈而不是现有画布/网格中的其他控件；我建议您使用 DragCanvas（来自文章）作为普通 Canvas/Grid 的叠加层。

至于“画圆”部分：只需使用 Ellipse 作为 DragCanvas 内的元素。

于 2009-09-23T10:38:08.347 回答
1

我能够在代码中完成这一切，但无法移动作为我画布子元素的 Ellipse 元素。

我已经复制了下面的代码，以便您可以复制它。
首先创建一个名为 WPFExample 的 WPF 应用程序，并确保您的主窗体具有以下内容：

<Window x:Class="WPFExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Background="LightGray">
    <Grid>
        <Canvas HorizontalAlignment="Left" Name="MainCanvas"
                Height="300" Width="500" Margin="5,5,5,5" VerticalAlignment="Top" Background="LightYellow" MouseDown="Canvas_MouseDown" MouseMove="MainCanvas_MouseMove"
                />
        <Ellipse Name="post" Width="50" Height="50" Fill="Red" Margin="5,5,5,5"  />

    </Grid>
</Window>

接下来，将代码添加到您的主窗体：

       private void Draw(Point m)
        {
            MainCanvas.Children.Clear();

            int mX = (int)m.X;
            int mY = (int)m.Y;
            Ellipse el = new Ellipse();
            el.Width = 15;
            el.Height = 15;
            el.SetValue(Canvas.LeftProperty, (Double)mX);
            el.SetValue(Canvas.TopProperty, (Double)mY);
            el.Fill = Brushes.Black;

            MainCanvas.Children.Add(el);
        }

        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Draw(e.GetPosition(MainCanvas));
        }

        private void MainCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            Draw(e.GetPosition(MainCanvas));
        }

显然，关注Draw()方法。请注意，我每次都清除画布。然后我在鼠标位置绘制新的椭圆作为一个黑色圆圈。

现在，每次移动鼠标时，画布上的黑色圆圈都会被删除，重新创建，然后在新位置绘制。这是应用程序的快照——当你运行它并移动鼠标时，无论你移动鼠标，黑色圆圈都会重新绘制，就像你在拖动它一样。 黑圈重绘

红色椭圆对我来说是个问题，我永远无法重绘它，也无法将它从子列表中删除并再次添加它以用于这个快速示例。

于 2016-09-01T19:33:45.413 回答
0

我有一篇关于在 WPF 环境中拖放矩形的示例博客文章，但使用的是 MVVM 架构。内容太长，无法在此处复制，但说明应该相当简单。

用椭圆或您自己的其他形状替换矩形也应该相当简单。

在 WPF / MVVM 中拖放矩形

于 2020-01-03T23:52:10.760 回答