CODEWITHSUNDEEP
wpfcanvaswpf-controls
RobinAtTech
RobinAtTech

Reputation: 1329

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

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

  1. Using value converters and adjust the value based on the canvas size and display [adjust x and y values]
  2. 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>

Upvotes: 1

Views: 4291

Answers (2)

Ilya Dubrovin
Ilya Dubrovin

Reputation: 21

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

Upvotes: 2

Clemens
Clemens

Reputation: 128042

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>

Upvotes: 6

Related Questions