Xamarin.Forms ListView选中项背景色无法自定义问题求助

问题根源是ListView的ViewCell自带默认选中背景样式，会盖过你自定义Frame的背景色，得先把这个默认样式干掉，再结合绑定实现自定义选中效果。

步骤1：禁用ViewCell默认选中高亮 #

在你的ViewCell里直接设置两个属性，把默认选中背景设为透明：

<ViewCell BackgroundColor="Transparent" SelectedBackgroundColor="Transparent">

这样原来的橙色高亮就不会显示了，接下来就能用自己的Frame背景色来体现选中状态。

步骤2：实现选中状态绑定和颜色转换器 #

1. 创建BooleanToColorConverter #

新建一个转换器类，把布尔值转成对应的颜色：

public class BooleanToColorConverter : IValueConverter
{
    public Color TrueColor { get; set; } = Color.FromHex("#your_selected_color");
    public Color FalseColor { get; set; } = Color.White;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? TrueColor : FalseColor;
    }

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

2. 包装Answer数据（如果当前是纯字符串的话） #

因为你原来的CurrentAnswers绑定的是字符串集合，没法直接加选中状态，所以要把每个选项包装成ViewModel：

public class AnswerViewModel : INotifyPropertyChanged
{
    private bool _isSelected;
    public string Text { get; set; }

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

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

然后把ViewModel里的CurrentAnswers改成ObservableCollection<AnswerViewModel>，初始化时把字符串转成AnswerViewModel对象。

3. 修改XAML绑定 #

先在ContentPage的xmlns里加转换器的命名空间（假设转换器在MentalTest.Converters里）：

xmlns:converters="clr-namespace:MentalTest.Converters"

然后在ContentPage的Resources里声明转换器：

<ContentPage.Resources>
    <converters:BooleanToColorConverter x:Key="BoolToColor" 
                                        TrueColor="#your_selected_color" 
                                        FalseColor="White" />
</ContentPage.Resources>

最后修改ListView的ItemTemplate，绑定Frame的BackgroundColor到IsSelected：

<ListView ItemsSource="{Binding CurrentAnswers}"
          SelectedItem="{Binding SelectedAnswer}"
          SeparatorVisibility="None"
          BackgroundColor="Transparent"
          VerticalOptions="FillAndExpand"
          Margin="0,20,0,0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell BackgroundColor="Transparent" SelectedBackgroundColor="Transparent">
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Padding="0">
                    <Frame BorderColor="#b76e79"
                           CornerRadius="30"
                           Padding="6"
                           Margin="10,10,10,15"
                           BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColor}}"
                           HasShadow="True"
                           HeightRequest="100"
                           VerticalOptions="CenterAndExpand">
                        <Label Text="{Binding Text}"
                               FontSize="16"
                               TextColor="#394758"
                               VerticalTextAlignment="Center"
                               HorizontalOptions="CenterAndExpand"/>
                    </Frame>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

4. 更新ViewModel的SelectedItem逻辑 #

在ViewModel的SelectedAnswer属性setter里，更新选中项的IsSelected状态：

private AnswerViewModel _selectedAnswer;
public AnswerViewModel SelectedAnswer
{
    get => _selectedAnswer;
    set
    {
        if (_selectedAnswer != null)
            _selectedAnswer.IsSelected = false; // 取消之前选中项的状态
        _selectedAnswer = value;
        if (_selectedAnswer != null)
            _selectedAnswer.IsSelected = true; // 设置新选中项的状态
        OnPropertyChanged();
    }
}

这样操作后，选中项就会显示你设置的自定义背景色，不会再出现默认的橙色高亮了。

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