This collection view is fine but after item selection. There is visible orange background. How should I remove it?
<CollectionView
x:Name="MyCollectionView"
ItemsSource="{Binding Groups}"
SelectionMode="Single"
SelectedItem="{Binding SelectedGroup}"
ItemsLayout="HorizontalList"
Margin="10,10,0,10">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:PlcGroup">
<Frame Margin="0,0,5,0" Padding="10,5" HasShadow="False" CornerRadius="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<VisualState.Setters>
<Setter Property="Style" Value="{DynamicResource unselectedGroup}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="Style" Value="{StaticResource selectedGroup}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SelectItem, Source={RelativeSource AncestorType={x:Type viewModels:MainViewModel}}}"
CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
<Label Text="{Binding Name}"/>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
It really is a pain to change style to all descendants to DataTemplate but I just want to set color to frame background. In a perfect world I would like to change label´s TextColor as well but I gave up on that.
That may due to the default color of CollectionView Selected Item. I give a workaround here.
You could wrap the Frame in a Container, such as StackLayout and set the BackgroundColor property to white. Set x:Name="myFrame"
to the Frame which we will use in VisualStateManager.
<DataTemplate>
<StackLayout BackgroundColor="White">
<Frame x:Name="myFrame" ....
Then VisualStateGroup should be attached to StackLayout as it is the outer container:
<DataTemplate>
<StackLayout BackgroundColor="White">
<Frame x:Name="myFrame" Margin="0,0,5,0" Padding="10,5" HasShadow="False" CornerRadius="10">
<Frame.GestureRecognizers>
....
</Frame.GestureRecognizers>
<Label Text="{Binding Name}" />
</Frame>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<VisualState.Setters>
<Setter TargetName="myFrame" Property="Frame.Style" Value="{DynamicResource unselectedGroup}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter TargetName="myFrame" Property="Frame.Style" Value="{StaticResource selectedGroup}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</StackLayout>
</DataTemplate>
For more info, you could refer to Visual states.