如何在CollectionView选中项时找到HorizontalStackLayout并修改其属性？

问题原因 #

x:Name定义在DataTemplate内部的元素，作用域仅限于当前模板实例的可视化树，无法通过CollectionView直接调用FindByName获取，因此返回null。

方法一：使用MVVM数据绑定（推荐） #

通过给数据模型添加选中状态属性，绑定到HorizontalStackLayout的属性，实现数据驱动UI更新，符合.NET MAUI/Xamarin.Forms的设计模式。

1. 修改数据模型
   添加IsSelected属性并实现INotifyPropertyChanged：

public class Item : INotifyPropertyChanged
{
    public string Title { get; set; }

    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 添加布尔转属性的转换器
   以修改背景色为例，创建转换器：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Colors.LightBlue : Colors.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. 修改XAML代码
   绑定HorizontalStackLayout的属性到IsSelected，并引用转换器：

<ContentPage.Resources>
    <local:BoolToColorConverter x:Key="BoolToColorConverter" />
</ContentPage.Resources>

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single" SelectionChanged="OnItemSelected">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout 
                BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}}">
                <Label Text="{Binding Title}" />
            </HorizontalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

4. 处理选中事件
   在事件中更新选中项的IsSelected状态：

private void OnItemSelected(object sender, SelectionChangedEventArgs e)
{
    // 取消之前选中项的状态
    if (e.PreviousSelection != null)
    {
        foreach (Item prevItem in e.PreviousSelection)
        {
            prevItem.IsSelected = false;
        }
    }

    // 设置当前选中项的状态
    if (e.CurrentSelection != null)
    {
        foreach (Item currentItem in e.CurrentSelection)
        {
            currentItem.IsSelected = true;
        }
    }
}

方法二：直接获取可视化元素（不推荐） #

通过遍历可视化树或使用框架API获取选中项对应的View实例，再查找内部的HorizontalStackLayout。

.NET MAUI版本

private void OnItemSelected(object sender, SelectionChangedEventArgs e)
{
    var collectionView = sender as CollectionView;
    if (collectionView == null || e.CurrentSelection.Count == 0) return;

    // 获取选中的数据项
    var selectedItem = e.CurrentSelection.FirstOrDefault();
    // 获取对应的可视化元素
    var itemView = collectionView.GetItemView(selectedItem);
    // 查找HorizontalStackLayout
    var horizontalStackLayout = itemView.FindByName<HorizontalStackLayout>("horizontalStackLayout");

    if (horizontalStackLayout != null)
    {
        // 修改属性，例如背景色
        horizontalStackLayout.BackgroundColor = Colors.LightBlue;

        // 重置之前选中项的样式
        if (e.PreviousSelection.Count > 0)
        {
            var prevItem = e.PreviousSelection.FirstOrDefault();
            var prevItemView = collectionView.GetItemView(prevItem);
            var prevStackLayout = prevItemView.FindByName<HorizontalStackLayout>("horizontalStackLayout");
            prevStackLayout?.SetValue(VisualElement.BackgroundColorProperty, Colors.Transparent);
        }
    }
}

Xamarin.Forms版本

需要手动遍历可视化树：

private T FindVisualElementByName<T>(Element parent, string name) where T : VisualElement
{
    if (parent is T element && element.AutomationId == name)
        return element;

    foreach (var child in parent.Descendants())
    {
        if (child is T target && target.AutomationId == name)
            return target;
    }
    return null;
}

private void OnItemSelected(object sender, SelectionChangedEventArgs e)
{
    var collectionView = sender as CollectionView;
    if (collectionView == null || e.CurrentSelection.Count == 0) return;

    var selectedItem = e.CurrentSelection.FirstOrDefault();
    var templatedItem = collectionView.TemplatedItems.FirstOrDefault(v => v.BindingContext == selectedItem);
    
    if (templatedItem is ViewCell viewCell)
    {
        var horizontalStackLayout = FindVisualElementByName<HorizontalStackLayout>(viewCell.View, "horizontalStackLayout");
        if (horizontalStackLayout != null)
        {
            horizontalStackLayout.BackgroundColor = Color.LightBlue;
        }
    }

    // 重置之前选中项样式
    if (e.PreviousSelection.Count > 0)
    {
        var prevItem = e.PreviousSelection.FirstOrDefault();
        var prevTemplatedItem = collectionView.TemplatedItems.FirstOrDefault(v => v.BindingContext == prevItem);
        if (prevTemplatedItem is ViewCell prevViewCell)
        {
            var prevStackLayout = FindVisualElementByName<HorizontalStackLayout>(prevViewCell.View, "horizontalStackLayout");
            prevStackLayout?.SetValue(VisualElement.BackgroundColorProperty, Color.Transparent);
        }
    }
}

内容的提问来源于stack exchange，提问作者forsberg