WPF:如何绘制圆圈并将其拖动?

时间:2009-09-23 10:30:41

标签: c# wpf drawing drag geometry

我是WPF的新手。

当我点击鼠标并且能够平滑地拖动时,我想在Canvas上绘制一个小圆圈

我该如何做到这一点?

4 个答案:

答案 0 :(得分:3)

“无论它是什么”都很重要,因为WPF中元素的放置高度依赖于父容器。 在Canvas中向右移动20px是很容易的(只需添加到Canvas.Left),但在Grid中这样做要困难得多(你需要处理Column,ColumnSpan和Margin)。

有一篇代码项目文章描述了如何在Canvas中拖动元素:Dragging Elements in a Canvas

如果您想仅移动该圆圈而不移动现有Canvas / Grid中的其他控件;我建议你使用DragCanvas(来自文章)作为普通Canvas / Grid的覆盖。

至于'画一个圆'部分:只需使用一个椭圆作为DragCanvas内的元素。

答案 1 :(得分:2)

我会在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

    }

答案 2 :(得分: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()方法。请注意,我每次都清除画布。然后我在鼠标位置绘制新的椭圆作为黑色圆圈。

现在,每次移动鼠标时,黑色圆圈都会从画布上删除,再次创建,然后在新位置绘制。 这是应用程序的快照 - 当你运行它并移动鼠标时,黑色圆圈将在你移动鼠标的任何地方重绘,就像你在拖动它一样。 black circle redraw

红色椭圆对我来说是有问题的,我永远无法重绘它并且无法将其从子列表中删除,并为此快速示例再次添加它。

答案 3 :(得分:0)

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

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

drag and drop rectangle in WPF / MVVM