Question

我有一个ListView，我需要将其本机颜色（包括所选项目和其他项目）替换为不同的颜色。我找不到解决方法。我可以将背景颜色更改为其他颜色（请参见下面的代码），但是我不知道如何使其表现为普通的ListView，从而在选择时更改项目颜色。

这是我的代码：

    <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

可能知道，可以在xaml中使用Triggers。但这也符合您的目的。要更改所选color中的ViewCell，有一个简单的解决方法，无需使用自定义渲染器。如下所述对您的Tapped进行ViewCell事件

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell Tapped="ViewCell_Tapped">            
       <StackLayout></StackLayout>
        </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;
    }
}

在lastCell顶部ContentPage声明ViewCell lastCell;

输出屏幕截图：

Answer 2

您无法在XAML中执行类似的操作。您可以执行类似proposed solution的操作，如果它不起作用，则可以在ViewCell内放置一个Grid并更改其颜色，这是最接近XAML的方法。但这效率很低。

您问题的唯一真正解决方案是在本地。在Android上，这非常简单，您可以编辑styles.xml来实现。在其他平台上，您将需要编写自定义渲染器。

Answer 3

您需要重置 itemcontainerstyle 。这样，默认的选定项目属性将被覆盖。然后，您需要为您的DataTemplate项目创建一些触发器。

下面的代码是重置所选项目默认属性的样式。

<Style x:Key="StyleListViewItem" TargetType="ListViewItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <ContentPresenter/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

一旦创建了上述样式，请按以下方式使用它。（我现有作品的摘录。在您的作品中使用它）

                            <ListView ItemContainerStyle="{StaticResource StyleListViewItem}" Background="{x:Null}" BorderBrush="{x:Null}" ItemsSource="{Binding Value}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="2.5*"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Grid.Column="0" Text="{Binding Key}" TextWrapping="WrapWithOverflow" />
                                            <TextBlock Grid.Column="1" Text=":" Margin="3,0"/>
                                            <TextBlock Grid.Column="2" Text="{Binding Value}" Style="{StaticResource StyleTblckAnswer}" TextWrapping="WrapWithOverflow"/>
                                        </Grid>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>

以上步骤将重置默认选择项的背景色。您需要进一步工作并为数据模板创建触发器，以在选择（或）将鼠标悬停在上面等时更改背景颜色。

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

3 个答案: