Sunday, 3 October 2021

How to set color only for the selected frame in collection view using MVVM in Xamarin forms?

I am binding the background color for frame in collection view using RelativeSource binding. But the background color is changing for all the frames inside the collection view. I need to set the background color for only the frame which I am selecting. 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, Converter={StaticResource colorConverter}}" HeightRequest="75" Margin="5,0,0,0" >
                            <StackLayout Orientation="Vertical">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={x:Reference test}, Path=BindingContext.TriggerScene}"
                                                          CommandParameter="{Binding .}"/>
                                </StackLayout.GestureRecognizers>

This is my code in Viewmodel

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

                _backgroundTest = value;
                        OnPropertyChanged(nameof(BackgroundTest));
               }
        }
 private async void TriggerScene(Scene scene)
        {
            
            if (FrameColorChange==true)
            {
                BackgroundTest = Color.Gray;
                FrameColorChange = false;
            }
            else
            {
                BackgroundTest = Color.White;
                FrameColorChange = true;
            }
}

I have gone through some fixes like

how to access child elements in a collection view?

but nothing helped. I also tried SelectionChanged event.But the problem with SelectionChanged is that it doesn't trigger properly because there is TapGestureRecognizer in my frame. I want the color binding for the selected frame in my TriggerScene command of TapGestureRecognizer in my viewmodel. I don't want to use code behind. I have no clue how to fix this any suggestions?



from How to set color only for the selected frame in collection view using MVVM in Xamarin forms?

No comments:

Post a Comment