Xamarin.Forms CollectionView 所选项目有奇怪的灰色边框？答案

【问题标题】：Xamarin.Forms CollectionView selected item has weird gray border?Xamarin.Forms CollectionView 所选项目有奇怪的灰色边框？
【发布时间】：2021-01-28 00:08:48
【问题描述】：

我正在 Visual Studio Mac 中编码，使用的是运行 iOS 13.6 的 iPhone 8 模拟器。

这是我的收藏视图的代码：

       <CollectionView
            Margin="0"
            VerticalScrollBarVisibility="Never"
            BackgroundColor="Transparent"
            x:Name="selectableItemsList"
            SelectionMode="Multiple"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            SelectionChanged="selectableItemsList_SelectionChanged"
            ItemsSource="{Binding Services}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        Source="{Binding Image}"
                        BackgroundColor="Transparent"
                        HeightRequest="100"
                        WidthRequest="100"
                        Aspect="AspectFit"
                        HorizontalOptions="Center"
                        VerticalOptions="Start">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup
                                Name="CommonStates">
                                <VisualState
                                    Name="Normal" />
                                <VisualState
                                    Name="Focused" />
                                <VisualState
                                    Name="Selected">
                                    <VisualState.Setters>
                                        <Setter
                                            Property="BackgroundColor"
                                            Value="Yellow" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Image> 
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

以下是未选中时项目的外观：

这是它们被选中时的样子：

看到每个图标顶部和左侧的灰线了吗？我怎么能摆脱它？

有没有办法在选择项目时使用数据触发器更改图像的背景颜色？

请注意：

将VisualStateManager.VisualStateGroups 部分移动到ResourceDictionary 中的样式不能解决问题。

【问题讨论】：

我还没有机会检查它，但 IIRC 在发布之前我确实尝试过。确认后，我会添加评论和/或接受您的回答。
当然，如果它有效，请告诉我:)。

标签： xamarin.forms datatemplate datatrigger

【解决方案1】：

尝试将图像放入网格中：

<CollectionView.ItemTemplate>
    <DataTemplate>

        <Grid Padding="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>

            <Image 
                Source="{Binding .}"
                BackgroundColor="Transparent"
                HeightRequest="100"
                WidthRequest="100"
                HorizontalOptions="Center"
                VerticalOptions="Start">
               
            </Image>

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup
                        Name="CommonStates">
                    <VisualState
                            Name="Normal" />
                    <VisualState
                            Name="Focused" />
                    <VisualState
                            Name="Selected">
                        <VisualState.Setters>
                            <Setter
                                    Property="BackgroundColor"
                                    Value="Yellow" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

【讨论】：

好吧，当我在我这边测试时，我没有看到那些行。你也可以试试offical sample，也没有灰色边框。