How to change x,y origin of canvas to bottom left and flip the y coordinates?

Question

I have a bunch of data points that I would like to two-way bind to points on a canvas.

The points assume larger y values are reflected in an upwards direction like m

Answer 1

If you use databinding you can use a TypeConvertor, but for that you have to go outside the XAML and you need to know the size of the canvas beforehand.

Answer 2

I'd probably create a custom panel instead of using Canvas and give it the attached properties that make sense for your needs. Here is an example of implementing a custom panel:

http://blog.boschin.it/articles/silverlight-radialpanel.aspx

Something like Canvas is very simple since you don't have to do much in the measure and arrange overrides.

You may also be able to inherit from Canvas and override ArrangeOverride, I haven't tried that but it may work.

Answer 3

<Canvas>
    <Canvas.LayoutTransform>
        <ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
    </Canvas.LayoutTransform>
</Canvas>

Answer 4

I tried the ScaleTransform method extensively: It does not work. It only shifts one of the 2 coordinates, never both. This, however, works as advertised:

<Canvas Name="myCanvas" Width="0" Height="0" RenderTransform="1 0 0 -1 0 0"
    HorizontalAlignment="Center" VerticalAlignment="Center" >