title: How to set color only for the selected frame in collection view using MVVM in Xamarin forms?
body: <p>I am binding the <strong>background color</strong> for frame in collection view using <strong>RelativeSource binding</strong>. But the <strong>background color is changing for all the frames</strong> inside the collection view. I need to <strong>set the background color for only the frame which I am selecting</strong>.</p>
  <p>This is my <strong>xaml code</strong></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;StackLayout Padding=&quot;10&quot;&gt;
      &lt;CollectionView x:Name=&quot;list&quot; ItemsSource=&quot;{Binding samplelist}&quot;&gt;
          &lt;CollectionView.ItemsLayout&gt;
              &lt;GridItemsLayout Orientation=&quot;Vertical&quot; Span=&quot;2&quot; HorizontalItemSpacing=&quot;10&quot; VerticalItemSpacing=&quot;10&quot; /&gt;
          &lt;/CollectionView.ItemsLayout&gt;
          &lt;CollectionView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;StackLayout&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup Name=&quot;CommonStates&quot;&gt;                        
                              &lt;VisualState Name=&quot;Selected&quot;&gt;
                                  &lt;VisualState.Setters&gt;
                                      &lt;Setter Property=&quot;BackgroundColor&quot; Value=&quot;Green&quot; /&gt;
                                  &lt;/VisualState.Setters&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Frame  CornerRadius=&quot;10&quot;  HasShadow=&quot;False&quot; BackgroundColor=&quot;{Binding BackgroundTest,Mode=TwoWay, Converter={StaticResource colorConverter}}&quot; HeightRequest=&quot;75&quot; Margin=&quot;5,0,0,0&quot; &gt;
                          &lt;StackLayout Orientation=&quot;Vertical&quot;&gt;
                              &lt;StackLayout.GestureRecognizers&gt;
                                  &lt;TapGestureRecognizer Command=&quot;{Binding Source={x:Reference test}, Path=BindingContext.TriggerScene}&quot;
                                                                CommandParameter=&quot;{Binding .}&quot;/&gt;
                              &lt;/StackLayout.GestureRecognizers&gt;
  </code></pre>
  <p>This is my code in <strong>Viewmodel</strong></p>
  <pre class="lang-cs prettyprint-override"><code>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;
      }
  }
  </code></pre>
  <p>I have gone through some fixes like</p>
  <p><a href="https://stackoverflow.com/questions/56701800/how-to-access-child-elements-in-a-collection-view">how to access child elements in a collection view?</a></p>
  <p>but nothing helped. I also tried <strong>SelectionChanged</strong> event.But the problem with <strong>SelectionChanged is that it doesn't trigger properly</strong> because there is <strong>TapGestureRecognizer</strong> in my frame. I want the color binding for the selected frame in my <strong>TriggerScene command</strong>
  of TapGestureRecognizer in my <strong>viewmodel</strong>. I don't want to use code behind. I have no clue how to fix this any suggestions?</p>