CODEWITHSUNDEEP
c#.netwpf
Chandan
Chandan

Reputation: 155

rotate Canvas within a Grid

I am able to rotate a canvas fine using LayoutTransform. But the corners go out of the Grid width or height. How can I rotate and resize the canvas to keep it inside the Grid. Here is how I am rotating :-

    private void btnRotate_Click(object sender, RoutedEventArgs e)
    {
        if (RotationAngle == 360)
        {
            RotationAngle = 0;
        }
        RotationAngle = RotationAngle + 1;

        RotateTransform rotateTransform = new RotateTransform();
        rotateTransform.Angle = RotationAngle;
        TransformGroup transformGroup = new TransformGroup();
        transformGroup.Children.Add(rotateTransform);
        rotateTransform.CenterX = 0.5;
        rotateTransform.CenterY = 0.5;
        cnvsYardMap.LayoutTransform = transformGroup;   
    }

Thanks.

Upvotes: 1

Views: 205

Answers (2)

Viv
Viv

Reputation: 17388

If the Grid cannot accommodate the new size of it's child Canvas, then it's expected to overflow the bounds.

so if you have something like:

<Grid Height="200">
  <Canvas x:Name="blah"
          Width="280"
          Height="150"
          Background="Tomato" />
</Grid>

and you apply a 50deg LayoutTransform, this will indeed overflow.

For what you're trying, you could wrap the Canvas in a ViewBox. So something like:

<Grid Height="200">
  <Viewbox>
    <Canvas x:Name="blah"
            Width="280"
            Height="150"
            Background="Tomato" />
  </Viewbox>
</Grid>

Now applying the same transform will "appear" to shrink the Canvas size to fit it within the parent Grid. Do note that the Viewbox scales it's children than resize them, so it's just a visual effect. The Width and Height of the Canvas will still remain what it originally was before the transform.

Upvotes: 2

aybe
aybe

Reputation: 16662

You have the ClipToBounds property that 'crops' the content of a children :

Normal behavior :

enter image description here

With ClipToBounds enabled:

enter image description here

Also, depending your needs you might need a RenderTransform instead :

enter image description here

(from LayoutTransform vs. RenderTransform – What’s the Difference?)

Upvotes: 0

Related Questions