How to change background color of selected items in GridItemsLayout of CollectionView in Maui?-CodePudding

I'm trying to set the background color of all selected items in a CollectionView for which I'm using a GridItemsLayout. I have seen ways to change the background color if I use a Grid layout within my CollectionView's DataTemplate here. However, I'm trying to keep the coding simple by using the inherent GridItemsLayout capability of the CollectionView. I keep thinking there must be a simple way to accomplish this that I'm missing.

Here is my current Xaml that uses the detault background color for item selection.

<ScrollView>
        <CollectionView x:Name="BrandsToUseCollectionView" ItemsSource="{x:Static vm:BrandsToUseVM.AllBrandNames}"
                        SelectionMode="Multiple" SelectedItems="{Binding BrandNamesSelected}"
                        SelectionChanged="OnBrandSelectionChanged" Margin="15,15,15,0">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Span="2" Orientation="Vertical" VerticalItemSpacing="10" HorizontalItemSpacing="15" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label FontAttributes="Bold" Padding="0,7,0,0" HeightRequest="40" VerticalOptions="Center"
                               HorizontalOptions="Center" FontSize="Medium" Text="{Binding .}">
                    </Label>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>

While I can insert a <Grid> into the DataTemplate and use VisualStateManager as a workaround, I'm hopeful one of you much more experienced developers can make this simpler for me and others now and for the future using Xaml or, if needed, in the code-behind.

CodePudding user response：

I don't know exact details, but I assume OnBrandSelectionChanged gets a list of items that have changed.

Add a Color BrandBackgroundColor property to your BrandName class.

If BrandName is currently just string, define a class, and make your current string one of its properties. Then convert Selected to a color.

Something like:

... OnBrandSelectionChanged(...)
{
  // ??? I don't know parameters for this method.
  // for each changed item ...
  foreach (BrandName brandName in ???)
  {
    // How does OnBrandSelectionChanged see which are selected, which are unselected?
    bool selected = ...;
    brandName.SetSelected(selected);
}

...

public ObservableCollection<BrandName> AllBrandNames ...
...

class BrandName : ObservableObject
{
  // --- Put your existing string here. ---
  public string Name
  {
    get => name;
    set => SetProperty(ref name, value);
  }
  private string name;


  // --- code for SetSelected and BrandBackgroundColor ---
  public void SetSelected(bool selected)
  {
    BrandBackgroundColor = selected ? MySelectedColor : MyDefaultBackgroundColor;
  }

  static Color MySelectedColor = ...;
  static Color MyDefaultBackgroundColor = ...;

  public Color BrandBackgroundColor {
    get => backgroundColor;
    set => SetProperty(ref backgroundColor, value);
  }
  private Color backgroundColor;
}

<ListView.ItemTemplate>
  <DataTemplate>
    <Label ... BackgroundColor="{Binding BrandBackgroundColor}" ...

TO FILL GRID CELL with background color

Use properties to tell label to fill the area:

...
    <Label ... BackgroundColor="{Binding BrandBackgroundColor}"
        HorizontalOptions="Fill" VerticalOptions="Fill" ...

NOTE: If text of label doesn't show up where you want it to within the grid cell, use appropriate HorizontalTextAlignment and VerticalTextAlignment values.