我已经制作了一个使用用户控件和故事板的示例项目,希望它可以帮助你。
它是带有情节提要的 usercontrol xaml 类。
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="stackPanel">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="stackPanel">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-30"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="stackPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Stretch</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="stackPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<VerticalAlignment>Stretch</VerticalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<VerticalAlignment>Top</VerticalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid Name="grid1" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<StackPanel x:Name="stackPanel" Orientation="Vertical" Tapped="StackPanel_Tapped_1" RenderTransformOrigin="0.5,0.5" >
<StackPanel.Projection>
<PlaneProjection/>
</StackPanel.Projection>
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
<Button Content="alkdfjklajhklgh" Width="100" Height="50" Margin="2" />
<Button Content="alkdfjklajhklgh" Width="100" Height="50" Margin="2" />
<Button Content="alkdfjklajhklgh" Width="100" Height="50" Margin="2" />
</StackPanel>
</Grid>
在 stackpanel 点击我已经像这样在 MyUsercontrol1.cs 中启动了故事板
public sealed partial class MyUserControl1 : UserControl
{
public MyUserControl1()
{
this.InitializeComponent();
}
private void StackPanel_Tapped_1(object sender, TappedRoutedEventArgs e)
{
Storyboard1.Begin();
}
}
你可以像这样在你的主页中使用这个用户控件。
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<local:MyUserControl1 HorizontalAlignment="Left" Margin="585,366,0,0" VerticalAlignment="Top" Tapped="MyUserControl1_Tapped_1"/>
</Grid>