CollectionView VisualStateManager 无法更改选择颜色答案

【问题标题】：CollectionView VisualStateManager can't change selection colorCollectionView VisualStateManager 无法更改选择颜色
【发布时间】：2021-07-24 03:59:18
【问题描述】：

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

【问题讨论】：

什么平台？无论如何，我认为一种解决方法是将一个框架包装在另一个框架内。外框应该是方形的（没有圆角），并给它你想要的背景颜色。内框有圆角和透明背景。不确定如何使用视觉状态管理器和选择进行设置，但这可能会给你一个想法。（如果你让它工作，添加一个答案（不要编辑问题；在下面添加一个实际答案）显示工作代码。这将对其他人有所帮助。48 小时后，选择你自己的答案。）
是 ios 的问题吗？
@ToolMakerSteve 我需要透明背景。
@LeoZhu-MSFT 是的，它在 iOS 中
@LeMotJuiced - 尚不清楚灰色来自何处 - 也许不是因为被选中。如果将 CornerRadius 设置为原始的、未选择的按钮状态会发生什么？如果你在它周围看到灰色，那么你必须尝试不同的实验来找出灰色来自哪里。如果您没有看到灰色，那么您的标题是正确的 - 这是所选状态的问题。在这种情况下，我不知道如何解决它。

标签： xamarin.forms datatemplate visualstatemanager xamarin.forms.collectionview

【解决方案1】：

我重新开始尝试让它工作，现在我在 StackLayout 中有一个 Frame。而不是相反。但是看不到运气，现在所选项目周围没有角落。对不起，我无法让它工作。

【讨论】：

我很高兴能尝试这个。它对你有用吗？它对我没有任何改变。
尝试改变Frame中的CollectionView。文档在这里。docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
它改变了Frame的背景颜色，但它并没有删除丑陋的灰色选择框

【解决方案2】：

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

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

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

【讨论】：

抑制损坏的内置行为！好主意。