动画仅在wpf中首次出现

时间：2014-08-02 14:07:54

标签： c# wpf animation

我的布局如下：

Grid x:Name="layoutRoot"
  |--ListBox
  |--Grid x:Name="detailsBaloon"

最初我的detailsBaloon的属性： ScaleX = 0，ScaleY = 0 所以它不可见。

现在，当用户选择listBox的任何项目时，我希望childGrid在一些动画中可见，我将ScaleX和ScaleY设置为1.它完美地运行。现在，当用户选择另一个项目时，我的意思是ListBox中的选择更改，然后我想要显示相同的动画。但这次动画根本不会发生。

这是我的代码：

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SwatchColorsDataSource}}">
    <Grid.Resources>
        <Storyboard x:Key="detailsBaloonVisibilityAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="detailsBaloon">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="detailsBaloon">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>

    <ListBox x:Name="SwatchListBox" ItemTemplate="{DynamicResource SwatchTemplate}" ItemsSource="{Binding XPath=/Swatches/Swatch}" ItemContainerStyle="{DynamicResource Colors_ListBoxStyle}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">       
        <ListBox.Triggers>
            <EventTrigger RoutedEvent="ListBox.SelectionChanged">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource ResourceKey=detailsBaloonVisibilityAnimation}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </ListBox.Triggers>
        <ListBox.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF5B5959" Offset="0"/>
                <GradientStop Color="#FF242222" Offset="1"/>
            </RadialGradientBrush>
        </ListBox.Background>
    </ListBox>
    <Grid x:Name="detailsBaloon" HorizontalAlignment="Left" Height="230" Margin="78.8,26.4,0,0" VerticalAlignment="Top" Width="280" DataContext="{Binding SelectedItem, ElementName=SwatchListBox}" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0" ScaleY="0"/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Path Data="M0.5,4.5 C0.5,2.290861 2.290861,0.5 4.5,0.5 L259.5,0.5 C261.70914,0.5 263.5,2.290861 263.5,4.5 L263.79983,194.9999 C321.40044,282.59975 344.6003,286.99993 251.79984,214.19991 L4.5,213.5 C2.290861,213.5 0.5,211.70914 0.5,209.5 z" Fill="#FF2E2727" Margin="7,9,-41.778,-44.576" Stretch="Fill" Stroke="Black"/>
        <TextBlock Height="30" Margin="14.6,22,15.4,0" TextWrapping="Wrap" Text="{Binding XPath=Theme}" VerticalAlignment="Top" Width="250" Foreground="White" FontSize="21.333"/>
        <Rectangle Fill="{Binding XPath=Color1}" HorizontalAlignment="Left" Margin="18.6,68.6,0,76.4" RadiusY="4" RadiusX="4" Stroke="Black" Width="70" Height="85"/>
        <Rectangle Fill="{Binding XPath=Color2}" Margin="102.6,68.6,107.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black"/>
        <Rectangle Fill="{Binding XPath=Color3}" Margin="0,68.6,23.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black" HorizontalAlignment="Right" Width="70"/>
        <TextBlock HorizontalAlignment="Left" Height="19.8" Margin="24.6,0,0,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color1}" VerticalAlignment="Bottom" Width="70" Foreground="White"/>
        <TextBlock Height="19.8" Margin="109.6,0,100.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color2}" VerticalAlignment="Bottom" Foreground="White"/>
        <TextBlock Height="19.8" Margin="0,0,15.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color3}" VerticalAlignment="Bottom" Foreground="White" HorizontalAlignment="Right" Width="70"/>
    </Grid>
</Grid>

1 个答案:

答案 0 :(得分：2)

  

在动画中从和到需要指定，因为您没有在动画evrytime中定义来自的值，这就是为什么动画不会在每一个选择。这里考虑From = To = 1的动画。

您的动画方法如下所示 enter image description here

我添加了额外的DoubleAnimationUsingKeyFrames以在关键时刻0定义From =“0”，以便每个选择上的网格比例

 <Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <Storyboard x:Key="detailsBaloonVisibilityAnimation">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <ListBox x:Name="SwatchListBox" Background="Gray">
        <ListBox.Triggers>
            <EventTrigger SourceName="SwatchListBox" RoutedEvent="Selector.SelectionChanged">
                <EventTrigger.Actions>
                    <BeginStoryboard  Storyboard="{StaticResource detailsBaloonVisibilityAnimation}"/>
                </EventTrigger.Actions>
            </EventTrigger>
        </ListBox.Triggers>
        <ListBoxItem>1</ListBoxItem>
        <ListBoxItem>2</ListBoxItem>
        <ListBoxItem>3</ListBoxItem>
    </ListBox>
    <Grid x:Name="detailsBaloon" Background="Red" HorizontalAlignment="Right" Height="230" VerticalAlignment="Top" Width="280" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="scale"  ScaleX="0" ScaleY="0"/>
        </Grid.RenderTransform>
    </Grid>
</Grid>
相关问题
最新问题