How to change x,y origin of canvas to Center, WPF

Question

Guys I am using a canvas as a ItemsPanelTemplate and binding it to a line list which contains typical line start points and end points

<ItemsControl ItemsSource="{Binding Path = LineList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Now. I would like to move the center point to middle of the canvas instead of top left corner.There are few option in front of me

Using value converters and adjust the value based on the canvas size and display [adjust x and y values]
Transform the canvas as mention in following posts: How to change x,y origin of canvas...? and Ray's answer

I know how to do it through first method, but when I tried through second method it is not changing the coordinate system. Why is that? I just substituted the answer in my code as below. Am I missing something?

****Update**** : Following code works correctly

<ItemsControl ItemsSource="{Binding Path = LineList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
           <Canvas>
             <Canvas.LayoutTransform>
               <ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
             </Canvas.LayoutTransform>
          </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Clemens · Answer 1 · 2014-04-04T07:09:11.313

6

The CenterX and CenterY properties of the ScaleTransform in your example do not actually move the Canvas. Moreover translations are anyways ignored by a LayoutTransform (see Remarks here). You could instead use an appropriate RenderTransform for the Canvas:

<ItemsPanelTemplate>
    <Canvas>
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
                <TranslateTransform
                    X="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas}}"
                    Y="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}"/>
                <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            </TransformGroup>
        </Canvas.RenderTransform>
    </Canvas>
</ItemsPanelTemplate>

edited Apr 04 '14 at 07:09

answered Apr 04 '14 at 06:56

Clemens

123,504
12
155
268

Is the code work for you? I just substituted your code instead of my one, It seems no response and the result is same as before. Why is that? – RobinAtTech Apr 06 '14 at 18:31
Yes, I've tested it and it works well. Of course the ItemsControls has to be put into an appropriate outer Panel that does the necessary layout, like e.g. a Grid. A Canvas won't work for that. – Clemens Apr 06 '14 at 19:22
Well, it is my mistake, your one works, but how to invert Y-axis with your one. because, Y is measured top to bottom in our case – RobinAtTech Apr 06 '14 at 21:57
1

Just change the y sign of the first ScaleTransform: `ScaleY="-2"`. – Clemens Apr 07 '14 at 06:19

score 2 · Answer 2 · answered May 11 '22 at 17:16

We can relocate the origin center to any point using translate

/*context_2d is context of your canvas*/
context_2d.translate(canvas.width/2, canvas.height/2);

the width divided by 2 is center of X axis. Same with height.

Now your axis looks like this:

     |
     |      x
------------>
     |
     |
     V y

To make them normal, you can rotate them with 'rotate':

context_2d.rotate(-Math.PI/2);

Now your axis looks like this:

   x ^
     |
     |     y
------------>
     |
     |

The last step is to rearrange X and Y axis in your code so you can use them as intended

How to change x,y origin of canvas to Center, WPF

2 Answers2