XAML动画：使用动画显示或隐藏控件

Question

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

我有用户控制1：

我有另一个用户控制2：

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

请输入

Answer 1

你需要的是一个故事板，这将使在用户与用户控件一号交互的用户控件2出现。这可以通过几种方式完成，例如，我们可以使用不透明度或可见性来隐藏和显示第二个用户控件。

这里是我的示例：

比方说，我有两个用户控件：

1用户控件（例如，图像浏览器）

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

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

一旦你创建了一个Storyboard，Blend会在录制模式。

然后，您选择第二个用户控件，并选择何时显示第二个用户控件。

在那个时候，我们可以在第二用户控件的不透明度值更改为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> 

最后，我们可以在代码中隐藏这样开始的故事板：

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

运行该项目，你应该能够通过点击第一个用户控件在行动中看到的动画。希望这可以帮助！