ListView 中突出显示的选定项 Xamarin.Forms

Posted 2023-03-06

【中文标题】ListView 中突出显示的选定项 Xamarin.Forms

【英文标题】：Selected Item Highlighted Xamarin.Forms in a ListView

【发布时间】：2016-07-31 21:29:18

【问题描述】：

目前，我创建了一个自定义CellView 模板，可以有效地为整个单元格使用背景图像，并具有文本覆盖。

我通过绝对布局完成此操作，并将自定义单元格模板绑定到我的ListView。 我的问题是，我似乎无法再在选择时突出显示单元格。

我猜我的问题源于图像占用了单元格背景的 100%（首先将其添加到堆栈布局中，而不是作为正确的背景图像），或者我的自定义 ViewCell 实现没有实现ItemSelection 正确。

我的印象是ListView 单元格默认情况下会有某种选择突出显示。它使用默认的ListView，而我使用的是相对布局，图像外部有一小部分单元格。 这是我能够突出显示单元格的地方。

图像从未真正突出显示。所以这就是我怀疑图像是问题的原因。

我想要完成的事情

点击时突出显示整个单元格图像，并用某种颜色显示它已被选中。在共享代码 (PCL) 内。

到目前为止，我已经尝试创建一个不可见的BoxView，它具有一些在点击时可见的透明度；但是我不知道如何使用ItemSelected() 来实现这一点。我不是在要求一个编码的解决方案，而是在正确的方向上指指点点；但是，我不会对编码解决方案提出异议。

public CustomViewCell()
    
        var someLabel= new Label();
        someLabel.SetBinding (Label.TextProperty, "someLabel");

        var someImage = new Image () 
            Aspect = Aspect.AspectFill,
        ;
        someImage.SetBinding (Image.SourceProperty, "ImageSource");

        AbsoluteLayout.SetLayoutFlags (someImage, AbsoluteLayoutFlags.All);
        AbsoluteLayout.SetLayoutBounds (someImage, new Rectangle (0f, 0f, 1f, 1f));

        AbsoluteLayout.SetLayoutFlags (someLabel, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds (someLabel, 
            new Rectangle (0.1, 0.85, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)
        );

        AbsoluteLayout theLayout = new AbsoluteLayout 
            HeightRequest = 50,
            BackgroundColor = Color.Black
        ;

        theLayout.Children.Add (someImage);
        theLayout.Children.Add (someLabel);

        this.View = theLayout;
    

在此之后，我只有绑定的基本访问器，并创建了列表/应用了模板。如果需要，我可以提供，但它们是基本的。

【参考方案1】：

嘿。 为此，您必须使用 Item Selected Property 并将 this 与您的变量绑定，然后执行您想要的操作（例如，对列表中的每个项目使用 Name 属性以检查 this）。

我没有测试过，我想你会明白的。

这是你的清单：

MenuItems = new ObservableCollection<MasterPageMenuItemModel>
            
                new MasterPageMenuItemModel Name = "GistsPage", ImageSource = GistsPageImagePath,
                new MasterPageMenuItemModel Name = "IssueDashboardPage", ImageSource = IssueDashboardPageImagePath,
                new MasterPageMenuItemModel Name = "BookmarksPage", ImageSource = BookmarksPageImagePath,
                new MasterPageMenuItemModel Name = "ReportAnIssuePage", ImageSource = ReportAnIssuePageImagePath
            ;

好的，现在你有了 Name 属性。 然后使用“选定项”将其与您的属性绑定：

<ListView x:Name="MasterPageMenu"
                  SeparatorColor="Transparent"
                  AbsoluteLayout.LayoutBounds="Binding MasterMenuBounds"
                  AbsoluteLayout.LayoutFlags="None"
                  ItemsSource="Binding MenuItems"
                  SelectedItem="Binding MenuItemSelectedProperty, Mode=TwoWay">

为了在需要时检查它，您可以使用 ItemSelected 事件。 当它提出使用带有 Name 属性的可绑定属性并使用它做你想做的事情时。