.NET MAUI中如何为集合/列表视图内的XAML元素设置名称？

下面是单个标签点击后隐藏的实现代码：

XAML代码 #

<Label Text="This is a text."
       IsVisible="true"
       x:Name="textLabel">
    <Label.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="LabelTapped"></TapGestureRecognizer>
    </Label.GestureRecognizers>
</Label>

后台代码 #

private void LabelTapped(object sender, TappedEventArgs e)
{
    textLabel.IsVisible = false;
}

点击该标签后，它会隐藏，这个实现简单直接。

当标签位于CollectionView中时，无法使用x:Name属性（要求名称唯一），可以通过以下两种方式实现相同效果：

方法1：直接通过sender获取当前标签 #

修改后台点击事件方法，从触发事件的sender对象直接获取对应的Label控件，再修改其显示状态：

后台代码 #

private void LabelTapped(object sender, TappedEventArgs e)
{
    if (sender is Label tappedLabel)
    {
        tappedLabel.IsVisible = false;
    }
}

CollectionView的XAML示例 #

<CollectionView ItemsSource="{Binding YourItemList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ItemText}"
                   IsVisible="true">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="LabelTapped" />
                </Label.GestureRecognizers>
            </Label>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方法2：使用MVVM绑定属性（推荐） #

更符合MVVM架构的方式是给集合中的每个数据项添加IsVisible属性，通过绑定控制标签显示状态：

数据项模型 #

public class YourItem : INotifyPropertyChanged
{
    private string _itemText;
    public string ItemText
    {
        get => _itemText;
        set
        {
            _itemText = value;
            OnPropertyChanged();
        }
    }

    private bool _isVisible = true;
    public bool IsVisible
    {
        get => _isVisible;
        set
        {
            _isVisible = value;
            OnPropertyChanged();
        }
    }

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

ViewModel中的命令 #

public class YourViewModel
{
    public ObservableCollection<YourItem> YourItemList { get; set; }

    public ICommand HideLabelCommand { get; }

    public YourViewModel()
    {
        YourItemList = new ObservableCollection<YourItem>
        {
            new YourItem { ItemText = "Item 1" },
            new YourItem { ItemText = "Item 2" }
        };

        HideLabelCommand = new Command<YourItem>(item =>
        {
            item.IsVisible = false;
        });
    }
}

CollectionView的XAML绑定 #

<CollectionView ItemsSource="{Binding YourItemList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ItemText}"
                   IsVisible="{Binding IsVisible}">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding BindingContext.HideLabelCommand, Source={x:Reference Name=YourPageName}}"
                                          CommandParameter="{Binding .}" />
                </Label.GestureRecognizers>
            </Label>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

注：需将XAML页面的x:Name设置为YourPageName，或根据实际页面名称调整。

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