WPF: Comment faire un fondu dans une grille lors d'un clic sur un bouton et un fondu sortant sur un autre clic sur un bouton?

Sipo

Voici mon code XAML de fenêtre:

<Window x:Class="WPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="MainScreen"
<DockPanel>
    <!--#region Navigation-->
    <StackPanel Style="{StaticResource stlNavigationBar}">
        <!-- some buttons -->
    </StackPanel>
    <!--#endregion-->

    <!--#region Page-->
    <Grid x:Name="Page">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
    <!--#endregion-->
</DockPanel>

Comment la navigation fonctionne actuellement:

Dans la navigation, il y a quelques boutons. Chaque fois que l'utilisateur clique sur l'un d'eux, la fonction ShowPage(UserControl page)est appelée à partir de l'événement de clic, efface la Pagegrille de la page actuelle (qui est a UserControl), puis y ajoute la page souhaitée:

public void ShowPage(UserControl page)
{
    Page.Children.Clear();
    Grid.SetRow(page, 2);
    Grid.SetColumn(page, 0);
    Page.Children.Add(page);
}

Comment je veux que la navigation fonctionne:

De la même manière, sauf avec des animations de fondu d'entrée et de sortie lorsque l'utilisateur passe d'une page à l'autre. Je ne peux pas comprendre la logique, en particulier parce que le commutateur est exécuté dans le code-behind et que l'animation est définie dans le XAML.

Pour résumer, comment faire un fondu dans une grille lors d'un clic sur un bouton et un fondu sortant sur un autre clic sur un bouton?

XAMlMAX

Voici une animation pour votre Gridqui doit entrer dans votre <Window.Resources>tag:

<Storyboard x:Key="gridLoading">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Page">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Page">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
 </DoubleAnimationUsingKeyFrames>


<Storyboard x:Key="gridLoadingBack">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Page">
    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Page">
    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
 </DoubleAnimationUsingKeyFrames>

Maintenant, ceci est attribué à votre Gridalors dans votre gestionnaire d'événements de clic, vous l'appelez comme ceci:

var storyBoardIn = (Storyboard)this.Resources["gridLoading"];
var storyBoardOut = (Storyboard)this.Resources["gridLoadingBack"];
//now depending on which storyboard you want to call just call Begin() method
storyBoardIn.Begin();
//or
storyBoardOut.Begin();

Articles connexes