Customize the background color in SfComboBox

[Julio Cézar]

Hello!

I use Xamarin.Forms with the SfComboBox component.

I need to customize the background of each combobox item based on a value in my class.

The datasource of the combobox is prrenched with a List <Product>.

The Product class is composed by: int idproduct, string dsproduct, int amount.

I need to change the background color of each item based on the amount field, for example: if amount <= 0 the background should be red, if amount > 0 the background should be blue.

Does anyone have an example of how to do this?

Can you help?

[Muneesh Kumar G]

Hi Julio, 

 

Greetings from Syncfusion.  

 

We have analyzed your requirement and you can achieve this by using DataTemplateSelector support, it has been implemented in our latest 17.2.0.28 Beta version.  

 

We have prepared a sample for the same. Please have the sample from the below link, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxDataTemplateSelector784265864 

 

Code Snippet: 

XAML: 

<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="default">
.. 

            </DataTemplate>
            <DataTemplate x:Key="specific">
..
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
    <StackLayout>
        <Label Text="High performance Mobiles" FontSize="Medium" FontAttributes="Bold"/>
        <Label Text="Choose a Device to place order" FontAttributes="None" FontSize="Micro"/>
            <combobox:SfComboBox DataSource="{Binding Data}" x:Name="comboBox" DisplayMemberPath="dsproduct">
                <combobox:SfComboBox.ItemTemplate>
                    <local:MyDataTemplateSelector 
                        DefaultTemplate="{StaticResource default}" 
                        SpecificDataTemplate="{StaticResource specific}"/>
                </combobox:SfComboBox.ItemTemplate>
            </combobox:SfComboBox>
        </StackLayout>
    </ContentPage.Content>
</ContentPage> 

  

C#  

 

 protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var message = item as Product;
           
            return message.amount <= 0 ? DefaultTemplate : SpecificDataTemplate;
        } 

 

 

Screenshot :  

 

Please check with the sample and let us know if you have any concern. 

 

Regards, 

Muneesh Kumar G.  

 

[Julio Cézar]

Thank you

[Muneesh Kumar G]

Hi Julio,  

 

Please let us know if you have any other queries.  

 

Regards, 

Muneesh Kumar G. 

 

[Julio Cézar]

At the moment, none.

Everything working perfectly.

Thank you.

[Muneesh Kumar G]

Hi Julio,   

  

Thank you.  

  

Regards,  

Muneesh Kumar G.