选择其他按钮时，ListView 突出显示所选项目颜色不会保持不变

Posted 2023-04-13

【中文标题】选择其他按钮时，ListView 突出显示所选项目颜色不会保持不变

【英文标题】：ListView Highlight Selected Item Color is not staying on when selected other buttons

【发布时间】：2021-08-21 19:35:55

【问题描述】：

我在每个仅出现在选定项目上的列表/项目（加号和减号按钮）上都有这个带有 2 个按钮的 ListView。 除了这些按钮之外，所选项目的颜色也会更改为 LightGray，并且预览项目将是透明的（效果很好）。

但是我遇到的问题是当我选择一个项目然后单击加号/减号按钮时，它会清除所选项目的颜色。 所以只有按钮会保持亮着，但 BackgroundColor 会消失。

我一直在尝试保持 LightGray 颜色，直到我选择不同的项目。

由于我是新手，如果您能帮我举一些例子，那就太好了（如果可能的话，请）。

如果需要更多信息，请告诉我。

非常感谢。

ItemsPage.xaml

<ListView ItemsSource="Binding Items, Mode=TwoWay" x:Name="lstView" SelectedItem="Binding SelectedItem" HasUnevenRows="True" RowHeight="50">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <Grid Padding="0,0,8,0" Margin="4,0,4,0">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="7*"/>
          </Grid.ColumnDefinitions>

          <Grid.GestureRecognizers>
            <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Edit1" CommandParameter="Binding ItemId"/>
          </Grid.GestureRecognizers>

          <Label Text="Binding ItemName" Grid.Column="1" FontSize="Medium"></Label>
           
          <Image Source="DecreaseIcon1.png" Grid.Column="2" Margin="4" IsVisible="Binding IsVisible">
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="DecrementQuantity" CommandParameter="Binding ItemId"/>
            </Image.GestureRecognizers>
          </Image>

          <Entry Text="Binding ItemQuantity" Grid.Column="3" VerticalTextAlignment="Center"/>

          <Image Source="IncreaseIcon1.png" Grid.Column="4" Margin="4" IsVisible="Binding IsVisible">
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="IncrementQuantity" CommandParameter="Binding ItemId"/>
            </Image.GestureRecognizers>
          </Image>

        </Grid>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

ItemsPage.cs

private void IncrementQuantity(object sender, EventArgs e)
  
    TappedEventArgs tappedEventArgs = (TappedEventArgs)e;
    Item item = ((ItemViewModel)BindingContext).Items.Where(x => x.ItemId == (Guid)tappedEventArgs.Parameter).FirstOrDefault();

    var oldQuantity = item.ItemQuantity++;
  

private void DecrementQuantity(object sender, EventArgs e)
  
    TappedEventArgs tappedEventArgs = (TappedEventArgs)e;
    Item item = ((ItemViewModel)BindingContext).Items.Where(x => x.ItemId == (Guid)tappedEventArgs.Parameter).FirstOrDefault();

    var oldQuantity = item.ItemQuantity--;
  

Grid lastGrid;
private void TapGestureRecognizer_Edit1(object sender, EventArgs e)
  
    TappedEventArgs tappedEventArgs = (TappedEventArgs)e;
    Item item = ((ItemViewModel)BindingContext).Items.Where(x => x.ItemId == (Guid)tappedEventArgs.Parameter).FirstOrDefault();
    _item = item;

    var grid = sender as Grid;
    lstView.SelectedItem = grid.BindingContext;

    if (lastGrid != null)
    
    lastGrid.BackgroundColor = Color.Transparent;
    
    var viewCell = (Grid)sender;
    if (viewCell.BackgroundColor != null)
    
    viewCell.BackgroundColor = Color.LightGray;
    lastGrid = viewCell;
    
  

【参考方案1】：

根据你的描述，我建议你可以用CollectionView来代替ListView。然后使用Xamarin.Forms Visual State Manager 突出选中项的背景色。

这是 ContentPage.Resource 中的 VisualStateManager。

 <ContentPage.Resources>
   
    <Style x:Key="stacklayoutStyle" TargetType="StackLayout">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />

                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="LightGray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>

在 CollectionView 中使用此样式。单击 Button 时将保持选中状态。

 <CollectionView ItemsSource="Binding items" SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Style="StaticResource stacklayoutStyle">
                        <Grid Margin="4,0,4,0" Padding="0,0,8,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Label
                                Grid.Column="1"
                                FontSize="Medium"
                                Text="Binding ItemName" />
                            <Button Grid.Column="2" Text="decrement" />
                            <Entry
                                Grid.Column="3"
                                Text="Binding ItemQuantity"
                                VerticalTextAlignment="Center" />
                            <Button Grid.Column="4" Text="Increment" />
                        </Grid>
                       
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>

【讨论】：

嘿樱桃，非常感谢。我将它从ListView 更改为CollectionView，它工作得很好。 但是......大声笑现在我有不同的问题。我使用GestureRecognizer（网格）双击，双击不再起作用:(也许你也有解决方案？再次感谢大家

@Noah 别担心，您可以添加<Grid.GestureRecognizers><TapGestureRecognizer NumberOfTapsRequired="2" Tapped="TapGestureRecognizer_Edit1" /> </Grid.GestureRecognizers> 作为您之前的代码。

【参考方案2】：

好吧，当您点击任何其他视图（如按钮或其他东西）时，列表视图失去了焦点。当列表视图没有聚焦时，它的背景颜色将会丢失。

但是，尝试直接设置 listView 的背景颜色可能会给您想要的效果。 注意：我没有在我的 PC 上尝试过这段代码，看看它是否能解决您的问题，但请尝试一下，让我知道您的结果。

    if (viewCell.BackgroundColor != null)
    
        lstView.BackgroundColor = Color.LightGray;
        // Other lines of code
    

【讨论】：

您好，谢谢您的回复。我试过了，但它不起作用。它将整个列表变为灰色。

考虑更改 将点击次数增加到 2。很高兴听到您使用集合视图解决了问题，正如 @Cherry Bu 解释的那样