使用 Xamarin.Forms，如何定义选定/点击的 ListView 项的突出显示/背景颜色？
（我的列表是黑色背景和白色文本颜色，因此 iOS 上的默认突出显示颜色太亮。相比之下，在 Android 上根本没有突出显示 - 直到一条微妙的水平灰线。）
示例：（左：iOS，右：Android；同时按下“Barn2”）
【问题讨论】：
标签： android ios listview xamarin xamarin.forms
在 Android 中，只需在 Resources\values 下编辑您的 styles.xml 文件，添加以下内容：
<resources>
<style name="MyTheme" parent="android:style/Theme.Material.Light.DarkActionBar">
<item name="android:colorPressedHighlight">@color/ListViewSelected</item>
<item name="android:colorLongPressedHighlight">@color/ListViewHighlighted</item>
<item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
<item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
<item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
</style>
<color name="ListViewSelected">#96BCE3</color>
<color name="ListViewHighlighted">#E39696</color>
</resources>
【讨论】：
看起来实际上有一种跨平台的方法可以在 iOS 和 Android 上运行（不确定 Windows）。它只使用绑定，不需要自定义渲染器（这似乎很少见）。这是很多谷歌搜索的混搭，所以感谢我可能借过的任何人......
我假设是 ViewCells，但这也适用于文本或图像单元格。除了典型的文字、图片等，我这里只包括相关代码。
在您的页面上执行以下操作：
MyModel model1 = new MyModel();
MyModel model2 = new MyModel();
ListView list = new ListView
{
ItemsSource = new List<MyModel> { model1, model2 };
ItemTemplate = new DataTemplate( typeof(MyCell) )
};
您的自定义模型可能如下所示：
public class MyModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private Color _backgroundColor;
public Color BackgroundColor
{
get { return _backgroundColor; }
set
{
_backgroundColor = value;
if ( PropertyChanged != null )
{
PropertyChanged( this, new PropertyChangedEventArgs( "BackgroundColor" ) );
}
}
}
public void SetColors( bool isSelected )
{
if ( isSelected )
{
BackgroundColor = Color.FromRgb( 0.20, 0.20, 1.0 );
}
else
{
BackgroundColor = Color.FromRgb( 0.95, 0.95, 0.95 );
}
}
}
然后，对于您的 ItemTemplate，您需要一个类似这样的自定义单元格类：
public class MyCell : ViewCell
{
public MyCell() : base()
{
RelativeLayout layout = new RelativeLayout();
layout.SetBinding( Layout.BackgroundColorProperty, new Binding( "BackgroundColor" ) );
View = layout;
}
}
然后在您的 ItemSelected 事件处理程序中，执行以下操作。请注意，'selected' 是 MyModel 的一个实例，用于跟踪当前选定的项目。我在这里只显示背景颜色，但我也使用这种技术来反转突出显示文本和细节文本颜色。
private void ItemSelected( object sender, ItemTappedEventArgs args )
{
// Deselect previous
if ( selected != null )
{
selected.SetColors( false );
}
// Select new
selected = (list.SelectedItem as MyModel);
selected.SetColors( true );
}
【讨论】：
ListView.SeparatorVisibility = SeparatorVisibility.None; ListView.SeparatorColor= Color.Transparent; 应该可以解决您提到的问题。
Color 与模型本身并没有真正的关系——它是一个严格的 UI 问题和框架依赖（在这种情况下是表单）。在 XAML 中使用转换器或样式触发器在模型中设置 IsSelected 标志将是更可移植的解决方案。
解决方案：
在自定义ViewCellRenderer 中，您可以设置SelectedBackgroundView。只需使用您选择的背景颜色创建一个新的UIView 即可。
public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
{
var cell = base.GetCell(item, reusableCell, tv);
cell.SelectedBackgroundView = new UIView {
BackgroundColor = UIColor.DarkGray,
};
return cell;
}
结果：
注意：
对于 Xamarin.Forms，创建一个 new UIView 似乎很重要，而不仅仅是设置当前的背景颜色。
解决方案：
我在Android上找到的解决方案有点复杂：
在Resources>drawable 文件夹中创建一个新的可绘制对象ViewCellBackground.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="#333333" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</selector>
它为 UI 元素的默认状态和“按下”状态定义了具有不同颜色的实体形状。
为您的ViewCell 的View 使用继承类，例如：
public class TouchableStackLayout: StackLayout
{
}
为此类设置后台资源实现自定义渲染器：
public class ElementRenderer: VisualElementRenderer<Xamarin.Forms.View>
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
{
SetBackgroundResource(Resource.Drawable.ViewCellBackground);
base.OnElementChanged(e);
}
}
结果：
【讨论】：
SetNeedsDisplay 或 ``` SetNeedsLayout``` 不起作用。但这并不重要，因为分配new UIView {...} 是一个非常短的解决方法。
要更改所选ViewCell 的颜色，有一个简单的过程，无需使用自定义渲染器。使您的ViewCell 的Tapped 事件如下
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped">
<Label Text="{Binding StudentName}" TextColor="Black" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
在您的 ContentPage 或 .cs 文件中，实现事件
private void ViewCell_Tapped(object sender, System.EventArgs e)
{
if(lastCell!=null)
lastCell.View.BackgroundColor = Color.Transparent;
var viewCell = (ViewCell)sender;
if (viewCell.View != null)
{
viewCell.View.BackgroundColor = Color.Red;
lastCell = viewCell;
}
}
在您的ContentPage 顶部声明lastCell 就像这样ViewCell lastCell;
【讨论】：
仅适用于 Android
在ProjectName.Android/Resources/values/styles.xml
下添加您的自定义主题或默认主题<item name="android:colorActivatedHighlight">@android:color/transparent</item>
【讨论】：
我有一个类似的过程，完全跨平台，但是我自己跟踪选择状态，我已经在 XAML 中完成了。
<ListView x:Name="ListView" ItemsSource="{Binding ListSource}" RowHeight="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<ContentView Padding="10" BackgroundColor="{Binding BackgroundColor}">
<Label Text="{Binding Name}" HorizontalOptions="Center" TextColor="White" />
</ContentView>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
然后在ItemTapped事件中
ListView.ItemTapped += async (s, e) =>
{
var list = ListSource;
var listItem = list.First(c => c.Id == ((ListItem)e.Item).Id);
listItem.Selected = !listItem.Selected;
SelectListSource = list;
ListView.SelectedItem = null;
};
如您所见，我只是将 ListView.SelectedItem 设置为 null 以删除任何发挥作用的平台特定选择样式。
在我的模型中
private Boolean _selected;
public Boolean Selected
{
get => _selected;
set
{
_selected = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("BackgroundColor"));
}
}
public Color BackgroundColor
{
get => Selected ? Color.Black : Color.Blue;
}
【讨论】：
ItemSelected事件，所以在我的情况下，进一步的代码遇到了异常。
我遇到了同样的问题，我也按照 Falko 的建议通过为 iOS 创建自定义渲染器解决了这个问题，但是，我避免了对 Android 的样式修改，我也想出了一种方法来为 Android 使用自定义渲染器。
对于 android 视图单元格，选择的标志总是为假的，这有点奇怪，这就是为什么我必须创建一个新的私有属性来跟踪它。但除此之外，如果您想为两个平台使用自定义渲染器，我认为这遵循更合适的模式，在我的情况下，我为 TextCell 做了它，但我相信它适用于其他 CellViews 的相同方式。
Xamarin 表单
using Xamarin.Forms;
public class CustomTextCell : TextCell
{
/// <summary>
/// The SelectedBackgroundColor property.
/// </summary>
public static readonly BindableProperty SelectedBackgroundColorProperty =
BindableProperty.Create("SelectedBackgroundColor", typeof(Color), typeof(CustomTextCell), Color.Default);
/// <summary>
/// Gets or sets the SelectedBackgroundColor.
/// </summary>
public Color SelectedBackgroundColor
{
get { return (Color)GetValue(SelectedBackgroundColorProperty); }
set { SetValue(SelectedBackgroundColorProperty, value); }
}
}
iOS
public class CustomTextCellRenderer : TextCellRenderer
{
public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
{
var cell = base.GetCell(item, reusableCell, tv);
var view = item as CustomTextCell;
cell.SelectedBackgroundView = new UIView
{
BackgroundColor = view.SelectedBackgroundColor.ToUIColor(),
};
return cell;
}
}
安卓
public class CustomTextCellRenderer : TextCellRenderer
{
private Android.Views.View cellCore;
private Drawable unselectedBackground;
private bool selected;
protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
{
cellCore = base.GetCellCore(item, convertView, parent, context);
// Save original background to rollback to it when not selected,
// We assume that no cells will be selected on creation.
selected = false;
unselectedBackground = cellCore.Background;
return cellCore;
}
protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs args)
{
base.OnCellPropertyChanged(sender, args);
if (args.PropertyName == "IsSelected")
{
// I had to create a property to track the selection because cellCore.Selected is always false.
// Toggle selection
selected = !selected;
if (selected)
{
var customTextCell = sender as CustomTextCell;
cellCore.SetBackgroundColor(customTextCell.SelectedBackgroundColor.ToAndroid());
}
else
{
cellCore.SetBackground(unselectedBackground);
}
}
}
}
...然后，在 .xaml 页面中，您需要将 XMLNS 引用添加回新的 CustomViewCell...
xmlns:customuicontrols="clr-namespace:MyMobileApp.CustomUIControls"
不要忘记在 XAML 中实际使用新的自定义控件。
【讨论】：
这是纯粹的跨平台和简洁的方式：
1) 定义触发动作
namespace CustomTriggers {
public class DeselectListViewItemAction:TriggerAction<ListView> {
protected override void Invoke(ListView sender) {
sender.SelectedItem = null;
}
}
}
2) 将上述类实例应用为 XAML 中的 EventTrigger 操作，如下所示
<ListView x:Name="YourListView" ItemsSource="{Binding ViewModelItems}">
<ListView.Triggers>
<EventTrigger Event="ItemSelected">
<customTriggers:DeselectListViewItemAction></customTriggers:DeselectListViewItemAction>
</EventTrigger>
</ListView.Triggers>
</ListView>
别忘了加xmlns:customTriggers="clr-namespace:CustomTriggers;assembly=ProjectAssembly"
注意：由于您的所有项目都未处于选定模式，因此选择样式不会在任何一个平台上应用。
【讨论】：
ListView 中的项目被点击但想要禁止选定项目时启动详细视图的情况下很有用。
我有 & 使用类似于 @adam-pedley 的解决方案。 没有自定义渲染器，在 xaml 中我绑定背景 ViewCell 属性
<ListView x:Name="placesListView" Grid.Row="2" Grid.ColumnSpan="3" ItemsSource="{Binding PlacesCollection}" SelectedItem="{Binding PlaceItemSelected}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="{Binding IsSelected,Converter={StaticResource boolToColor}}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding DisplayName}" Style="{StaticResource blubeLabelBlackItalic}" FontSize="Default" HorizontalOptions="Start" />
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding DisplayDetail}" Style="{StaticResource blubeLabelGrayItalic}" FontSize="Small" HorizontalOptions="Start"/>
<!--
<Label Grid.RowSpan="2" Grid.ColumnSpan="2" Text="{Binding KmDistance}" Style="{StaticResource blubeLabelGrayItalic}" FontSize="Default" HorizontalOptions="End" VerticalOptions="Center"/>
-->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
在代码 (MVVM) 中，我保存由 boolToColor 转换器选择的最后一个项目，我更新背景颜色
public class BoolToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? Color.Yellow : Color.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return (Color)value == Color.Yellow ? true : false;
}
}
PlaceItem LastItemSelected;
PlaceItem placeItemSelected;
public PlaceItem PlaceItemSelected
{
get
{
return placeItemSelected;
}
set
{
if (LastItemSelected != null)
LastItemSelected.IsSelected = false;
placeItemSelected = value;
if (placeItemSelected != null)
{
placeItemSelected.IsSelected = true;
LastItemSelected = placeItemSelected;
}
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(PlaceItemSelected)));
}
}
我的示例由 Xamarin 表单地图（相同的内容页）中的地点列表视图提取。 我希望这个解决方案对某人有用
【讨论】：
为了设置高亮项目的颜色，您需要在 iOS 中设置 cell.SelectionStyle 的颜色。
这个例子是将被点击的项目的颜色设置为透明。
如果您愿意，可以使用UITableViewCellSelectionStyle 中的其他颜色进行更改。这将通过在您的 Forms 项目中创建一个新的自定义 ListView 渲染器来编写在 iOS 的平台项目中。
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (Control == null)
{
return;
}
if (e.PropertyName == "ItemsSource")
{
foreach (var cell in Control.VisibleCells)
{
cell.SelectionStyle = UITableViewCellSelectionStyle.None;
}
}
}
}
对于 android，您可以在 values/styles.xml 中添加此样式
<style name="ListViewStyle.Light" parent="android:style/Widget.ListView">
<item name="android:listSelector">@android:color/transparent</item>
<item name="android:cacheColorHint">@android:color/transparent</item>
</style>
【讨论】：
e.PropertyName == "ItemsSource" 更改为 e.PropertyName == "SelectedItem" 才能使其正常工作。
UITableViewCellSelectionStyle 只提到了两种内置颜色，蓝色和灰色。
此解决方案工作正常，但如果您将 ListView 的缓存策略更改为远离默认值，它将停止工作。如果您像这样新建 ListView，它会起作用：
listView = new ListView() { ... };
但是，如果您这样做，它将不起作用（所选项目的背景保持灰色）：
listView = new ListView(cachingStrategy:ListViewCachingStrategy.RecycleElement) { ... };
下面是一个即使使用非标准缓存策略也能工作的解决方案。我更喜欢其他解决方案，例如在 OnItemSelected 方法中添加代码以及来自 ViewModel 的背景颜色绑定。
感谢@Lang_tu_bi_dien，他在这里发布了这个想法：Listview Selected Item Background Color
最终的代码如下所示：
Xamarin.Forms 代码：
namespace MyProject
{
public class ListView2 : ListView
{
public ListView2(ListViewCachingStrategy cachingStrategy) : base(cachingStrategy)
{
}
}
}
您页面上的 XAML：
<ListView2 x:Name="myListView" ListViewCachingStrategy="RecycleElement" ItemsSource="{Binding ListSource}" RowHeight="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Name}" HorizontalOptions="Center" TextColor="White" />
</ContentView>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView2>iOS 特定渲染器：
[assembly: ExportRenderer(typeof(ListView2), typeof(ListView2Renderer))]
namespace MyProject.iOS
{
public partial class ListView2Renderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Control != null && e != null)
{
//oldDelegate = (UITableViewSource)Control.Delegate;
Control.Delegate = new ListView2Delegate(e.NewElement);
}
}
}
class ListView2Delegate : UITableViewDelegate
{
private ListView _listView;
internal ListView2Delegate(ListView listView)
{
_listView = listView;
}
public override void WillDisplay(UITableView tableView, UITableViewCell cell, Foundation.NSIndexPath indexPath)
{
cell.SelectedBackgroundView = new UIView()
{
BackgroundColor = Color.Red.ToUIColor()
};
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
_listView = null;
}
base.Dispose(disposing);
}
}
}
注意：由于您要替换默认委托，您可能会遇到一些问题，有关此方面的更多信息，请参阅Setting delegate of control in custom renderer results in lost functionality。在我的项目中，如果我这样做，一切都会正常工作：
对于使用默认缓存策略 ListViewCachingStrategy.RetainElement 的 ListView，将普通 ListView 与该线程之前的帖子中给出的 ListItemViewCellRenderer 代码一起使用。
将此 ListView2 与使用非默认缓存策略（即 ListViewCachingStrategy.RecycleElement 或 ListViewCachingStrategy.RecycleElementAndDataTemplate）的 ListView 一起使用。
我也在向 Xamarin 提交功能请求，如果您认为应该将其添加到标准 ListView，请点赞：ListView desperately needs a SelectedItemBackgroundColor property
【讨论】：
使用效果 here 发现了这个可爱的选项。
iOS：
[assembly: ResolutionGroupName("MyEffects")]
[assembly: ExportEffect(typeof(ListViewHighlightEffect), nameof(ListViewHighlightEffect))]
namespace Effects.iOS.Effects
{
public class ListViewHighlightEffect : PlatformEffect
{
protected override void OnAttached()
{
var listView = (UIKit.UITableView)Control;
listView.AllowsSelection = false;
}
protected override void OnDetached()
{
}
}
}
安卓：
[assembly: ResolutionGroupName("MyEffects")]
[assembly: ExportEffect(typeof(ListViewHighlightEffect), nameof(ListViewHighlightEffect))]
namespace Effects.Droid.Effects
{
public class ListViewHighlightEffect : PlatformEffect
{
protected override void OnAttached()
{
var listView = (Android.Widget.ListView)Control;
listView.ChoiceMode = ChoiceMode.None;
}
protected override void OnDetached()
{
}
}
}
表格：
ListView_Demo.Effects.Add(Effect.Resolve($"MyEffects.ListViewHighlightEffect"));
【讨论】：
在 android 上完成此操作的最简单方法是将以下代码添加到您的自定义样式中：
@android:颜色/透明
【讨论】：
更改选择颜色的最简单方法是将这些添加到您的 Android.Resources.values.styles
<item name="android:colorPressedHighlight">@android:color/holo_blue_bright</item>
<item name="android:colorFocusedHighlight">@android:color/holo_blue_bright</item>
<item name="android:colorActivatedHighlight">@android:color/holo_blue_bright</item>
【讨论】：
前面的答案要么建议自定义渲染器，要么要求您在数据对象或其他方式中跟踪所选项目。这并不是真正需要的，有一种方法可以以与平台无关的方式链接到ListView 的功能。然后可以使用它以任何需要的方式更改所选项目。可以修改颜色，根据所选状态显示或隐藏单元格的不同部分。
让我们将IsSelected 属性添加到我们的ViewCell。无需将其添加到数据对象中；列表视图选择单元格，而不是绑定数据。
public partial class SelectableCell : ViewCell {
public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(SelectableCell), false, propertyChanged: OnIsSelectedPropertyChanged);
public bool IsSelected {
get => (bool)GetValue(IsSelectedProperty);
set => SetValue(IsSelectedProperty, value);
}
// You can omit this if you only want to use IsSelected via binding in XAML
private static void OnIsSelectedPropertyChanged(BindableObject bindable, object oldValue, object newValue) {
var cell = ((SelectableCell)bindable);
// change color, visibility, whatever depending on (bool)newValue
}
// ...
}
要在列表视图中创建单元格和选择之间的缺失链接，我们需要一个转换器（最初的想法来自Xamarin Forum）：
public class IsSelectedConverter : IValueConverter {
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) =>
value != null && value == ((ViewCell)parameter).View.BindingContext;
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) =>
throw new NotImplementedException();
}
我们使用这个转换器将两者连接起来：
<ListView x:Name="ListViewName">
<ListView.ItemTemplate>
<DataTemplate>
<local:SelectableCell x:Name="ListViewCell"
IsSelected="{Binding SelectedItem, Source={x:Reference ListViewName}, Converter={StaticResource IsSelectedConverter}, ConverterParameter={x:Reference ListViewCell}}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
这个相对复杂的绑定用于检查当前选择了哪个实际项目。它将列表视图的SelectedItem 属性与单元格中视图的BindingContext 进行比较。该绑定上下文是我们实际绑定到的数据对象。换句话说，它检查SelectedItem指向的数据对象是否真的是单元格中的数据对象。如果它们相同，我们就有选定的单元格。我们将它绑定到IsSelected 属性中，然后可以在 XAML 或后面的代码中使用该属性来查看视图单元格是否处于选定状态。
只有一个警告：如果您想在页面显示时设置默认选中项，您需要有点聪明。不幸的是，Xamarin Forms 没有页面 Displayed 事件，我们只有 Appearing 并且设置默认值还为时过早：绑定不会被执行。所以，使用一点延迟：
protected override async void OnAppearing() {
base.OnAppearing();
Device.BeginInvokeOnMainThread(async () => {
await Task.Delay(100);
ListViewName.SelectedItem = ...;
});
}
【讨论】：