xaml - 如何在 uwp 中动态生成 Storyboard

Question

我有一个场景，我必须在 Xaml 中为一组数据（我将绑定表单 ViewModel）生成相同的 StoryBoard 动画。

<Page    
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
 xmlns:miControls="using:Microsoft.UI.Xaml.Controls">
<Page.Resources>
        <miControls:ItemsRepeater x:Name="repmeaterTest">
            <miControls:ItemsRepeater.ItemTemplate>
                <DataTemplate>
                    <Storyboard x:Name="Storyboard1">
                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="DemoCircle" Storyboard.TargetProperty="(FrameworkElement.Width)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="50"/>
                            <EasingDoubleKeyFrame KeyTime="00:00:04" Value="250"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="DemoCircle" Storyboard.TargetProperty="(FrameworkElement.Height)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="50"/>
                            <EasingDoubleKeyFrame KeyTime="00:00:04" Value="250"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </DataTemplate>
            </miControls:ItemsRepeater.ItemTemplate>
        </miControls:ItemsRepeater>
    </Page.Resources>

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="clikToAnimate" Content="Animate" Click="clikToAnimate_Click" Margin="10"/>
    <Ellipse Name="DemoCircle" Stroke="Purple"  Width="50" Height="50" StrokeThickness="4" Fill="AntiqueWhite"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    List<int> noOfStoryBoard = new List<int> { 1,2,3,4,5}; 
    public MainPage()
    {
        this.InitializeComponent();

    }

    private void clikToAnimate_Click(object sender, RoutedEventArgs e)
    {
        Storyboard1.Begin();
    }
}

我想在 xaml 中为 noOfStoryBoard（即 5）动态生成 StoryBoard
有没有人有想法请分享，这是我尝试使用的项目中继器

标签： xamluwpuwp-xaml