1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to show image in SfComboBox Text

How to show image in SfComboBox Text

Hi, i have combo box like this



When select any item the text of combo box only show DisplayMemberPath in this case is CountryName + PhoneCode


But i want to show the Flag icon with them so it will be FlagIcon CountryName PhoneCode.

So how can i display like that ?




5 Replies
AS Anandraj Selvam Syncfusion Team February 11, 2020 01:57 PM UTC

Hi Kien Phat, 
 
Greetings from the Syncfusion. 
 
We would like to let you know that we have checked the reported query and we have achieved your requirement using the CustomView. We have set the image and text of the selected item to the custom view in SelectionChanged event as in below: 
 
Code Snippet: 
 
<combobox:SfComboBox.CustomView> 
     <Grid Margin="40,0,0,0"> 
         <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="30"/> 
             <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <Image x:Name="image" HeightRequest="30" /> 
         <Label x:Name="label" Grid.Column="1" VerticalTextAlignment="Center"/> 
     </Grid> 
</combobox:SfComboBox.CustomView> 
 
 
private void ComboBox_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e) 
{ 
     label.Text = (e.Value as Country).Name; 
     image.Source = (e.Value as Country).CountryImage; 
} 
 
 
Please revert us for further investigation. 
 
Regards 
Anand Raj S. 


KI Kien.Phat February 12, 2020 10:42 AM UTC

Using <CustomView> will make my screen blank



AS Anandraj Selvam Syncfusion Team February 13, 2020 12:59 PM UTC

Hi Kien Phat, 

Thanks for the update. 

We were not able to reproduce the reported issue at our end. Could you please confirm whether the reported issue reproduced in our provided sample in the previous update. 

Sample Link: 
Since we are not aware of your exact application scenario, could you please share the following details to check it further and provide a possible solution at earlier.  

·       Modifying the provided sample to replicate the issue  
·       If possible, can you please share the issue reproducing sample along with the replication procedure. 
 
Here is the screenshot from the sample that we have provided. 
 
Screenshot:  
 
  
 Regards,  

 Anand Raj S.



MY Michael Yui Fai Poon replied to Anandraj Selvam May 13, 2021 03:02 PM UTC

Hi Kien Phat, 

Thanks for the update. 

We were not able to reproduce the reported issue at our end. Could you please confirm whether the reported issue reproduced in our provided sample in the previous update. 

Sample Link: 
Since we are not aware of your exact application scenario, could you please share the following details to check it further and provide a possible solution at earlier.  

·       Modifying the provided sample to replicate the issue  
·       If possible, can you please share the issue reproducing sample along with the replication procedure. 
 
Here is the screenshot from the sample that we have provided. 
 
Screenshot:  
 
  
 Regards,  

 Anand Raj S.



Hi,

Is it possible to achieve this in XAML only?

I want to apply this in multiple sections accross the application, but modifying back end would make this much more difficult.



KG Kanimozhi Gunasekaran Syncfusion Team May 14, 2021 07:17 AM UTC

Hi Michael Yui Fai Poon,

We have analyzed your requirement in SfComboBox. As per your requirement, we have used all xaml codes in code behind.  We have modified the same in sample.

Code snippet: 
 
            SfComboBox comboBox = new SfComboBox() 
            { 
                HeightRequest = 40, 
                ImageMemberPath = "CountryImage", 
                DisplayMemberPath = "Name", 
                DropDownItemHeight = 50, 
            }; 
            comboBox.SetBinding(SfComboBox.DataSourceProperty, "CountryCollection"); 
            comboBox.SelectionChanged += ComboBox_SelectionChanged; 
            Grid customGrid = new Grid 
            { 
                ColumnDefinitions = 
                { 
                   new ColumnDefinition{Width=new GridLength(30) }, 
                   new ColumnDefinition{Width=new GridLength(1, GridUnitType.Star) } 
                }, 
                Margin = new Thickness(40, 0, 0, 0) 
            }; 
 
            customImage = new Image(); 
            customImage.HeightRequest = 30; 
            customLabel = new Label(); 
            customLabel.VerticalTextAlignment = TextAlignment.Center; 
            customGrid.Children.Add(customImage); 
            Grid.SetColumn(customImage, 0); 
            customGrid.Children.Add(customLabel); 
            Grid.SetColumn(customLabel, 1); 
            comboBox.CustomView = customGrid; 
            DataTemplate itemTemplate = new DataTemplate(() => 
            { 
                Grid grid = new Grid 
                { 
                    ColumnDefinitions = 
                    { 
                      new ColumnDefinition{Width=new GridLength(30) }, 
                      new ColumnDefinition{Width=new GridLength(1, GridUnitType.Star) } 
                  } 
                }; 
                Image image; 
                Label label; 
                image = new Image(); 
                image.SetBinding(Image.SourceProperty, "CountryImage"); 
                label = new Label(); 
                label.SetBinding(Label.TextProperty, "Name"); 
                label.VerticalTextAlignment = TextAlignment.Center; 
                grid.Children.Add(image); 
                Grid.SetColumn(image, 0); 
                grid.Children.Add(label); 
                Grid.SetColumn(label, 1); 
                return new ViewCell { View = grid }; 
            }); 
            comboBox.ItemTemplate = itemTemplate; 
 
            layout.Children.Add(comboBox); 
            this.Content = layout; 

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

Please check with above sample and let us know if you have any concern on this.

Regards,
Kanimozhi G.  


Loader.
Up arrow icon