C# 事件触发的ObservableCollection元素动画？

背景

namespace MyApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            Button[] MyBrick = new Button[4];
            ObservableCollection<Button> MyBuilding = new ObservableCollection<Button>();

            for (int i = 0; i < 4; i++)
            {
                MyBrick[i] = new Button();
                MyBrick[i].Content = "My Button  " + (i+1).ToString();
                MyBrick[i].Name = "MyButton" + (i + 1).ToString();
                MyBrick[i].ManipulationMode = ManipulationModes.All;
                MyBrick[i].RenderTransformOrigin = new Point(0.5, 0.5);
                MyBrick[i].RenderTransform = new CompositeTransform();
                MyBrick[i].Tapped += new TappedEventHandler(brick_Tapped);
                MyBuilding.Add(MyBrick[i]);
                MyStackPanel.Children.Add(MyBrick[i]);
            }

            MyBuilding.Remove(MyBrick[2]); // how to get this dynamically reflected in MyStackPanel?
        }

        private void brick_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TappedAnimation.Stop();
            TappedAnimation.SetValue(Storyboard.TargetNameProperty, (sender as Button).Name);
            TappedAnimation.Begin();
        }
    }
}

我正在用C#/XAML编写一个Windows应用商店应用程序，其中包含多个可观察集合。这些集合中的元素订阅许多事件，以启动XAML中定义的各种情节提要动画。 只要我手动将元素添加到XAML中定义的面板中，这一切都可以正常工作：元素将按预期显示并设置动画，例如点击时

我想做的事

但这忽略了ObservableCollection的一些强大功能：当集合发生更改（例如添加或删除元素）时，我仍然必须在相应的面板中手动反映这一点。 据我所知，解决方案是使用数据绑定将ObservableCollections连接到面板，以便在集合更改时动态更新这些面板。我想我也明白，使用StackPanel执行此操作需要ItemsControl（因为StackPanel没有ItemSource…？）

我被卡住的地方

我遇到的问题是动画：无论我怎么做，数据绑定面板和集合都会导致“无法解析TargetName”错误，这以前不是问题

更改下面的示例代码，以便使用数据绑定将MyStackPanel连接到MyBuilding ObservableCollection的正确方法是什么？非常感谢您的帮助

XAML

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    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="TappedAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-15"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="15"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="MyStackPanel" Grid.Column="0"/>
   </Grid>
</Page>

代码隐藏

namespace MyApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            Button[] MyBrick = new Button[4];
            ObservableCollection<Button> MyBuilding = new ObservableCollection<Button>();

            for (int i = 0; i < 4; i++)
            {
                MyBrick[i] = new Button();
                MyBrick[i].Content = "My Button  " + (i+1).ToString();
                MyBrick[i].Name = "MyButton" + (i + 1).ToString();
                MyBrick[i].ManipulationMode = ManipulationModes.All;
                MyBrick[i].RenderTransformOrigin = new Point(0.5, 0.5);
                MyBrick[i].RenderTransform = new CompositeTransform();
                MyBrick[i].Tapped += new TappedEventHandler(brick_Tapped);
                MyBuilding.Add(MyBrick[i]);
                MyStackPanel.Children.Add(MyBrick[i]);
            }

            MyBuilding.Remove(MyBrick[2]); // how to get this dynamically reflected in MyStackPanel?
        }

        private void brick_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TappedAnimation.Stop();
            TappedAnimation.SetValue(Storyboard.TargetNameProperty, (sender as Button).Name);
            TappedAnimation.Begin();
        }
    }
}

名称空间MyApp
{
公共密封部分类主页面：第页
{
公共主页（）
{
this.InitializeComponent（）；
按钮[]MyBrick=新按钮[4]；
ObservableCollection MyBuilding=新的ObservableCollection（）；
对于（int i=0；i<4；i++）
{
MyBrick[i]=新建按钮（）；
MyBrick[i].Content=“我的按钮”+（i+1）.ToString（）；
MyBrick[i].Name=“MyButton”+（i+1）.ToString（）；
MyBrick[i].manipionmode=manipionmodes.All；
MyBrick[i].RenderTransferorMorigin=新点（0.5,0.5）；
MyBrick[i].RenderTransform=new CompositeTransform（）；
MyBrick[i].Tapped+=新的TappedEventHandler（brick\u Tapped）；
MyBuilding.Add（MyBrick[i]）；
MyStackPanel.Children.Add（MyBrick[i]）；
}
MyBuilding.Remove（MyBrick[2]）；//如何在MyStackPanel中动态反映这一点？
}
私有空心砖（对象发送器，TappedRoutedEventArgs e）
{
TappedAnimation.Stop（）；
TappedAnimation.SetValue（Storyboard.TargetNameProperty，（发送者为按钮）.Name）；
点击animation.Begin（）；
}
}
}