XAML动画:使用动画显示或隐藏控件
问题描述:
我正在寻找一些关于如何使用XAMl动画启用以下指南/示例。 我有一个简单的控件,显示一些图像。点击控件时,我需要显示另一个控件,该控件具有用于在图像上操作的按钮。XAML动画:使用动画显示或隐藏控件
我有用户控制1:
我有另一个用户控制2:
使用动画我需要显示在图像浏览器顶部的ImageControl在左上角当用户点击图像查看器时。
请输入
答
你需要的是一个故事板,这将使在用户与用户控件一号交互的用户控件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();
}
}
运行该项目,你应该能够通过点击第一个用户控件在行动中看到的动画。希望这可以帮助!