更改背景颜色将selectedItem列表视图

Question

我有一个关于在Xamarin.Forms 列表视图问题绑定列表视图我成功地与一些项目，但我想更改选定单元格的背景颜色我如何在Xamarin.Forms

做到这一点

我利用

var cell = DataTemplate(typeof(ImageCell)); 

ListView listView = new ListView 
{ 
    SeparatorColor = Color.Green, 
    ItemsSource = ListlvData, 
    ItemTemplate = cell, // Set the ImageCell to the item templatefor the listview 
}; 

Answer 1

编辑2：

有时，如果我遇到了奇怪的问题，在我的ViewCell的BackgroundColor从未变回原来的颜色，所以我已经开始做这个改变，而不是颜色：

cell.Tapped += async (sender, args) => { 
    cell.View.BackgroundColor = Color.Red; 

#pragma warning disable 4014 //These pragma's are only needed if your Tapped is being assigned an async anonymous function and muffles the compiler warning that you did not await Task.Run() which you do not want to fire and forget it 

    Task.Run(async() => {  //Change the background color back after a small delay, no matter what happens 
     await Task.Delay(300); //Or how ever long to wait 

     Device.BeginInvokeOnMainThread(() => cell.View.BackgroundColor = Color.Default); //Turn it back to the default color after your event code is done 
    }); 

#pragma warning restore 4014 

    await OnListViewTextCellTapped(cell); //Run your actual `Tapped` event code 

}; 

编辑：

为了下面的代码添加到ListView.DataTemplate，你会想要做的事像这样：

ListView listView = new ListView { 
    SeparatorColor = Color.Green, 
    ItemsSource = ListlvData 
}; 

listView.ItemTemplate = new DataTemplate(() => { 
    ViewCell cell = new ViewCell(); 

    cell.Tapped += (sender, args) => { 
     cell.View.BackgroundColor = Color.Red; 
     OnListViewTextCellTapped(cell);   //Run your actual `Tapped` event code 
     cell.View.BackgroundColor = Color.Default; //Turn it back to the default color after your event code is done 
    }; 

    cell.View = new Image(); 

    return cell; 
}); 

---

要更改Tapped的背景颜色，你将需要使用一个ViewCell和一个Image控件，因为ImageCell默认不支持BackgroundColor。

我把StackLayout的ViewCell内，但随后在Tapped事件，我改变ViewCell.View的BackgroundColor，就像这样：

ViewCell cell = new ViewCell(); 

cell.Tapped += (sender, args) => { 
    cell.View.BackgroundColor = Color.Red; 
    OnListViewTextCellTapped(cell);   //Run your actual `Tapped` event code 
    cell.View.BackgroundColor = Color.Default; //Turn it back to the default color after your event code is done 
}; 

Answer 2

我知道这已经很长一段时间前答复，但想通我对于任何可能在这个问题中碰到的人寻找更多的MVVM友好的方式来为此添加更多信息。我最终得出了以下结论，如果他们如此倾向，有人会希望有用。

您将需要一个值转换器，如以下几点：

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

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

转换器只是如果提供的参数计算结果为true返回相应Color。我也注册了该转换器在我的App.xaml（这不得不手动创建）一个静态资源，即：

<?xml version="1.0" encoding="utf-8" ?> 
<forms:FormsApplication xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:forms="clr-namespace:Caliburn.Micro.Xamarin.Forms;assembly=Caliburn.Micro.Platform.Xamarin.Forms" 
     x:Class="Path.To.Application.App" 
     xmlns:converters="clr-namespace:Path.To.Converters.Namespace;assembly=Converter.Assembly"> 
    <Application.Resources> 
     <converters:UseColorIfConverter x:Key="UseColorIf"></converters:UseColorIfConverter> 
    </Application.Resources> 
</forms:FormsApplication> 

请注意，我用的卡利微，但同样会默认Xamarin合作.Forms.Application类也是如此。然后

转换器和潜在的绑定的使用将是以下：

<ListView ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
       <ContentView BackgroundColor="{Binding Path=Selected, Converter={StaticResource UseColorIf}, ConverterParameter={x:StaticResource ListSelectionColor}}" ...> 
        <!--Display--> 
       </ContentView> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

这然后允许你绑定针对其指示它是否被选中或未被每一视图模型的属性。此属性必须保持同步，但很轻松地通过订阅属性来完成改变的事件。例如：

public class MenuViewModel : Screen 
{ 
    public BindableCollection<SectionViewModel> Items { get; }  

    public MenuViewModel(IEnumerable<SectionViewModel> sections) 
    { 
     Items = new BindableCollection<SectionViewModel>(sections); 
     PropertyChanged += OnPropertyChanged; 
    } 

    private SectionViewModel _selectedItem; 

    public SectionViewModel SelectedItem 
    { 
     get { return _selectedItem; } 
     set 
     { 
      if (_selectedItem == value) 
       return; 
      _selectedItem = value; 
      NotifyOfPropertyChange(nameof(SelectedItem)); 
     } 
    } 

    private void OnPropertyChanged(object sender, PropertyChangedEventArgs propertyChangedEventArgs) 
    { 
     if (propertyChangedEventArgs.PropertyName == nameof(SelectedItem)) 
     { 
      foreach (var item in Items) 
      { 
       item.Selected = item == SelectedItem; 
      } 
     } 
    } 
} 

也有这样做后，剩下的一个琐碎的事情，那就是在每个平台上使用的默认渲染。我没有检查Android，但至少在IOS你仍然会得到一个灰色边框所以下面只是删除它：

using UIKit; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.iOS; 

[assembly: ExportRenderer(typeof(ViewCell), typeof(CustomListViewCellRenderer))] 

namespace My.Awesome.Ios.Client.Renderers 
{ 
    class CustomListViewCellRenderer : ViewCellRenderer 
    { 

     public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv) 
     { 
      var cell = base.GetCell(item, reusableCell, tv); 

      cell.SelectionStyle = UITableViewCellSelectionStyle.None; 
      return cell; 
     } 
    } 
}