在Windows 8 datatemplate中运行storyboard动画

时间:2013-04-21 17:49:26

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

我正在尝试在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();

正如您所看到的,我已经尝试找到矩形并给它正确的名称,但我得到了同样的错误。

任何帮助将不胜感激!

谢谢,汤姆

1 个答案:

答案 0 :(得分:2)

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