在 Windows 8 数据模板中运行故事板动画答案

【问题标题】：Running storyboard animations in windows 8 datatemplate在 Windows 8 数据模板中运行故事板动画
【发布时间】：2013-04-21 17:49:25
【问题描述】：

我正在尝试在 Windows 8 XAML 中创建一个待办事项列表。当我完成一个项目时，我想要一个故事板来擦除已完成的项目。如何让情节提要在数据模板中的项目上运行？当我从 C# 运行情节提要时，我收到一条错误消息：WinRT 信息：无法解析 TargetName rectangleToDelete。

我的故事板如下所示：

<Page.Resources>
    <Storyboard x:Name="AnimateDelete">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangleToDelete">
            <EasingDoubleKeyFrame KeyTime="0" Value="-0.333"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-327.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangleToDelete">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.333"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-163.25"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

我的 Listview 模板如下所示：

<ListView.ItemTemplate>
  <DataTemplate>

    <Grid>
      <StackPanel Orientation="Horizontal"
                  Margin="0,0,-393,-15">
        <CheckBox x:Name="CheckBoxComplete"
                  IsChecked="{Binding Complete, Mode=TwoWay}"
                  Checked="CheckBoxComplete_Checked"
                  Content="{Binding Text}"
                  Margin="10,5"
                  VerticalAlignment="Center"
                  MinWidth="300" />
        <Button x:Name="ButtonDelete"
                Click="ButtonDelete_Click"
                Content="Delete" />
      </StackPanel>
      <Rectangle x:Name="rectangle"
                 Fill="#FFF4F4F5"
                 Stroke="Black"
                 StrokeThickness="0"
                 RenderTransformOrigin="0.5,0.5"
                 Margin="319,2,-300,-14"
                 Height="34"
                 VerticalAlignment="Top">
        <Rectangle.RenderTransform>
          <CompositeTransform ScaleX="-1" />
        </Rectangle.RenderTransform>
      </Rectangle>
    </Grid>
  </DataTemplate>
</ListView.ItemTemplate>

我的代码隐藏如下所示：

        Button btn = (Button)sender;
        TodoItem item = btn.DataContext as TodoItem;

        StackPanel stk = (StackPanel)btn.Parent;
        Grid grd = (Grid)stk.Parent;
        Rectangle rect = (Rectangle)grd.Children[1];
        rect.Name = "rectangleToDelete";
        AnimateDelete.Begin();

如您所见，我尝试找到该矩形并为其指定正确的名称，但我得到了同样的错误。

任何帮助将不胜感激！

谢谢，汤姆

【问题讨论】：

标签： windows xaml windows-runtime microsoft-metro winrt-xaml

【解决方案1】：

DataTemplate 的名称范围与外部的名称范围不同。您可以将该 DataTemplate 和 Storyboard 的内容放在它们自己的 UserControl 中以使其工作。

【讨论】：