[2008.06.25] Custom Coordinates in WPF

In the 2D graphics world, WPF uses the top-left corner of the window as its point of origin (0,0). However, you can easily change the coordinate system to match your needs, such as switching to the Cartesian Coordinate system. Doing this simply requires using Transformations to reposition all the necessary elements.

The code below demonstrates how this is accomplished and the image shows what happens as each transformation is applied to the Canvas element.

<Border Grid.Row="2" Grid.Column="0" Margin="5" CornerRadius="4"        Height="100" Width="100"        BorderBrush="Black" BorderThickness="1">     <Canvas Height="90" Width="90" Background="LightGreen">         <Line Stroke="Red" StrokeThickness="1"             X1="0" Y1="0" X2="50" Y2="50" />         <Canvas.RenderTransform>             <TransformGroup>                 <ScaleTransform ScaleY="-1" />                 <TranslateTransform Y="90" />             </TransformGroup>         </Canvas.RenderTransform>     </Canvas> </Border>