How to do rotation around control's center in XAML

前端 未结 3 990
北荒
北荒 2020-12-05 09:04

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

相关标签:
3条回答
  • 2020-12-05 09:40
    <Button ...>
      <Button.LayoutTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
      </Button.LayoutTransform>
    </Button>
    
    0 讨论(0)
  • 2020-12-05 09:48

    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>
    
    0 讨论(0)
  • 2020-12-05 10:04

    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>
    
    0 讨论(0)
提交回复
热议问题