WPF: how to make the (0,0) in center inside a Canvas

wpf canvas coordinate-systems
decasteljau picture decasteljau · Dec 9, 2009 · Viewed 19.4k times · Source

The WPF Canvas has a coordinate system starting at (0,0) at the top-left of the control.

For example, setting the following will make my control appear on the top-left: 

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

How can I change it to the standard cartesian coordinates?

Basically:

  • (0,0) at center
  • flip Y

I noticed this post is similar, but it does not talk about translating the coordinate system. I tried adding a TranslateTransform, but I can't make it work.

Answer

Ray Burns picture Ray Burns · Dec 27, 2009

There is no need to create a custom Panel. Canvas will do just fine. Simply wrap it inside another control (such as a border), center it, give it zero size, and flip it with a RenderTransform:

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

You can do this and everything in the canvas will still appear, except (0,0) will be at the center of the containing control (in this case, the center of the Border) and +Y will be up instead of down.

Again, there is no need to create a custom panel for this.

Related questions

Is it possible to bind a Canvas's Children property in XAML?

I'm a little surprised that it is not possible to set up a binding for Canvas.Children through XAML. I've had to resort to a code-behind approach that looks something like this: private void UserControl_Loaded(object sender, RoutedEventArgs e) { …

Read More
WPF Canvas Scaling/Transform to Fit

I'm reposting this question as I didn't get much of a response last time, hopefully a bit of re-wording might help... Essentially what I'm trying to do is to create a databound canvas, that will automatically scale its contents to …

Read More
Get Mouse Position on Canvas (But NOT on window)?

I have a project in WPF 4 and vb.net 2010. I have a canvas inside a window. The window is full screen, but the canvas is set to a solid 640x480 in the center of the window. I need to get …

Read More