旋转按钮内容自定义按钮

Question

我在这里定义了一个自定义按钮：

<Button x:Class="Views.Controls.RefreshButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
             xmlns:local="clr-namespace:Views.Controls"             
             mc:Ignorable="d" 
             d:DesignHeight="64" 
             d:DesignWidth="64"
             Background="Transparent"
             Foreground="WhiteSmoke">

    <Controls:PackIconModern Width="40" Height="40" Kind="Refresh" Margin="0,-1.3" RenderTransformOrigin="0.5,0.5" />
    <Button.RenderTransform>
        <RotateTransform x:Name="RefreshButtonTransform" Angle="0"/>
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RefreshButtonTransform" Storyboard.TargetProperty="(RotateTransform.Angle)">
                            <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="360" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

我在主视图中实现了这个按钮。但这会导致整个按钮围绕左上角而不是按钮的中间点旋转。

Answer 1

您需要将 RenderTransformOrigin 设置到 Button

的中间

<Button ... RenderTransformOrigin="0.5,0.5">

来自 MSDN

RenderTransformOrigin has a somewhat nonstandard use of the Point structure value, in that the Point does not represent an absolute location in a coordinate system. Instead, values between 0 and 1 are interpreted as a factor for the range of the current element in each x,y axis. For example, (0.5,0.5) will cause the render transform to be centered on the element, or (1,1) would place the render transform at the bottom right corner of the element.

旋转按钮内容自定义按钮

Rotating button content custom button

wpf

custom-controls