WPF: Wie zeichnet man einen Kreis und zieht ihn herum?

Question

Ich bin neu bei WPF.

Ich möchte auf Leinwand einen kleinen Kreis zu ziehen, wenn ich Klick Maus und es um glatt zu ziehen können.

Wie kann ich das erreichen?

Answer 1

"was immer es ist" ist wichtig, da die Platzierung von Elementen in WPF stark vom übergeordneten Container abhängig ist. Es ist einfach, etwas 20px nach rechts in ein Canvas zu verschieben (einfach Canvas.Left hinzufügen), aber es ist viel schwieriger, dies in einem Grid zu tun (Sie müssen mit Column, ColumnSpan und Margin umgehen).

Es gibt einen Code Projekt Artikel beschreibt, wie Elemente in einem Leinwand ziehen: Dragging Elements in a Canvas

Wenn Sie nur den Kreis verschieben möchten, und nicht andere Steuerelemente in einem bestehenden Canvas/Grid; Ich schlage vor, Sie verwenden eine DragCanvas (aus dem Artikel) als Overlay über das normale Canvas/Grid.

Wie für den 'einen Kreis zeichnen' Teil: Verwenden Sie einfach eine Ellipse als Element innerhalb der DragCanvas.

Answer 2

würde ich eine Leinwand und eine Ellipse in der XAML-Datei definiert werden:

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

Beachten Sie, dass Leinwand hat das Attribut MouseDown="MouseMoveFunction". Wenn Sie auf den Erstellungsbereich klicken, wird dieser Ereignishandler aufgerufen. Wenn Sie möchten, dass es sich bewegt, während sich Ihre Maus bewegt, verwenden Sie MouseMove="MouseMoveFunction"

Dann aktualisieren Sie einfach die Ellipsenposition jedes Mal, wenn Sie Ihre Maus bewegen. Der folgende Code geht in der Funktion, die auf Mausereignissen genannt wird:

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

ich in der Lage war, dies in Code zu tun, aber nicht in der Lage das Ellipse-Element zu bewegen, die ein untergeordnetes Element meiner Leinwand war.

Ich habe den folgenden Code kopiert, damit Sie ihn reproduzieren können.
Erstellen Sie zunächst eine WPF-Anwendung WPFExample und stellen Sie sicher, dass Ihr Hauptformular hat die folgenden genannt:

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

Als nächstes fügen Sie den Code in Ihre Hauptform:

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

Offensichtlich konzentrieren sich auf die Draw() Methode. Beachten Sie, dass ich die Leinwand jedes Mal lösche. Dann zeichne ich die neue Ellipse an der Mausposition als schwarzen Kreis.

Jedes Mal, wenn Sie Ihre Maus bewegen, wird der schwarze Kreis aus der Leinwand gelöscht, neu erstellt und dann an der neuen Position gezeichnet. Hier ist ein Schnappschuss der App - wenn Sie sie ausführen und die Maus bewegen, wird der schwarze Kreis überall dort neu gezeichnet, wo Sie Ihre Maus bewegen, als würden Sie sie herumziehen.

Die rote Ellipse war problematisch für mich und ich konnte es nie zum Neuzeichnen bringen und konnte es nicht aus der Liste der Kinder entfernen und für dieses schnelle Beispiel erneut hinzufügen.