在页面之间制作漂亮的动画

Question

我创建了一个适用于Windows商店的应用程序，该应用程序包含几页并在每个页面中显示不同的背景图像（该图像覆盖了所有屏幕）。 我不希望页面之间的动画看起来不错。 我用EntranceThemeTransition，当内容第一次出现时，有一个很好的动画。但是当图像出现时没有动画。我可以为背景图片创建一些动画，以便导航很好吗？

这是在一个页面中（如果需要的话），我的XAML代码

<Grid> 
     <Grid.Background> 
      <ImageBrush ImageSource="assets/sunset.jpg" x:Name="cc"/> 
     </Grid.Background> 
     <Grid.ChildrenTransitions> 
      <TransitionCollection> 
       <EntranceThemeTransition/> 
      </TransitionCollection> 
     </Grid.ChildrenTransitions> 
     <StackPanel x:Name="Container"> 
      <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="413,138,438,0" Height="550" Width="515" x:Name="FormContainer"> 
       <TextBox Margin="133,249,131,269" PlaceholderText="Email" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="Email"/> 
       <PasswordBox HorizontalAlignment="Left" Margin="133,298,0,0" VerticalAlignment="Top" Width="251" Height="8" PlaceholderText="Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="Password"/> 
       <Button Content="Login" HorizontalAlignment="Left" Margin="130,358,0,0" VerticalAlignment="Top" Width="257" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Login_Click"/> 

      </Grid> 
     </StackPanel> 
    </Grid> 

Answer 1

在XAML设置的动画。然后，您可以在加载图像后在代码中触发FadeInAnimation。

XAML

<Page.Resources> 
    <Storyboard x:Name="LoadImageStoryboard"> 
    <FadeInThemeAnimation Storyboard.TargetName="BackgroundImage" /> 
    </Storyboard> 

    <Storyboard x:Name="LoadGridStoryboard"> 
    <FadeOutThemeAnimation Storyboard.TargetName="BackgroundImage" /> 
    </Storyboard> 

</Page.Resources> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     Loaded='Grid_Loaded'> 
    <Grid.RowDefinitions> 
     <RowDefinition Height='3*' /> 
     <RowDefinition Height='13*' /> 
    </Grid.RowDefinitions> 
    <Button Click='Button_Click' 
      Content='Load Image' 
      HorizontalAlignment='Center' /> 
    <Image x:Name='BackgroundImage' 
      HorizontalAlignment='Center' 
      Source='assets/sunset.jpg' 
      Grid.RowSpan='1' 
      Grid.Row='1' /> 
    </Grid> 

代码

private void Button_Click(object sender, RoutedEventArgs e) { 

    // load image here... 

    LoadImageStoryboard.Begin(); 
} 

private void Grid_Loaded(object sender, RoutedEventArgs e) { 
    LoadGridStoryboard.Begin(); 
}