Как отменить анимацию раскадровки WPF? - PullRequest
9 голосов
/ 12 января 2011

Я создал анимацию раскадровки WPF для изображения в Expression Blend 4. При наведении курсора изображение постепенно размывается.Можно ли как-нибудь отменить или перевернуть раскадровку, когда мышь покидает изображение?Я мог бы заставить его вызывать Storyboard.Remove (), но на самом деле он не воспроизводился бы через раскадровку в обратном направлении.

Можно ли как-нибудь это сделать в Expression Blend 4?

Ответы [ 2 ]

11 голосов
/ 12 января 2011

Поскольку вы используете Blend, вы должны воспользоваться поддержкой Blend для VisualStateManager. Все, что вам нужно сделать, это описать, как выглядит объект в его различных состояниях, таких как MouseOver и Normal, и как долго выполняются переходы между различными состояниями, а менеджер визуальных состояний решает, как переходить между состояниями. *

Изображение не имеет визуальных состояний, но вы можете отредактировать шаблон Button и сделать его содержимое изображением, а затем отредактировать состояния для кнопки. Я сделал это и очистил XAML, чтобы продемонстрировать технику:

<Grid>
    <Grid.Resources>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0">
                            <Image.Effect>
                                <DropShadowEffect ShadowDepth="0"/>
                            </Image.Effect>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="15"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Image>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Button Style="{StaticResource ButtonStyle1}"/>
</Grid>

Обратите внимание, что Blend делает все это для вас, но понимание XAML поможет. Вот учебник, ориентированный на Blend:

0 голосов
/ 12 января 2011
...