WPF: Die Größe eines Kreises ändern, den Mittelpunkt statt TopLeft beibehalten?

8

Ich möchte mit Hilfe eines Schiebereglers die Größe eines Kreises auf meiner Leinwand ändern. Dieser Kreis kann auf der Leinwand durch Drag & amp; Drop-Zeug bewegt werden, die ich im Code hinterließ, also ist seine Position nicht festgelegt.

Ich habe den Wert des Schiebereglers an die Höhe und Breite einer Ellipse gebunden. Leider, wenn ich den Schieberegler verwende, wird der Kreis mit seinem oberen linken Punkt (eigentlich der obere linke Punkt des Rechtecks, in dem er sitzt) in der Größe verändert, während der Operation gleich bleibt.

Ich möchte die Größe ändern, wobei der Mittelpunkt während der Operation konstant ist. Gibt es eine einfache Möglichkeit, dies in XAML zu tun? Übrigens, ich habe ScaleTransform bereits ausprobiert, aber es hat nicht ganz das gemacht, was ich wollte.

Vielen Dank! : -)

Jan

%Vor%     
Jan 06.08.2010, 12:44
quelle

5 Antworten

4

Sie können Ihre Canvas.Left und Canvas.Top über einen ValueConverter an Ihre Höhe und Breite binden.

Speziell (bearbeiten):
Erstellen Sie jeweils eine Eigenschaft für Canvas.Left und Canvas.Top und binden Sie diese an.
Speichern Sie die alten Werte für Breite und Höhe oder den alten Schiebereglerwert.
Wenn der Schieberegler geändert wird, erhalten Sie die inkrementelle Änderung "dx", indem Sie den gespeicherten Wert subtrahieren.
(Vergessen Sie nicht, den gespeicherten Wert zu aktualisieren ...)
Fügen Sie dx zur Eigenschaft Breite und Höhe hinzu.
Und, wie gesagt, füge dx / 2 * -1 zu Canvas.Left und Canvas.Top hinzu.

Macht das Sinn?

    
Martin Hennings 06.08.2010, 12:51
quelle
2

Da Sie einen Canvas-Bereich verwenden, ist der Speicherort ein Element. Wenn Sie möchten, dass sich die Position "Oben, Links" ändert, müssen Sie dies selbst tun. Wenn Sie einen anderen Feldtyp wie z. B. ein Raster verwenden, können Sie die Ausrichtung Ihrer Ellipse ändern, um sie unabhängig von der Größe an derselben relativen Position anzuordnen. Du könntest diesen Effekt erhalten, indem du ein Gitter in deinem AdornerDecorator hinzufügst und die Ellipse zentrierst, aber du musst auch den AdornerDecorator oder das Gitter auf eine feste Größe einstellen, weil sie sich nicht in einem Canvas dehnen.

Die beste Lösung, die Sie verwenden könnten, wäre eine ScaleTransform, die auf die RenderTransform-Eigenschaft mit einer RenderTransformOrigin von 0.5,0.5 angewendet wird. Sie sagten, Sie hätten Probleme mit ScaleTransform, aber nicht das, was das Problem war.

    
John Bowen 06.08.2010 12:56
quelle
2

Das Problem ist, dass Sie den SLIDER verwenden, um die Breite und Höhe anzupassen. Breite und Höhe werden nicht um RenderTransformOrigin berechnet; Nur RenderTransforms verwenden diesen Wert.

Hier ist eine korrigierte Version (brb, kaxaml):

%Vor%

Natürlich wird das wahrscheinlich nicht für Sie funktionieren. Warum? Nun, die ScaleTransform, die ich verwendet habe, zoomt nicht nur den Kreis, sondern auch die Grenze; Wenn der Kreis größer wird, funktioniert auch die Grenze. Hoffentlich kümmern Sie sich nicht darum.

Machen Sie sich auch klar, wenn Sie Transformationen kombinieren (Skalieren und dann in diesem Fall drehen), dass sie in der richtigen Reihenfolge angewendet werden, und man kann beeinflussen, wie ein anderer ausgeführt wird. In Ihrem Fall würden Sie das nicht bemerken. Aber wenn Sie beispielsweise eine Drehung und eine Übersetzung durchführen würden, wäre die Reihenfolge relevant.

Ah, was habe ich gedacht? Einfach die Ellipse in ein Raster stecken (einfachste Lösung, aber andere Container funktionieren). Das Raster sorgt automatisch für die Zentrierung der Ellipse bei der Größenänderung. Keine Wertwandler nötig! Hier ist der Code:

%Vor%     
Will 06.08.2010 12:53
quelle
1

Wickeln Sie Ihre Ellipse in ein Gitter der maximalen Größe. Solange es kleiner ist, wird die Ellipse im Raster zentriert:

%Vor%

Möglicherweise müssen Sie Ihre Ziehlogik anpassen, um das Ziehen des Rasters anstelle der Ellipse selbst zu übernehmen.

    
Quartermeister 06.08.2010 13:20
quelle
0

Ich habe eine sehr einfache Möglichkeit gefunden, dies in reinem XAML zu tun: set Margin="-1000000" . Lesen Sie hier mehr: Platzieren eines Elements innerhalb des Canvas-Bereichs durch die Verwendung von nur XAML in WPF (anstatt der oberen linken Ecke)

    
Ark-kun 04.11.2012 14:40
quelle

Tags und Links