Как заставить Path вращаться на месте?

Question

Microsoft дает хороший пример вращения кнопки при нажатии. Я хочу добиться того же эффекта с путем , но следующий подход не дает того же результата.

Например, этот путь ниже,

<Path x:Name="path"
              Stretch="None"
              Stroke="Black"
              Fill="Blue"
              RenderTransformOrigin="0.5,0.5"
              Margin="100">
            <Path.Data>
                <PathGeometry Figures="M10,0 A10,10 0 0 1 7,7 L71,71 A100,100 0 0 0 100,0Z" />
            </Path.Data>
            <Path.RenderTransform>
                <RotateTransform x:Name="MyPathTransform"
                                 Angle="0" />
            </Path.RenderTransform>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="MyPathTransform"
                                             Storyboard.TargetProperty="(RotateTransform.Angle)"
                                             From="0.0"
                                             To="360"
                                             Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>

Вызов щелчок по этому пути не заставляет последний вращаться на месте, как кнопка. Почему это происходит и как я могу это исправить?

Answer 1

Анимируйте свойство Transform Геометрии. Таким образом, у вас есть более точный контроль над точкой поворота.

<Path x:Name="path" Stretch="None" Stroke="Black" Margin="100">
    <Path.Data>
        <PathGeometry Figures="M10,0 A10,10 0 0 1 7,7 L71,71 A100,100 0 0 0 100,0Z">
            <PathGeometry.Transform>
                <RotateTransform x:Name="rotateTransform"/>
            </PathGeometry.Transform>
        </PathGeometry>
    </Path.Data>
    <Path.Triggers>
        <EventTrigger RoutedEvent="MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="rotateTransform"
                                     Storyboard.TargetProperty="Angle"
                                     To="360" FillBehavior="Stop" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
</Path>

Answer 2

Из вашего последующего комментария я понимаю, что проблема заключается в том, что он анимируется, но он не вращается на месте, как кнопка в учебнике, которому вы следовали.

Вращение очень зависит от того, что вы RenderTransformOrigin установлено в значение, и это значение в процентах от ширины и высоты элемента управления анимацией. В вашем случае ваши Path границы на самом деле несколько большие. Path заполняет контейнер, кроме 100 Marign. Ваш источник анимации установлен на 0,5, 0,5 (в центре). Таким образом, он вращается вокруг центра окна. Вы можете играть с этим источником до тех пор, пока не окажетесь в центре своей геометрии, но более простой способ получить то, что вы хотите, это поместить ваш путь в Canvas. Таким образом, Canvas займет все пространство, а ваш Path будет размером с вашу геометрию. Затем, используя 0,5, 0,5, источник сделает то, что вы хотите.

<Canvas Margin="100">
    <Path x:Name="path"
          Stretch="None"
          Stroke="Black"
          Fill="Blue"
          RenderTransformOrigin="0.5,0.5">
        <Path.Data>
            <PathGeometry Figures="M10,0 A10,10 0 0 1 7,7 L71,71 A100,100 0 0 0 100,0Z" />
        </Path.Data>
        <Path.RenderTransform>
            <RotateTransform x:Name="MyPathTransform"
                             Angle="0" />
        </Path.RenderTransform>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="MyPathTransform"
                                         Storyboard.TargetProperty="(RotateTransform.Angle)"
                                         From="0.0"
                                         To="360"
                                         Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Canvas>