CollectionView VisualStateManager 无法更改选择颜色

问题描述

我正在尝试自定义 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,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 的一个错误？

解决方法

我找到了一个笨拙的解决方案，如果没有一个以正确方式工作的解决方案，它就必须这样做。

1. 将 CollectionView 中的选择行为设置为无。
2. 将 tapGestureRecognizer 放入 itemTemplate
3. 要模拟选择状态，在 tapGestureRecognizer 的事件处理程序中，将 sender 转换为 Frame（或您将手势识别器附加到的任何元素）并打开或关闭框架边框（或为您自己的自定义选定状态外观做任何您需要的事情）。
4. 手动处理通常由 CollectionView 响应选择而触发的任何内容。换句话说，如果您可以选择多个项目，您可能会在单独的列表中跟踪所选项目，而您现在必须在 tapGestureRecognizer 中执行此操作。

这是错误的，但它有效，有时这就是你必须做的。

,

我再次开始尝试使其工作，现在我在 StackLayout 中有一个框架。而不是相反。但是没有运气，现在所选项目周围没有角落。抱歉，我无法让它工作。