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

運行該項目，你應該能夠通過點擊第一個用戶控件在行動中看到的動畫。希望這可以幫助！