WPF VisualStateManager - 如何为模板化子项内的属性设置动画

Question

我有一个 UserControl，其中包含一个具有自定义 ItemsPanel 的 ItemsControl，其依赖属性名为“MaxColumns”。我想定义一个 VisualState（在 UserControl 级别），它可以为自定义面板上的“MaxColumns”属性设置动画。

本质上，XAML 看起来像：

<Grid x:Name="LayoutRoot">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="MyCoolState">
      <VisualState x:Name="Normal" />
      <VisualState x:Name="NotNormal">
        <Storyboard>
          <Int32Animation Duration="0"
                          Storyboard.TargetName="Details"
                          Storyboard.TargetProperty="(ItemsControl.ItemsPanel).(local:CoolPanel.MaxColumns)"
                          To="4" />
        </Storyboard>
      </VisualState>
    </VisualStateGroup>
  <VisualStateManager>
  <ItemsControl x:Name="Details">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <local:CoolPanel x:Name="MyCoolPanel"
                         MaxColumns="1" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</Grid>

但是，我一辈子都无法弄清楚动画的正确语法是什么？如果我使用上面显示的语法，则会收到错误：“'ItemsPanel' 属性未指向路径 '(0).(1)' 中的 DependencyObject”。我认为这是因为它在技术上指向 ItemsPanelTemplate？

如果我直接在 Storyboard.TargetName 属性中引用“MyCoolPanel”，则会收到有关名称范围的错误（可能是因为“MyCoolPanel”不在 LayoutRoot 的名称范围内）。我不知道是否有办法限定“TargetName”中的名称范围？

有人有解决方案吗？看起来应该可以在不诉诸自定义附加属性的情况下完成？我的意思是，我并不反对附加属性，但我觉得您应该能够直接在 XAML 中执行此操作？

Answer 1

好吧，事实上 ItemsPanel 不是一个真实的对象，而是一个用于创建该对象的模板。所以从技术上讲，你的参考是行不通的。

我有以下关于实现的信息：

1. 您在 ItemsPanel（无论如何都是一个模板）上设置一些附加属性，但在 ItemsControl 本身上设置一些附加属性。
2. 您可以使用 RelativeSource FindAncestor 将 CoolPanel 的 MaxColumns 绑定到该附加属性。

好吧，您可以省略附加属性，并使用 Tag :-) 事实上，ItemsControl 完全在您的控制之下，因此滥用 Tag 并不构成犯罪。 code>Tag 一点点。

所以代码会是这样的：

<Grid x:Name="LayoutRoot">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="MyCoolState">
      <VisualState x:Name="Normal" />
      <VisualState x:Name="NotNormal">
        <Storyboard>
          <Int32Animation Duration="0"
                          Storyboard.TargetName="Details"
                          Storyboard.TargetProperty="Tag"
                          To="4" />
        </Storyboard>
      </VisualState>
    </VisualStateGroup>
  <VisualStateManager>
  <ItemsControl x:Name="Details" Tag="3">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <local:CoolPanel
            MaxColumns="{Binding Tag, RelativeSource={RelativeSource FindAncestor,
                                           AncestorType=ItemsControl}}" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</Grid>