如何将CollectionView项的VisualState传递给多层嵌套子VisualElement？

方法1：递归遍历子控件并手动切换状态 #

通过监听CollectionView的SelectionChanged事件，获取选中/取消选中的Border项，再递归遍历其所有子VisualElement，调用VisualStateManager.GoToState统一切换状态。

后台代码实现

首先实现递归更新子控件状态的方法：

private void UpdateChildVisualStates(VisualElement parent, string targetState)
{
    if (parent == null) return;
    
    // 切换当前控件的VisualState
    VisualStateManager.GoToState(parent, targetState);
    
    // 递归遍历所有层级的子控件
    foreach (var child in parent.Children)
    {
        if (child is VisualElement visualChild)
        {
            UpdateChildVisualStates(visualChild, targetState);
        }
    }
}

然后处理CollectionView的选中事件：

private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var collectionView = sender as CollectionView;
    if (collectionView == null) return;

    // 重置之前选中项的状态为Normal
    foreach (var prevItem in e.PreviousSelection)
    {
        var border = collectionView.GetItemContentView(prevItem) as Border;
        if (border != null)
        {
            UpdateChildVisualStates(border, "Normal");
        }
    }

    // 切换新选中项的状态为Selected
    foreach (var currItem in e.CurrentSelection)
    {
        var border = collectionView.GetItemContentView(currItem) as Border;
        if (border != null)
        {
            UpdateChildVisualStates(border, "Selected");
        }
    }
}

方法2：使用附加属性自动传递状态 #

创建一个附加属性，监听父控件的VisualStateChanged事件，自动将状态递归传递给所有子控件，无需在SelectionChanged里重复写逻辑。

附加属性实现

public static class VisualStatePropagator
{
    public static readonly BindableProperty PropagateVisualStateProperty =
        BindableProperty.CreateAttached(
            "PropagateVisualState", 
            typeof(bool), 
            typeof(VisualStatePropagator), 
            false, 
            propertyChanged: OnPropagateVisualStateChanged);

    public static bool GetPropagateVisualState(BindableObject view)
    {
        return (bool)view.GetValue(PropagateVisualStateProperty);
    }

    public static void SetPropagateVisualState(BindableObject view, bool value)
    {
        view.SetValue(PropagateVisualStateProperty, value);
    }

    private static void OnPropagateVisualStateChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is VisualElement element)
        {
            if ((bool)newValue)
                element.VisualStateChanged += OnVisualStateChanged;
            else
                element.VisualStateChanged -= OnVisualStateChanged;
        }
    }

    private static void OnVisualStateChanged(object sender, VisualStateChangedEventArgs e)
    {
        if (sender is VisualElement parent)
        {
            PropagateStateToChildren(parent, e.NewState.Name);
        }
    }

    private static void PropagateStateToChildren(VisualElement parent, string stateName)
    {
        foreach (var child in parent.Children)
        {
            if (child is VisualElement visualChild)
            {
                VisualStateManager.GoToState(visualChild, stateName);
                PropagateStateToChildren(visualChild, stateName);
            }
        }
    }
}

XAML中使用

给CollectionView项的根Border添加附加属性即可：

<CollectionView SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Border local:VisualStatePropagator.PropagateVisualState="True">
                <!-- 任意层级的嵌套子控件 -->
                <StackLayout>
                    <Label Text="{Binding Title}" />
                    <Frame Padding="10">
                        <Button Text="操作" />
                    </Frame>
                </StackLayout>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键注意事项 #

• 确保子控件的VisualState中定义了对应状态（比如Selected），如果没有，可在全局Style中统一配置。例如给Label添加Selected状态的样式：

  <Style TargetType="Label">
      <Setter Property="VisualStateManager.VisualStateGroups">
          <VisualStateGroupList>
              <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="Selected">
                      <VisualState.Setters>
                          <Setter Property="TextColor" Value="Blue" />
                      </VisualState.Setters>
                  </VisualState>
              </VisualStateGroup>
          </VisualStateGroupList>
      </Setter>
  </Style>
  

• 自定义控件需确保自身的VisualState逻辑支持目标状态切换。

内容的提问来源于stack exchange，提问作者H.A.H.