15

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 most math graphs.

How do I change the x,y origin of the canvas to the bottom left corner and reverse it's interpretation of the y coordinate?

(I would like to stay in XAML)

David Smith
  • 411
  • 2
  • 5
  • 12

4 Answers4

29
<Canvas>
    <Canvas.LayoutTransform>
        <ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
    </Canvas.LayoutTransform>
</Canvas>
kenwarner
  • 28,650
  • 28
  • 130
  • 173
  • 3
    Thanks for this, but aren't ScaleX, CentreX, and CenterY redundant? Just using ScaleY="-1" seems to do the trick. Also, others beware that this will also flip any text upside down. – David Smith Jul 27 '09 at 19:24
  • 5
    yes the other properties are redundant, but it's convention (from what I've seen) to include those properties. And yes, it will flip the text, but if you're just drawing points should be ok. if you need to draw text, you could draw it on a 2nd transparent Canvas that is on top of the graph Canvas – kenwarner Jul 27 '09 at 20:38
  • @qntmfred, any sample implementation of text implementation. because the point system will affect text placement as well – RobinAtTech Apr 08 '14 at 02:05
  • I needed to flip my x coordinate and this solution worked perfectly. – WBuck Jul 07 '17 at 14:01
3

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" >
Travis Banger
  • 697
  • 1
  • 7
  • 19
  • The ScaleTransform worked perfectly for me, and allowed me to turn one or both axis, as well as place origo where I wanted it. Nevertheless, +1 for pointing this one out, although not usable for my current case. – Bent Tranberg Apr 27 '18 at 08:03
0

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.

Paul van Brenk
  • 7,450
  • 2
  • 33
  • 38
  • Hi what do you mean by data binding? I am trying to select points by click on them. TypeConverter has anything to do with this? – Khalil Khalaf Jul 12 '16 at 12:53
0

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.

Bill Reiss
  • 3,460
  • 1
  • 19
  • 20
  • Well I don't see how you can do this with a straight Canvas, if you scale it -1 in the Y everything will be flipped. I guess you could scale all of the elements -1 as well. – Bill Reiss Jul 30 '09 at 15:10