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不是真实的对象，而是要用来创建对象的模板。所以从技术上讲，你的引用是行不通的。

关于实现，我有以下几点:

您在 ItemsPanel(无论如何都是模板)上设置了一些附加属性，但在 ItemsControl 本身上设置了一些附加属性。

你绑定(bind)CoolPanel的 MaxColumns 到该附加属性，使用 RelativeSource FindAncestor .

好吧，您可以省略附加属性，并使用 Tag :-) 确实， ItemsControl完全由您控制，因此滥用 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>