Question

我正在尝试为矩形动画而不是圆形。下面有一个视频来说明我在说什么。

https://www.screencast.com/t/M5rgy5gIicmB

下面是我的代码。

<StackPanel Orientation="Horizontal" Margin="-5 -5 -5 -5">
    <Label Content="RACKS"></Label>
    <Button x:Name="RefreshRacks" MaxHeight="20" MaxWidth="20" Margin="0" Style="{DynamicResource MetroCircleButtonStyle}" Click="RefreshRacks_Click" BorderBrush="Transparent">
        <Rectangle Width="15" Height="15" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" >
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill"
                                 Visual="{DynamicResource appbar_refresh}" />
            </Rectangle.OpacityMask>
            <Rectangle.RenderTransform>
                <!-- giving the transform a name tells the framework not to freeze it -->
                <RotateTransform x:Name="noFreeze" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
        To="-360" Duration="0:0:1" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Button>
</StackPanel>

Answer 1

RotateTransform`的CenterX和CenterY成为矩形的中心，宽度和高度的一半

<StackPanel Orientation="Horizontal" Margin="-5 -5 -5 -5">
<Label Content="RACKS"></Label>
<Button x:Name="RefreshRacks" MaxHeight="20" MaxWidth="20" Margin="0" Style="{DynamicResource MetroCircleButtonStyle}" Click="RefreshRacks_Click" BorderBrush="Transparent">
    <Rectangle Width="15" Height="15" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" >
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill"
                             Visual="{DynamicResource appbar_refresh}" />
        </Rectangle.OpacityMask>
        <Rectangle.RenderTransform>
            <!-- giving the transform a name tells the framework not to freeze it -->
            <RotateTransform x:Name="noFreeze" CenterX="7.5" CenterY="7.5"/>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
    Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
    To="-360" Duration="0:0:1" RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Button>

WPF矩形绕圈移动而不是旋转

1 个答案: