How to do rotation around control's center in XAML

Question

I want do rotate button to 90 degrees but it gets clipped because it rotates arount (0,0). How to make it rotate around center if I don't know it't width in pixels (it's a template for many buttons)

Are you using the RenderTransform or the LayoutTransform? A 90 degree LayoutTransform seems to work ok for me even without specifying the origin. — grantnz, Nov 09 '10 at 09:51
I'm using LayoutTransform and button is in `Grid` with column width set to auto. Correct rotation doesn't work anyway because it seems that grid sets column width equal to button's width inseatd of height. — Poma, Nov 09 '10 at 09:56
too big to post in comment. uploaded to http://www.text-upload.com/read.php?id=22752&c=9980825 — Poma, Nov 09 '10 at 10:06
A lot going on in your XAML! Are you sure the LayoutTransform is the problem? What is the button on the gridsplitter supposed to do/show? — grantnz, Nov 09 '10 at 10:26
This button is supposed to collapse one side of `GridSplitter`. Just try to set column width from `auto` to `28` and to play with `LayoutTransform` — Poma, Nov 09 '10 at 10:29

score 140 · Answer 1 · answered Nov 09 '10 at 09:40

140

You have to set the control's RenderTransformOrigin to 0.5, 0.5.

ex.:

<Button RenderTransformOrigin="0.5, 0.5">
    <RepeatButton.RenderTransform>
        <RotateTransform Angle="90"/>
    </RepeatButton.RenderTransform>
</RepeatButton>

answered Nov 09 '10 at 09:40

Francesco De Vittori

9,100
6
33
43

7

This one works for me, though the accepted answer doesn't. Maybe there's a difference here between RenderTransform and LayoutTransform? – TheSHEEEP Aug 16 '13 at 11:27
1

Yeah this works for me as well, not accepted answer. – Paw Baltzersen Feb 06 '14 at 13:35
1

LayoutTransform from the accepted answer changes everything around the element I'm trying to spin. setting the RenderTransformOrigin and using RenderTransform work great, thanks! – Chris Lees May 20 '15 at 00:27
2

I had a problem with this solution, as it rotated but kept the original layout spacing. The LayoutTransform solution (accepted solution) properly calculated the space for the element. – Michael Repucci Oct 08 '15 at 16:28
1

This IS the answer. Please can the author review! – Jeb Nov 24 '17 at 15:00
3

This works for UWP apps while the accepted answer does not. – Hong Feb 03 '18 at 21:18

score 59 · Accepted Answer · answered Nov 09 '10 at 09:48

59

<Button ...>
  <Button.LayoutTransform>
    <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
  </Button.LayoutTransform>
</Button>

answered Nov 09 '10 at 09:48

Andy

3,631
2
23
32

12

this one did not work for me in windows phone 8 .NET 4.5 C# XAML Application. The one by @FrancescoDeVittori worked though. – mishan Dec 29 '14 at 14:19
1

this only moves the button to the right and to the buttom by 0.5 each this seems not to be the correct answer (VS17 .Net 6.4.1) – Kaspatoo Nov 06 '19 at 10:23

score 3 · Answer 3 · edited Sep 03 '11 at 03:36

My understanding is that the origin isn't relevant with a LayoutTransform.

MSDN says:

Setting a transform provides powerful capabilities of scaling and rotating. However, LayoutTransform ignores TranslateTransform operations. This is because the layout system behavior for child elements of a FrameworkElement auto-corrects any offsets to the position of a scaled or rotated element into the layout and coordinate system of the parent element.

and the following "correctly" rotates the button.

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="1" Grid.Column="1">Excessively Long Button Still Ok
        <Button.LayoutTransform>
            <RotateTransform Angle="90" />
        </Button.LayoutTransform>
    </Button>
</Grid>

How to do rotation around control's center in XAML

3 Answers3

Linked