Tell me, please, how to animate the Background 'a Grid ' a shift (as a background - pictures) and at the same time leave good articles on animation or 3D in WPF and other interesting goodies. Thank you for help!

    1 answer 1

    Simplest example

     <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" x:Class="WpfApplication1.MainWindow" Title="MainWindow" Height="350" Width="525"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="VisualStateGroup"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:1"/> <VisualTransition GeneratedDuration="0:0:1" To="VisualStateFirstImage"> <ei:ExtendedVisualStateManager.TransitionEffect> <ee:BlindsTransitionEffect/> </ei:ExtendedVisualStateManager.TransitionEffect> </VisualTransition> <VisualTransition GeneratedDuration="0:0:1" To="VisualStateSecondImage"> <ei:ExtendedVisualStateManager.TransitionEffect> <ee:RippleTransitionEffect/> </ei:ExtendedVisualStateManager.TransitionEffect> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="VisualStateFirstImage"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image2"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="VisualStateSecondImage"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image2"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <VisualStateManager.CustomVisualStateManager> <ei:ExtendedVisualStateManager/> </VisualStateManager.CustomVisualStateManager> <Button Content="VisualStateFirstImage" Height="23" HorizontalAlignment="Left" Margin="8,35,0,0" x:Name="button1" VerticalAlignment="Top" Width="143" Click="button1_Click" /> <Button Content="VisualStateSecondImage" Height="23" HorizontalAlignment="Left" Margin="8,8,0,0" x:Name="button2" VerticalAlignment="Top" Width="143" Click="button2_Click" /> <Image x:Name="image1" Margin="149,74,8,8" Source="pack://siteoforigin:,,,/BPS_background.png"/> <Image x:Name="image2" Margin="48,74,109,8" Opacity="0" Source="meditationdifferences.jpg"/> </Grid> </Window> private void button1_Click(object sender, System.Windows.RoutedEventArgs e) { VisualStateManager.GoToElementState(this.Content as FrameworkElement, "VisualStateFirstImage", true); } private void button2_Click(object sender, System.Windows.RoutedEventArgs e) { VisualStateManager.GoToElementState(this.Content as FrameworkElement, "VisualStateSecondImage", true); }

    ACCORDINGLY we need 2 additional standard libraries Microsoft.Expression.Effects, Microsoft.Expression.Interactions.