Question

我有一个ToggleButton，它包含一个多边形“ Checked ”状态我将Polygon旋转90度。

问题是旋转完成后，Polygon会弹回到它的初始角度。

my ToggleButton :(部分模板）

    <ControlTemplate TargetType="{x:Type ToggleButton}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Unfocused"/>
                <VisualState x:Name="Focused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                   <VisualTransition GeneratedDuration="00:00:00.3"/>                               
                </VisualStateGroup.Transitions>
                <VisualState x:Name="MouseOver"/>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Pressed"/>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CheckStates">
                <VisualStateGroup.Transitions>
                   <VisualTransition GeneratedDuration="0" To="Checked">
                    <Storyboard>                                            
                       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="regularPolygon">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90" />
                       </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualTransition>                                                
                    <VisualState x:Name="Indeterminate"/>
                    <VisualState x:Name="Checked"/>
                    <VisualState x:Name="Unchecked"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>                     
                <Polygon x:Name="regularPolygon" 
                    Points="5,10 10,5 5,0"
                    RenderTransformOrigin="0.5,0.5" 
                    Stretch="Fill"                          
                    UseLayoutRounding="False">
                     <Polygon.RenderTransform>
                      <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform />
                        <TranslateTransform/>
                          </TransformGroup>
                     </Polygon.RenderTransform>                        
                </Polygon>                                          
            </ControlTemplate>

我需要创建一些改动，以便Polygon保持它的新角度吗？提前谢谢。

Answer 1

问题在于我将动画置于转换中而不是作为状态本身

  <VisualState x:Name="Checked">
     <Storyboard>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="rotateTransform">
             <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="90"/>
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </VisualState>

WPF - RotateTransform动画不保持当前角度

1 个答案: