Not able to change the Background color of Frame inside CollectionView in Xamarin forms-CodePudding

I want to change the background color of the Frame. I tried many ways like setting the Focused event, Triggers and Binding of background color property nothing works for me. This is my xaml code.

<StackLayout Padding="10">
            <CollectionView x:Name="list" ItemsSource="{Binding samplelist}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="2" HorizontalItemSpacing="10" VerticalItemSpacing="10" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">                        
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Green" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                        <Frame  CornerRadius="10"  HasShadow="False" BackgroundColor="{Binding BackgroundTest,Mode=TwoWay}" HeightRequest="75" Margin="5,0,0,0" >
                            <StackLayout Orientation="Vertical">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={x:Reference test}, Path=BindingContext.textselected}"
                                                          CommandParameter="{Binding .}"/>
                                </StackLayout.GestureRecognizers>

This my code in view model

private string _backgroundTest;
        public string BackgroundTest
        {
            get { return _backgroundTest; }
           
           // set => SetProperty(ref _backgroundTest, value);
            set
               {
                  if (value == _backgroundTest)
                       return;

                _backgroundTest = value;
                        OnPropertyChanged(nameof(BackgroundTest));
               }
        }
 private async void clicked(Test test)
        {
            BackgroundTest = "#F95F62";
}

I referred the following links How to change color of Frame control when clicked in Xamarin.Forms with MVVM

Xamarin how to change background color on button click MVVM

But nothing worked.I have no clue how to fix this. Any suggestions?

CodePudding user response：

BackgroundColor expects a Color, but you are returning a string. Try using a Converter, or just use a Color property instead of a string

Option A: Use a Value converter to convert a string to Color (check the documentation)

Create the converter class
Add it to your App.Xaml

Modify your Frame binding Xaml

<Frame  CornerRadius="10"  HasShadow="False" BackgroundColor="{Binding BackgroundTest,Mode=TwoWay, Converter={StaticResource colorConverter}}" HeightRequest="75" Margin="5,0,0,0" >

Option B: Modify your binding to be a Color type

private Color _backgroundTest;
        public Color BackgroundTest
        {
            get { return _backgroundTest; }           
            set
               {
                  if (value == _backgroundTest)
                       return;

                _backgroundTest = value;
                        OnPropertyChanged(nameof(BackgroundTest));
               }
        }
 private async void clicked(Test test)
        {
            BackgroundTest = ColorConverters.FromHex("#F95F62");
}

For both cases:

In your code the BackgroundColor of the Frame is inside a CollectionView, so the binding will be looking for the property inside the Item. It should look it inside the ViewModel

BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}},Path=BackgroundTest}"