问题描述:

Here is my window XAML code:

<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>

How the navigation currently works:

In the navigation, there are some buttons. Whenever the user clicks on one of them, the function ShowPage(UserControl page) is called from the click event, clears the Page grid from the current page (which is a UserControl), and then adds to it the desirable page:

public void ShowPage(UserControl page)

{

Page.Children.Clear();

Grid.SetRow(page, 2);

Grid.SetColumn(page, 0);

Page.Children.Add(page);

}

How I want the navigation to work:

The same way, except with fade-in and out animations when the user switches between pages. I cannot figure out the logic, particularly because the switch is executed in the code-behind and the animation is set in the XAML.

To summary, how to fade-in a grid on button click, and fade-out on another button click?

网友答案:

Here is an animation for your Grid which needs to go into your <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>

Now this is assigned to your Grid so in your click event handler you call it like so:

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();
相关阅读:
Top