XAML 动画 : Using animation to show or hide controls

Question

我正在寻找一些关于如何使用 XAMl 动画启用以下内容的指南/示例。我有一个显示一些图像的简单控件。单击该控件时，我需要显示另一个控件，该控件具有用于对图像进行操作的按钮。

我有用户控制 1:

我有另一个用户控件 2:

使用动画，当用户点击图像查看器时，我需要在左角的 ImageViewer 顶部显示 ImageControl。

请提供意见

Answer 1

您需要的是一个 Storyboard ，当用户与第一个 UserControl 交互时，它会使 UserControl 2 出现。这可以通过多种方式完成，例如，我们可以使用不透明度或可见性隐藏和显示第二个 UserControl。

这是我的示例:

假设我有两个用户控件:

第一个用户控件(例如，ImageViewer)

<UserControl
    x:Class="XamlAnimation.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Cyan">
    </Grid>
</UserControl>

第二个用户控件(例如，一些按钮或控件)

<UserControl
    x:Class="XamlAnimation.MyUserControl2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <StackPanel Orientation="Horizontal" Background="Black" 
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</UserControl>

这是包含两个用户控件的页面:

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

请注意，我将第二个 UserControl 的不透明度设置为零，这将在加载页面时隐藏第二个 UserControl。

创建 Storyboard的最简单方法是使用 Blend。我们首先使用 Blend 打开页面并创建一个新的 Storyboard 资源。

创建 Storyboard 后，Blend 将处于录制模式。

然后您选择第二个用户控件并选择您希望第二个用户控件出现的时间。

那时，我们可以将 2nd UserControl 的不透明度值更改为 100%，这样按钮就会显示出来。如果需要，可以应用缓动函数使动画看起来流畅。

现在，关闭 Blend 并在 Visual Studio 中重建项目。您应该会在页面上看到 Storyboard 资源。

<Page
    x:Class="XamlAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="ShowUserControl2">
            <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myUserControl2" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 Tapped="MyUserControl1_Tapped"/>
        <local:MyUserControl2 x:Name="myUserControl2" Opacity="0"/>
    </Grid>
</Page>

最后，我们可以像这样在代码隐藏中启动 Storyboard:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }

    private void MyUserControl1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        ShowUserControl2.Begin();
    }
}

运行该项目，您应该能够通过点击第一个 UserControl 来查看正在运行的动画。希望这对您有所帮助!