CollectionView GridItemsLayout Изменить цвет фона вложенного элемента (кнопка)

Question

У меня проблема с CollectionView с GridItemsLayout. В моем приложении есть StackLayout с горизонтальным CollectionView(GridItemsLayout), который содержит кнопку, привязанную к определенной категории.

Каждый раз, когда кнопка нажимается / нажимается, она фильтрует ListView(типа Хирургия) ниже в зависимости от категории. Все это работает нормально, однако я хотел бы выделить категорию / кнопку, изменив ее, чтобы увидеть, какая категория в настоящее время используется для фильтрации.

      <CollectionView HeightRequest="70"
                    x:Name="categoryCollection"
                    ItemsSource="{Binding Categories}"
                    Margin="20,0,20,0"
                    SelectionMode="Single">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Horizontal" Span="1" HorizontalItemSpacing="5"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0,5,0,5">
                    <Button x:Name="categoryButton" Text="{Binding Name}" 
                            Command="{Binding Path=BindingContext.FilterCommand, Source={x:Reference Name=SurgeryListView}}"
                            CommandParameter="{Binding .}"
                            CornerRadius="15"
                            FontFamily="OpenSans" Margin="0,5,10,5"
                            Opacity="0.6" FontSize="16" TextTransform="None">
                    </Button>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

 <ListView x:Name="listView"
              ItemsSource="{Binding Surgeries}"
              RefreshCommand="{Binding LoadSurgeriesCommand}"
              IsRefreshing="{Binding IsRefreshing}"
              IsPullToRefreshEnabled="True"
              RowHeight="70"
              BackgroundColor="{StaticResource darkThemeBackground}"
              ItemTemplate="{StaticResource surgeryDataTemplateSelector}">

        <ListView.Behaviors>
            <behaviors:EventToCommandBehavior
                EventName="ItemTapped"
                Command="{Binding SurgerySelectedCommand}"
                EventArgsConverter="{StaticResource ItemTappedConverter}">
            </behaviors:EventToCommandBehavior>
        </ListView.Behaviors>
    </ListView>

Я пытался использовать VisualStates но это не сработало, потому что нажатие кнопки на самом деле не меняет SelectedItem(для этого нужно будет щелкнуть окружающий / родительский элемент сетки). Более того, измененный VisualState применялся только к сетке BackgroundColor, а не самой кнопки.

Вопрос: Как выделить текущую категорию / кнопку, изменив цвет фона?

Answer 1

Поскольку выбор работает хорошо, остается только часть ui / xaml, если вы посмотрите документацию по VisualStateManager , вы можете добавить:

      <CollectionView.Resources>
                <Style TargetType="Grid">
                    <Setter Property="VisualStateManager.VisualStateGroups">
                        <VisualStateGroupList>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor"
                                        Value="LightSkyBlue" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </Setter>
                </Style>
</CollectionView.Resources>