WPF视觉状态转换不会动画

时间:2014-09-03 13:28:09

标签: wpf

我正在尝试使用视觉状态为元素的位置设置动画。我遇到的问题是,它不是动画,而是等待过渡期(0.333秒)并弹出到结束位置。我做错了什么?

<UserControl x:Class="Namespace.UpdateNotificationView" x:Name="UserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d">
<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="UpdatesViewState">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.333">
                    <VisualTransition.GeneratedEasingFunction>
                        <CircleEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="NoUpdatesState"/>
            <VisualState x:Name="UpdatesAvailableState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Toast">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border x:Name="Toast" Background="#FFFFFBE9" CornerRadius="0,0,20,0" BorderBrush="#FFFFD100" BorderThickness="0,0,2,2" RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform Y="-75"/>
            </TransformGroup>
        </Border.RenderTransform>
            <Grid Margin="15,5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="/Namespace;component/Skins/Images/Update.png" Width="48" Height="48" Margin="0,0,15,0"/>
                <TextBlock TextWrapping="Wrap" Text="Updates Available" Foreground="Black" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="29.333"/>
            </Grid>
        </Border>
</Grid>

0 个答案:

没有答案