Анимацията за стартиране на Silverlight на MouseOverState не работи

Написах стил за бутон, за да го оставя да се завърти малко, когато мишката е над него. За съжаление анимацията не стартира.

Създадох подобен стил за друг тип бутон в моето приложение, което също използва VisualStateManager и работи перфектно, така че не мисля, че това е проблем с VSM.

Изглежда, че има проблем с анимацията, но не мога да намеря проблема.

Ето как изглежда стилът:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOverState">
                                    <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                        <DoubleAnimation From="0"  To="10" Duration="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="10"  To="0" Duration="0:0:1" BeginTime="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="0"  To="-10" Duration="0:0:1" BeginTime="0:0:2" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="-10"  To="0" Duration="0:0:1" BeginTime="0:0:3" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Аз също съм опитвал

 Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(RotateTransform.Angle)"

c# xaml visualstatemanager silverlight
person chaosr    schedule 23.12.2011    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Имате няколко проблема с този шаблон:

  • Елементите VisualStateManager.VisualStateGroups трябва да бъдат дъщерни на вашия първи FrameworkElement, който в този случай е Grid
  • VisualState „MouseOverState“ трябва да се преименува на „MouseOver“
  • Всеки сценарий може да анимира всяко свойство на зависимост веднъж. Имате 4 двойни анимации, всички опитващи се да анимират свойството Angle. Това, което трябва да използвате тук, е DoubleAnimationUsingKeyframes, който има или LinearDoubleKeyframes, или EasingDoubleKeyframes.

Ето работеща версия на този шаблон:

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="MouseOver">
                                <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="content">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>

                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
person terphi    schedule 03.01.2012