Question

这是我的窗口XAML代码：

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

当前导航的工作原理：

在导航中，有一些按钮。每当用户点击其中一个时，从click事件调用函数ShowPage(UserControl page)，从当前页面（Page）清除UserControl网格，然后添加到它是理想的页面：

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

我希望导航如何工作：

同样的方式，除了用户在页面之间切换时淡入和淡出动画。我无法弄清楚逻辑，特别是因为开关是在代码隐藏中执行的，而动画是在XAML中设置的。

总结一下，如何在按钮点击时淡入网格，在另一个按钮点击时淡出？

Answer 1

以下是需要进入Grid标记的<Window.Resources>动画：

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

现在这已分配给您的Grid，因此在您的点击事件处理程序中，您可以这样调用它：

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();

WPF：如何在点击按钮时淡入网格，在另一个按钮点击时淡出？

1 个答案: