DataTemplate OnSelectTemplate Not Working Xamarin.Forms

Question

I have a CollectionView which has 1 Frame inside, and the backgroundcolor of the Frame would change bases on the string value of the variable "GetColor" that collects string data from each object of Database, but the backgroundcolor of the Frame remains as "Red" all the time.

#CollectionView

  <CollectionView Margin="5" ItemsSource="{Binding ListGroupData}"  
  ItemsUpdatingScrollMode="KeepLastItemInView" ItemTemplate="{StaticResource 
  GroupDataTemplateSelector}" VerticalOptions="FillAndExpand" 
  HorizontalOptions="FillAndExpand"/>

  <ResourceDictionary>
        <DataTemplate x:Key="RedTemplate">
            <StackLayout>

                <Frame HasShadow="False" Padding="10" HorizontalOptions="StartAndExpand" 
                BackgroundColor="Red" 
                CornerRadius="15">
                    <Label Text="{Binding Name}" TextColor="Black"/>
                </Frame>

            </StackLayout>
        </DataTemplate>

        <DataTemplate x:Key="GreenTemplate">
            <StackLayout>

                <Frame HasShadow="False" Padding="10" HorizontalOptions="EndAndExpand" 
                BackgroundColor="Green" 
                CornerRadius="15">
                    <Label Text="{Binding Name}" TextColor="Black"/>
                </Frame>

            </StackLayout>
        </DataTemplate>
        <Local:GroupDataViewModel x:Key="GroupDataTemplateSelector" RedTemplate=" 
    {StaticResource 
    RedTemplate}" GreenTemplate="{StaticResource GreenTemplate}"/>
 </ResourceDictionary>

#TemplateSelector Code

 protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (GetColor == "Red")
            return RedTemplate;
        else
            return GreenTemplate;
    }
 public DataTemplate RedTemplate { get; set; }
 public DataTemplate GreenTemplate { get; set; }

#Public Variable

 public string GetColor;
 public ObservableCollection<GroupData> ListGroupData = new ObservableCollection<GroupData>();

#Supported Code

 FirebaseClient fc = new FirebaseClient("...");
 var result = await fc.Child("GroupData").OnceAsync<GroupData>();
 foreach (var item in result)
 {
   GetColor = item.Object.Color;
   ListGroupData.Add(item.Object);
 }
 ///this part the item that is being added to the ListGroupData(CollectionView) suppose to 
 have different backgroundcolor bases on its data

Answer 1

You dont need the public property GetColor . Because that property gets evaluated for every object in the collection, not in the viewmodel.

You will need to modify your Template selector

 protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        //Your list is a list of GroupData. then you will need to cast item to the type of your object
        var targetColor =  (GroupData)item.Color;
        if (targetColor == "Red") //this if the item.Color is String
            return RedTemplate;
        else
            return GreenTemplate;
    }

PD:

Or if your item.Color is a Color type, you can just use it inside the CollectionView.ItemTemplate to colour your Frame.You just have to add a binding to that property. (and you can delete all the TemplateSelector code)

If your item.Color is not a Color type, you will have to add a Converter (you will have to code it), to transform the value into a Color.

            <CollectionView Margin="5" 
                            ItemsSource="{Binding ListGroupData}"  
                            ItemsUpdatingScrollMode="KeepLastItemInView" 
                            VerticalOptions="FillAndExpand" 
                            HorizontalOptions="FillAndExpand">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Frame HasShadow="False" 
                                   Padding="10" 
                                   HorizontalOptions="EndAndExpand" 
                                   BackgroundColor="{Binding Color}" 
                                   CornerRadius="15">
                                <Label Text="{Binding Name}" TextColor="Black"/>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

---

Happy coding!