Why doesn't frame change its background?

I have a CollectionView on the homepage. The CollectionView element consists of a Frame as a container and other elements (see the code below). I want to implement changing the color of the Frame when it is selected in collectionView, but VisualStateManager "does not work". And how in this approach can I add Frame animation when I select it?

My ContentPage.Resources code:

    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

My CollectionView code:

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame Margin="10, 10, 10, 0"
                           HeightRequest="100"
                           MinimumHeightRequest="95"
                           Padding="13" 
                           CornerRadius="20"
                           BackgroundColor="DodgerBlue"
                           BorderColor="Transparent">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Label 
                                Text="{Binding Title}"
                                FontSize="19" 
                                TextColor="White"
                                FontAttributes="Bold"/>
                            <Label 
                                Margin="0, 2, 0, 0"
                                Grid.Row="1"
                                Text="{Binding Description}"
                                FontSize="16" 
                                TextColor="White"/>
                            <Label 
                                Margin="0, 10, 0, 0"
                                Grid.Row="2"
                                Text="{Binding CreationTime, Converter={converters:TimePrettifyerConverter}}"
                                FontSize="12"
                                TextColor="White"/>
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

Update

I made a demo in MVVM way with a new button to add a new Item every time i click the button.

This is my MainPage.xaml file (I add a button at the bottom to add new item):

<StackLayout>      
    <CollectionView ItemsSource="{Binding ItemCollection}" SelectionMode="Single" HeightRequest="600">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Border  Margin="10, 10, 10, 0"
                        HeightRequest="100"
                        MinimumHeightRequest="95"
                        Padding="13"
                        Stroke="Transparent">
                            <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="20,20,20,20"/>
                            </Border.StrokeShape>                     
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Label 
                            Text="{Binding Title}"
                            FontSize="19" 
                            TextColor="White"
                            FontAttributes="Bold"/>
                        <Label 
                            Margin="0, 2, 0, 0"
                            Grid.Row="1"
                            Text="{Binding Description}"
                            FontSize="16" 
                            TextColor="White"/>
                        <Label 
                            Margin="0, 10, 0, 0"
                            Grid.Row="2"
                            Text="{Binding CreationTime}"
                            FontSize="12"
                            TextColor="White"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    <Button Text="click me" Command="{Binding ClickCommand}"   />
</StackLayout>

Don't forget to set the BindingContext in MainPage.cs file:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
	    InitializeComponent();
	    this.BindingContext = new MainPageViewModel();
    }
...

This is my MainPageViewModel, I define a ItemCollection which CollectionView binds to. I also define the ClickCommand for the button. Each time I click the button, a new item will be added to the CollectionView.

public class MainPageViewModel
{
	public ObservableCollection<Item> ItemCollection { get; set; }= new ObservableCollection<Item>();

    // each time i clicked the button, ClickCommand will execute to add a new item
    public Command ClickCommand
    {
        get
        {
            return new Command(() =>
            {
                int n = ItemCollection.Count + 1;
                ItemCollection.Add(new Item
                {
                    Title = "Title" + n.ToString(),
                    CreationTime = "CreationTime" + n.ToString()
                });
            });
        }
    }
    //just add some test code here
    public MainPageViewModel()
	{
		ItemCollection.Add(new Item
		{
			Title = "Title1",
			CreationTime = "CreationTime1"
		});
        ......
        ItemCollection.Add(new Item
        {
            Title = "Title5",
            CreationTime = "CreationTime5"
        });
    }
}

This is Item.cs, to for convenience I didn't use Converter for CreationTime.

public class Item
{
	public string Title { get; set; }
	public string CreationTime {get;set;}

	public Item()
	{
	}
}

Here is the gif I captured:

================== Origin Answer ================

That because you set the Frame BackgroundColor in DataTemplate. So we'd better not set the Property in any other places if we use VisualState in Resources. For a workaround, maybe you could set a normal state (this time we use Border):

<Style TargetType="Border"> 
......
        <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="DodgerBlue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Red" />
                        </VisualState.Setters>
                    </VisualState>
        </VisualStateGroup>

And use Border instead of Frame:

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Border  Margin="10, 10, 10, 0"
                HeightRequest="100"
                MinimumHeightRequest="95"
                Padding="13"
                Stroke="Transparent">
                    <Border.StrokeShape>
                            <RoundRectangle CornerRadius="20,20,20,20"/>
                    </Border.StrokeShape>                     
            <Grid>
                <Grid.RowDefinitions>

Hope it works for you.