如何在 WPF 中对模板化父级 Panel.ZIndex 进行动画处理？

Question

我正在尝试在数据绑定堆栈面板中向前推进模板化项目（ZIndex）。由于 stackpanel 为其中的每个项目创建一个 ContentPresenter，因此我的视觉树如下所示：

ItemsControl
  Border
    ItemsPresenter
      StackPanel
        ContentPresenter
          ToggleButton
        ContentPresenter
          ToggleButton
        ContentPresenter
          ToggleButton

单击 ToggleButton 时，它会触发如下所示的故事板：

<Storyboard x:Key="MyStoryboard" >
    <Int32AnimationUsingKeyFrames BeginTime="0:0:0.000" Duration="0:0:0.350" 
          Storyboard.TargetProperty="TemplatedParent.(Panel.ZIndex)" >
        <Int32KeyFrameCollection>
            <DiscreteInt32KeyFrame KeyTime="0:0:0.000" Value="99" />
        </Int32KeyFrameCollection>
    </Int32AnimationUsingKeyFrames>
</Storyboard>       



<Style x:Key="SubStateOptionButtonStyle" TargetType="ToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">

                <!-- Toggle Button Contents here -->

                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource MyStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然而，TemplatedParent.(Panel.ZIndex) 给了我一个奇怪的异常：

Value不能为空。 参数名称：

System.Windows.DependencyObject.GetValue 处的 dp(DependencyProperty dp) 在System.Windows.Media.Animation.Storyboard.ProcessComplexPath（HybridDictionaryclockMappings，DependencyObject targetObject，PropertyPath路径，AnimationClock动画时钟，HandoffBehavior handoffBehavior，Int64层） 在System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive（时钟currentClock，DependencyObject containsObject，INameScope nameScope，DependencyObjectparentObject，StringparentObjectName，PropertyPathparentPropertyPath，HandoffBehavior handoffBehavior，HybridDictionaryclockMappings，Int64层） 在System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive（时钟currentClock，DependencyObject containsObject，INameScope nameScope，DependencyObjectparentObject，StringparentObjectName，PropertyPathparentPropertyPath，HandoffBehavior handoffBehavior，HybridDictionaryclockMappings，Int64层） 在System.Windows.Media.Animation.Storyboard.BeginCommon（DependencyObject containsObject，INameScope nameScope，HandoffBehavior handoffBehavior，Boolean isControllable，Int64层） 在 System.Windows.Media.Animation.BeginStoryboard.Begin(DependencyObject targetObject, INameScope nameScope, Int64 layer)

等。

我已经通过代码隐藏仔细检查了 ToggleButton 的 TemplatedParent 确实是 ContentPresenter，我可以使用类似的内容设置 ZIndex this：

Panel.SetZIndex((sender as ToggleButton).TemplatedParent as UIElement, 99);

但我想使用故事板为其制作动画，最好使用直接的 XAML，因为它需要在故事板的持续时间内保持前进，然后回到原来的地方。

我考虑过从 ItemsControl 继承以防止创建 ContentPresenter，但对于看起来应该很容易的事情来说，这是一个严厉的解决方案。

Answer 1

这是这个问题的答案：
http://social.msdn.microsoft.com/Forums/en/wpf/thread/7b9b8209-063d-46b2-a03f-98b393cf9514
（作者：Min Zhu [MSFT]）

您的原始代码不起作用，因为 TemplatedParent 不是依赖项属性。所以它不是动画的有效路径。

TI82 建议的代码是正确的。它仍然不起作用，因为 TemplatedParent 是按钮。但您想要设置动画的元素是项目容器。

要为项目容器设置动画，您可以使用 ItemsControl 的 ItemContainerStyle。 Button.Click 是一个冒泡路由事件，因此它也会从按钮冒泡到项目容器。

尝试以下代码。

<Window.Resources>
    <Storyboard x:Key="MyStoryboard">
      <ColorAnimation Storyboard.TargetName="ButtonRect" 
                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                            To="Red" 
                            Duration="0:0:0.350"
                            FillBehavior="Stop"/>
    </Storyboard>

    <Style x:Key="MyButtonStyle" TargetType="Button">
      <Setter Property="Panel.ZIndex" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentPresenter}, Mode=OneWayToSource, Path=(Panel.ZIndex)}"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid Height="60" Margin="0,0,0,-10" >
              <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15">
                <Rectangle x:Name="ButtonRect" RadiusX="15" RadiusY="15" Fill="AliceBlue" />
              </Border>
              <TextBlock Text="{Binding}" FontSize="15" TextAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                  <BeginStoryboard Storyboard="{StaticResource MyStoryboard}" />
                </EventTrigger.Actions>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <DataTemplate x:Key="MyButtonTemplate">
      <Grid>
        <Button Style="{StaticResource MyButtonStyle}" />
      </Grid>
    </DataTemplate>


    <Storyboard x:Key="MyStoryboard2">
      <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" 
       BeginTime="0:0:0.000" Duration="0:0:0.350" FillBehavior="Stop">
        <Int32KeyFrameCollection>
          <DiscreteInt32KeyFrame KeyTime="0:0:0.000" Value="99" />
        </Int32KeyFrameCollection>
      </Int32AnimationUsingKeyFrames>
    </Storyboard>

    <Style x:Key="MyItemContainerStyle">
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard Storyboard="{StaticResource MyStoryboard2}"/>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>

  <Grid>
    <ItemsControl ItemsSource="ABCDEF" 
           ItemTemplate="{StaticResource MyButtonTemplate}" 
           ItemContainerStyle="{StaticResource MyItemContainerStyle}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ItemsControl>
  </Grid>