WPF: ¿Cómo dibujar un círculo y arrastrarlo?

Question

Soy nuevo en WPF.

Quiero dibujar un pequeño círculo en la lona cuando clic del ratón y ser capaz de arrastrarlo por sin problemas.

¿Cómo puedo lograr esto?

Answer 1

"lo que sea" importa porque la ubicación de los elementos en WPF depende en gran medida del contenedor padre. Es fácil mover algo 20px hacia la derecha dentro de un lienzo (simplemente agregue a Canvas.Left), pero es mucho más difícil hacerlo en una cuadrícula (tiene que lidiar con Column, ColumnSpan y Margin).

Hay un artículo de proyecto de código que describe cómo arrastrar elementos dentro de una lona: Dragging Elements in a Canvas

Si desea mover sólo que círculo y no otros controles en una lona/red existente; Sugiero que uses un DragCanvas (del artículo) como una superposición sobre el Lienzo/Cuadrícula normal.

En cuanto a la parte 'dibujar un círculo': simplemente use una Elipse como elemento dentro de DragCanvas.

Answer 2

Yo definiría un lienzo y una elipse en el archivo 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> 

en cuenta que una lona tiene el atributo MouseDown="MouseMoveFunction". Cada vez que haga clic en el lienzo, se llamará a ese controlador de eventos. En caso de que desee que se mueva a medida que se mueve el mouse, use MouseMove="MouseMoveFunction"

Luego, simplemente actualice la posición de la elipse cada vez que mueva el mouse. El siguiente código va en la función que se llama en eventos de ratón:

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 

    } 

Answer 3

que era capaz de hacer todo esto en el código, pero incapaz de moverse el elemento elipse que era un elemento hijo de mi lienzo.

He copiado el código siguiente para que pueda reproducirlo.
En primer lugar crear una aplicación de WPF denominado WPFExample y asegurarse de que su principal forma tiene la siguiente:

<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> 

A continuación, añadir el código a su forma principal:

 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)); 
     } 

Obviamente, se centran en la Draw() método. Observe que borro el lienzo cada vez que paso. Luego dibujo la nueva Elipse en la ubicación del mouse como un círculo negro.

Ahora, cada vez que mueva el mouse, el círculo negro se borrará del lienzo, se creará de nuevo y se dibujará en la nueva ubicación. Aquí hay una instantánea de la aplicación: cuando la ejecutas y mueves el mouse, el círculo negro se volverá a dibujar donde sea que muevas el mouse, como si lo estuvieras arrastrando.

La elipse roja fue problemática para mí y nunca pude volver a dibujarla y no pude eliminarla de la lista de niños y volver a agregarla para este rápido ejemplo.