如何在 Xaml 中更改 ListView 项目的背景颜色？

Question

I have a ListView , and I need to replace it's native colors (both of the selected item and other items) to different colors. I was not able to find how to do that. I can change the background color to something different (see my code below), but I don't know how to make it behave as a common ListView , changing item colors on selection.

Here is my code:

<ListView x:Name="MenuItemsListView"
          SeparatorVisibility="None"
          HasUnevenRows="true"
          ItemsSource="{Binding MenuItems}">
  <ListView.Header>
    <Grid BackgroundColor="Black">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="10"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
      </Grid.RowDefinitions>
        <Image Grid.Column="1" Grid.Row="1" WidthRequest="50" HeightRequest="50" HorizontalOptions="StartAndExpand" Source="Assets\logo.png" />
    </Grid>
  </ListView.Header>
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell Height="100">
         <StackLayout Padding="15,10" 
                Orientation="Horizontal" 
                HorizontalOptions="FillAndExpand" 
                BackgroundColor="{StaticResource LogoBackgroundColor}">
            <Image WidthRequest="50" Source="{Binding IconSource}" />
            <Label VerticalOptions="FillAndExpand" 
                VerticalTextAlignment="Center" 
                Text="{Binding Title}" 
                FontSize="24"/>
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Answer 1

This is possible using Triggers as well in xaml but this is also going to work.

To change color of the selected ViewCell , there is a simple work around without using custom renderer. Make the Tapped event of your ViewCell as below

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell Tapped="ViewCell_Tapped">            
       <StackLayout></StackLayout>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

In your ContentPage 's cs file, implement the event

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;
    }
}

Declare lastCell at the top of your ContentPage like this ViewCell lastCell;

Output screenshot:

Answer 2

You can't do something like that in XAML. You may do something like proposed solution , if it is not working you may place a Grid inside ViewCell and change its color, it is the closest you can be to XAML only. But it is fairly inefficient.

The only true solution of your problem is on the native side. On Android it is fairly simple, you can edit styles.xml to achieve that. On other platforms you will need to write custom renderers.

Answer 3

I have a ListView , and I need to replace it's native colors (both of the selected item and other items) to different colors. I was not able to find how to do that. I can change the background color to something different (see my code below), but I don't know how to make it behave as a common ListView , changing item colors on selection.

Here is my code:

<ListView x:Name="MenuItemsListView"
          SeparatorVisibility="None"
          HasUnevenRows="true"
          ItemsSource="{Binding MenuItems}">
  <ListView.Header>
    <Grid BackgroundColor="Black">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="10"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="10"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="10"/>
      </Grid.RowDefinitions>
        <Image Grid.Column="1" Grid.Row="1" WidthRequest="50" HeightRequest="50" HorizontalOptions="StartAndExpand" Source="Assets\logo.png" />
    </Grid>
  </ListView.Header>
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell Height="100">
         <StackLayout Padding="15,10" 
                Orientation="Horizontal" 
                HorizontalOptions="FillAndExpand" 
                BackgroundColor="{StaticResource LogoBackgroundColor}">
            <Image WidthRequest="50" Source="{Binding IconSource}" />
            <Label VerticalOptions="FillAndExpand" 
                VerticalTextAlignment="Center" 
                Text="{Binding Title}" 
                FontSize="24"/>
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>