WPF: Wie zeichnen Sie einen Kreis und ziehen Sie es um?

Ich bin neu in WPF.

Möchte ich zeichnen Sie einen kleinen Kreis auf Leinwand, wenn ich klicken Sie mit der Maus und in der Lage sein, um ziehen Sie ihn, um reibungslos.

Wie kann ich dies erreichen?

InformationsquelleAutor Pratik Deoghare | 2009-09-23

  1. 3

    "was immer es ist" wichtig, weil die Platzierung von Elementen in WPF ist stark abhängig von den übergeordneten container.
    Es ist einfach, etwas zu bewegen, 20px nach rechts innerhalb eines Canvas (fügen Sie einfach auf die Leinwand.Links), aber es ist viel schwieriger, so zu tun in einem Raster an (Sie haben für den Umgang mit Column, ColumnSpan und Marge).

    Gibt es einen code project Artikel beschreibt, wie Sie per drag-Elemente innerhalb einer Leinwand: Ziehen Sie Elemente im Canvas-Bereich

    Wenn Sie verschieben möchten nur, dass der Kreis und nicht die anderen Steuerelemente in einem vorhandenen Leinwand/Raster; ich schlage vor, Sie verwenden eine DragCanvas (aus dem Artikel) als eine überlagerung über den normalen Canvas-Grid.

    Als für die "zeichne einen Kreis" Teil: benutzen Sie einfach eine Ellipse als element in der DragCanvas.

    Ok. Ich bin mit Leinwand und fertig mit der Zeichnung, aber das ziehen ist immer noch ein problem. Kann man kleine code-snippet?
    +1 für die code-Projekt link.

    InformationsquelleAutor Daniel

  2. 2

    Würde ich definieren, eine Leinwand und eine ellipse, die in der XAML-Datei:

    <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 canvas das Attribut MouseDown="MouseMoveFunction". Wenn Sie auf die Leinwand, dass event-handler aufgerufen wird. In Fall, dass Sie wollen, es zu bewegen, als die Maus bewegt, verwenden Sie MouseMove="MouseMoveFunction"

    Dann aktualisieren Sie einfach die ellipse, die die position jedes mal wenn Sie die Maus bewegen. Der folgende code wird in der Funktion, die aufgerufen wird, auf Maus-events:

        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

    }
    FYI - code in das MouseMove funktioniert nicht ganz. Ich den code in meine WPF-Anwendung und ausgetestet. Ich kann sehen, dass jede der Zeilen, betrat aber die Ellipse ist nie neu gezeichnet, in die neue Position. Gibt es eine Möglichkeit zum aufrufen von Invalidate() auf der Leinwand, ein Rechteck oder so etwas? Nicht sicher, aber das funktioniert nicht.

    InformationsquelleAutor fersarr

  3. 1

    War ich in der Lage, dies zu tun, alle im code, aber nicht in der Lage, verschieben Sie die Ellipse-element ein Kind-element von meiner Leinwand.

    Habe ich kopiert den code unten damit Sie es reproduzieren können.

    Zuerst erstellen Sie eine WPF-app namens WPFExample und stellen Sie sicher, dass Ihre wichtigste form ist die folgende:

    <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 auf Ihrem Haupt-form:

           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, den Fokus auf die Draw() Methode. Beachten Sie, dass ich Deaktivieren Sie die Leinwand jedes mal durch. Dann ziehe ich die neue Ellipse in der Position der Maus, wie ein schwarzer Kreis.

    Nun jedes mal, wenn Sie die Maus bewegen Sie den schwarzen Kreis ist gelöscht von der Leinwand, wieder neu angelegt und dann gezeichnet in der neuen Position.
    Hier ist ein Schnappschuss des app-wenn Sie es laufen und die Maus bewegen, wird der schwarze Kreis neu gezeichnet werden, wohin Sie die Maus bewegen, wenn Sie ziehen Sie es um.
    WPF: Wie zeichnen Sie einen Kreis und ziehen Sie es um?

    Die rote ellipse war problematisch für mich, und ich konnte nie bekommen, es neu zu zeichnen, und konnte Sie nicht entfernen Sie es aus der Liste der Kinder und fügen Sie es wieder für das schnelle Beispiel.

    InformationsquelleAutor raddevus

Schreibe einen Kommentar