I am trying to customize the selection color of a cell in a CollectionView but no matter how I try it, it's always an ugly grey.
I want my item template to have rounded corners, but when I select an item the I see ugly square grey corners behind it, as in this image:
Here's my current 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>
And my code-behind:
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>()
{
"", "", "", "", "", "", "", "", "", "", "", "", "", ""
};
}
}
}
I've tried other ways of doing this too, but nothing worked.
Is there a way to do it, or is this just a bug with CollectionView?
I found a kludgey solution, and in the absence of one that works the right way, it will have to do.
sender
to a Frame
(or whatever element you attached the gesture recognizer to) and turn the frame border on or off (or do whatever you need to for your own custom selected-state appearance).It’s wrong but it works and sometimes that’s how you gotta do.