c# - How to make an animation when changing window

Question

Hello I have a code where it switches from one Grid to another, this part of the code works fine.

However, I would like to know how I can create an animation before changing the Grid to another to change the opacity of the Grid from 1 to 0.

I would also like to know a way on how I can link my ListBoxItem to change as the Grid changes.

I didn't like the way my code was written in the C # part, is it possible to make these changes from one Grid to another using only XAML?

My Xaml Code:

<Grid>
    <Grid Height="300" Width="600">
        <Grid Name="Blue"  Background="Blue" Visibility="Visible">
            <TextBlock Text="Blue" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
        </Grid>
        <Grid Name="Yellow" Background="Yellow" Visibility="Collapsed">
            <TextBlock Text="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
        </Grid>
        <Grid Name="Red" Background="Red" Visibility="Collapsed">
            <TextBlock Text="Red" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
        </Grid>

        <Button Width="80" Height="40" Content="Previous" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Previous" />
        <Button Width="80" Height="40" Content="Next" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Next" />

        <ListBox Background="Transparent" VerticalAlignment="Bottom" HorizontalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem Name="G1" Content="Blue"/>
            <ListBoxItem Name="G2" Content="Yellow"/>
            <ListBoxItem Name="G3" Content="Red"/>
        </ListBox>
    </Grid>
</Grid>

My C# code:

    private void Previous(object sender, RoutedEventArgs e)
    {
        if (Blue.Visibility == Visibility.Visible)
        {
            Blue.Visibility = Visibility.Collapsed;
            Red.Visibility = Visibility.Visible;
        } else if(Red.Visibility == Visibility.Visible)
        {
            Red.Visibility = Visibility.Collapsed;
            Yellow.Visibility = Visibility.Visible;
        } else if(Yellow.Visibility == Visibility.Visible)
        {
            Yellow.Visibility = Visibility.Collapsed;
            Blue.Visibility = Visibility.Visible;
        }
    }

    private void Next(object sender, RoutedEventArgs e)
    {
        if (Blue.Visibility == Visibility.Visible)
        {
            Blue.Visibility = Visibility.Collapsed;
            Yellow.Visibility = Visibility.Visible;
        }
        else if (Yellow.Visibility == Visibility.Visible)
        {
            Yellow.Visibility = Visibility.Collapsed;
            Red.Visibility = Visibility.Visible;
        } else if (Red.Visibility == Visibility.Visible)
        {
            Red.Visibility = Visibility.Collapsed;
            Blue.Visibility = Visibility.Visible;
        }
    }

标签： c#wpfxaml