CollectionView VisualStateManager не может изменить цвет выделения

Question

Я пытаюсь настроить цвет выделения ячейки в CollectionView, но как бы я это ни пробовал, он всегда уродливый серый.

Я хочу, чтобы мой шаблон элемента имел закругленные углы, но когда я выбираю элемент, я вижу за ним уродливые квадратные серые углы, как на этом изображении:

Вот мой текущий XAML:

      <?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Tests.CollectionViewTest">
<ContentView.Content>
    <CollectionView
        x:Name="collectionView"
        Margin="15,0"
        ItemSizingStrategy="MeasureFirstItem"
        Grid.Row="1"
        Grid.RowSpan="2"
        VerticalScrollBarVisibility="Never"
        BackgroundColor="Transparent"
        SelectionMode="Multiple"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        >

        <CollectionView.ItemsLayout>
            <GridItemsLayout
                Orientation="Vertical"
                HorizontalItemSpacing="1"
                VerticalItemSpacing="1"
                Span="3" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame
                    x:Name="selectionFrame"
                    CornerRadius="18"
                    BackgroundColor="Transparent"
                    Padding="0"
                    HasShadow="False"
                    IsClippedToBounds="True"
                    BorderColor="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup
                            Name="CommonStates">
                            <VisualState
                                Name="Normal" />
                            <VisualState
                                Name="Focused">
                                <VisualState.Setters>
                                    <Setter
                                        Property="BackgroundColor"
                                        Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState
                                Name="Selected">
                                <VisualState.Setters>
                                    <Setter
                                        Property="BackgroundColor"
                                        Value="#e25fc4" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <StackLayout
                        BackgroundColor="#f7f0f6"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        Orientation="Vertical"
                        Padding="8,0,8,10"
                        Margin="10"
                        Spacing="0"
                        HeightRequest="100">
                        <Label
                            Padding="10"
                            x:Name="ServiceName"
                            BackgroundColor="Transparent"
                            Text="Some Text"
                            HorizontalTextAlignment="Center"
                            TextColor="HotPink"
                            FontSize="Micro"
                            FontAttributes="Bold"
                            HorizontalOptions="Center"
                            VerticalOptions="End" />
                        <Label
                            BackgroundColor="Transparent"
                            Text="Some More Text"
                            HorizontalTextAlignment="Center"
                            TextColor="HotPink"
                            FontSize="Micro"
                            HorizontalOptions="Center"
                            VerticalOptions="Start" />
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentView.Content>
</ContentView>

И мой код программной части:

      using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace Tests
{
    public partial class CollectionViewTest : ContentView
    {
        public CollectionViewTest()
        {
            InitializeComponent();
            collectionView.ItemsSource = new ObservableCollection<string>()
            {
                "", "", "", "", "", "", "", "", "", "", "", "", "", ""
            };
        }
    }
}

Я пробовал и другие способы сделать это, но ничего не помогло.

Есть ли способ это сделать, или это просто ошибка CollectionView?

Answer 1

Я нашел беспорядочное решение, и, если оно не работает должным образом, его придется использовать.

1. Установите для поведения выбора в CollectionView значение none.
2. Поместите TapGestureRecognizer в itemTemplate
3. Чтобы имитировать состояния выбора, в обработчике событий для tapGestureRecognizer приведите sender к Frame (или любой другой элемент, к которому вы прикрепили распознаватель жестов) и включите или выключите границу фрейма (или сделайте все, что вам нужно для вашего собственного внешнего вида с выбранным состоянием).
4. Вручную обрабатывайте все, что обычно запускается CollectionView в ответ на выбор. Другими словами, если вы можете выбрать несколько элементов, вы, возможно, отслеживаете выбранные элементы в отдельном списке, и теперь вам придется делать это из tapGestureRecognizer.

Это неправильно, но это работает, и иногда нужно поступать именно так.

Answer 2

Попробуйте это перед <ContentPage.Content>

Я использую в качестве примера цвет «Белый», но, возможно, вам придется его изменить.

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