Почему этот код ColorAnimation не работает?

Я использую этот код для анимации двух остановок градиента, сделанных с помощью LinearGradientBrush. При выполнении код просто остается на начальных остановках градиента, и никакой анимации нет. Также нет никаких исключений/ошибок.

XAML:

   <StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed">
                    <ColorAnimation Storyboard.TargetName="GradStop1" 
                  Storyboard.TargetProperty = "Color"
                          From="Lavender" To="PaleVioletRed" Duration="0:0:5"/>
                    <ColorAnimation Storyboard.TargetName="GradStop2" 
                  Storyboard.TargetProperty = "Color"
                          From="White" To="Lavender" Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

    </StackPanel.Triggers>

    <Panel.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0"/>
            <GradientStop x:Name="GradStop2" Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Panel.Background>

</StackPanel>

Код запуска:

 public MainPage()
    {

        this.InitializeComponent();
        colorStoryboard1.Begin();

    }

person Dev Seth    schedule 02.09.2016    source источник
comment
Как вы вызываете анимацию? Может также показать вашу панель.   -  person Chris W.    schedule 02.09.2016
comment
@КрисВ. Отредактировал описание.   -  person Dev Seth    schedule 03.09.2016


Ответы (1)


Triggers, EventTrigger, BeginStoryboard обычно не используются в приложении UWP, эти API в основном существуют для совместимости с XAML, первоначально использовавшимся для Microsoft Silverlight. В приложении UWP мы должны использовать встроенные анимации.

Но для вашего сценария, если ваша анимация вызывает изменение макета или иным образом может повлиять на производительность в потоке пользовательского интерфейса, вам часто нужно явно включить анимацию, чтобы увидеть ее выполнение. Это означает, что вам нужно включить свойство EnableDependentAnimation. Для получения дополнительной информации вы можете обратиться к свойству ColorAnimation.EnableDependentAnimation.

Таким образом, вы можете изменить свой код, например, следующим образом:

<StackPanel x:Name="myStackPanel">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed">
                    <ColorAnimation Storyboard.TargetName="GradStop1"
                        Storyboard.TargetProperty = "Color"
                        From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" />
                    <ColorAnimation Storyboard.TargetName="GradStop2"
                        Storyboard.TargetProperty = "Color"
                        From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>

    <StackPanel.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" />
            <GradientStop x:Name="GradStop2" Color="White" Offset="1" />
        </LinearGradientBrush>
    </StackPanel.Background>
</StackPanel>

Для этого метода, поскольку вы уже определили триггер в XAML, нет необходимости повторно запускать его в коде позади.

И если вас интересует встроенная анимация в UWP, вот пример:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="std">
            <ColorAnimation Storyboard.TargetName="GradStop1"
                            Storyboard.TargetProperty = "Color"
                            From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" />
            <ColorAnimation Storyboard.TargetName="GradStop2"
                            Storyboard.TargetProperty = "Color"
                            From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" />
        </Storyboard>
    </Grid.Resources>
    <StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded">    
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" />
                <GradientStop x:Name="GradStop2" Color="White" Offset="1" />
            </LinearGradientBrush>
        </StackPanel.Background>
    </StackPanel>
</Grid>

код позади:

private void myStackPanel_Loaded(object sender, RoutedEventArgs e)
{
    std.Begin();
}
person Grace Feng    schedule 05.09.2016
comment
Большое спасибо! Это сделало работу отлично. - person Dev Seth; 06.09.2016