WPF: Wie man das (0,0) in der Mitte eines Canvas erzeugt

Question

Das WPF Canvas hat ein Koordinatensystem, das bei (0,0) oben links im Steuerelement beginnt.

Zum Beispiel die folgende Einstellung meiner Kontrolle erscheinen auf der oberen linken:

<Control Canvas.Left="0" Canvas.Top="0"> 

Wie kann ich es zum Standard cartesian coordinates ändern?

Grundsätzlich:

• (0,0) in der Mitte
• Flip Y

I bemerkte this post ähnlich ist, aber es spricht nicht über das Koordinatensystem zu übersetzen. Ich habe versucht, eine TranslateTransform hinzuzufügen, aber ich kann es nicht funktionieren lassen.

Answer 1

Die beste Sache ist, ein benutzerdefiniertes Canvas zu schreiben, in dem Sie ArrangeOverride so schreiben können, dass es 0,0 als das Zentrum nimmt.

Update: Ich hatte einen weiteren Kommentar in der folgenden Antwort (@decasteljau) Ich werde nicht von Canvas abzuleiten empfehlen, können Sie von Panel ableiten und fügen Sie zwei Attached Dependancy Eigenschaften Top und Left und den gleichen Code oben eingefügt. Auch braucht es keinen Konstruktor mit LayoutTransform, und verwenden Sie keine Transformation auf dem Panel-Code verwenden Sie die richtige Maßnahme und ordnen Sie auf der DesiredSize des Panels Anordnen, so dass Sie nette Inhalte Größe Verhalten auch bekommen können. Canvas positioniert Elemente nicht dynamisch, wenn sich die Canvas-Größe ändert.

Answer 2

Es war sehr einfach zu tun. Ich habe den Code von Original Canvas mit .NET Reflector betrachtet und festgestellt, dass die Implementierung sehr einfach ist. Das einzige, was erforderlich war die Funktion außer Kraft zu setzen ArrangeOverride(...)

public class CartesianCanvas : Canvas 
{ 
    public CartesianCanvas() 
    { 
     LayoutTransform = new ScaleTransform() { ScaleX = 1, ScaleY = -1 }; 
    } 
    protected override Size ArrangeOverride(Size arrangeSize) 
    { 
     Point middle = new Point(arrangeSize.Width/2, arrangeSize.Height/2); 

     foreach(UIElement element in base.InternalChildren) 
     { 
      if(element == null) 
      { 
       continue; 
      } 
      double x = 0.0; 
      double y = 0.0; 
      double left = GetLeft(element); 
      if(!double.IsNaN(left)) 
      { 
       x = left; 
      } 

      double top = GetTop(element); 
      if(!double.IsNaN(top)) 
      { 
       y = top; 
      } 

      element.Arrange(new Rect(new Point(middle.X + x, middle.Y + y), element.DesiredSize)); 
     } 
     return arrangeSize; 
    } 
} 

Answer 3

Es gibt keine Notwendigkeit, eine benutzerdefinierte Panels zu erstellen. Leinwand wird gut tun. wickeln Sie es einfach in einem anderen Steuerelement (wie eine Grenze), zentriert, gibt ihm die Größe Null, und drehen Sie sie mit einem Render:

<Border> 
    <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" 
      Width="0" Height="0" 
      RenderTransform="1 0 0 -1 0 0"> 
    ... 
    </Canvas> 
</Border> 

Sie können dies tun, und alles, was in der Leinwand wird noch erscheinen, mit Ausnahme von (0,0) wird in der Mitte des enthaltenden Steuerelements sein (in diesem Fall die Mitte des Randes) und + Y wird oben statt unten sein.

Auch hier gibt es keine Notwendigkeit, um ein benutzerdefiniertes Panel dafür zu erstellen.

Answer 4

Sie können den Ursprung einfach mit RenderTransformOrigin ändern.

<Canvas Width="Auto" Height="Auto" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      RenderTransformOrigin="0.5,0.5"> 
     <Canvas.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform ScaleY="-1" ScaleX="1" /> 
      </TransformGroup> 
     </Canvas.RenderTransform> 
    </Canvas>