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对Point结构值的使用有些不规范，因为Point不表示坐标系中的绝对位置。相反，0到1之间的值被解释为每个x，y轴中当前元素范围的因子。 例如，（0.5,0.5）将使渲染变换以元素为中心，或者（1,1）将渲染变换放置在元素的右下角。

旋转按钮内容自定义按钮

1 个答案: