Default coordinate system and customer coordinate system in WPF


For 2D graphics, the WPF coordinate system locates the origin in the upper-left corner of the rendering area. In the 2D space, the positive X-axis points to the right, and the positive Y-axis points to downward, as shown below:

Now we will create our own coordinate system, we want to move the origin from the top-left corner to the bottom-left corner of the canvas, This system can be easily created in WPF by directly performing corresponding transformations to the canvas.

Here is a sample:

<Window x:Class="sample" xmlns="" xmlns:x="" 
Title="Line In Custom System" Height="240" Width="220">
<Border BorderBrush="Black" BorderThickness="1" 
  Height="200" Width="200">
<Canvas Height="200" Width="200">
<ScaleTransform ScaleY="-1" />
<TranslateTransform Y="200" />
<Line X1="0" Y1="0" X2="100" Y2="100" 
  Stroke="Black" StrokeThickness="2" />

The new coordinate system shown by following:

The above content refers to the book "Practical WPF Graphics Programming".