Category / Section
How to Add image and button in the Drop down items
2 mins read
Syncfusion Autocomplete in Xamarin provides a support to add image and buttons in the popup.
To add image and button for drop down in Autocomplete follow the below given procedure:
Step 1: Create the autocomplete sample with all necessary assemblies refer.
Step 2: Add necessary images in the Drawable folder that has to be shown on to the drop-down list.
Step 3: Use the below code snippets as such to get the exact output.
The below code illustrates the way to achieve this.
Xaml Code:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="5,0,0,0" >
<Image Source="{Binding Image}" HeightRequest="40" WidthRequest="40" Aspect="AspectFit"/>
<Button Text="{Binding Label}" TextColor="Black" WidthRequest="200" />
</StackLayout>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="50" >
<autocomplete:SfAutoComplete x:Name="autocomplete" DisplayMemberPath="Label" MaximumDropDownHeight="260" DropDownItemHeight="50" ItemTemplate="{StaticResource itemTemplate}" DataSource="{Binding ItemsCollection}" HeightRequest="60" WidthRequest="400" />
</StackLayout>
</ContentPage.Content>
Code Behind Code:
namespace Autocomplete
{
public partial class AutocompletePage : ContentPage
{
public AutocompletePage()
{
InitializeComponent();
autocomplete.BindingContext = new AutoCompleteViewModel();
}
public class AutoCompleteModel
{
public AutoCompleteModel(string label, string imagestr)
{
Label = label;
Image = imagestr;
}
private string _label;
public string Label
{
get { return _label; }
set { _label = value; }
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
public class AutoCompleteViewModel
{
public AutoCompleteViewModel()
{
ItemsCollection.Add(new AutoCompleteModel("James", "image1.png"));
ItemsCollection.Add(new AutoCompleteModel("Jaren", "image2.png"));
ItemsCollection.Add(new AutoCompleteModel("Jarius", "image3.png"));
ItemsCollection.Add(new AutoCompleteModel("Jasdeep", "image4.png"));
ItemsCollection.Add(new AutoCompleteModel("Jasvir", "image5.png"));
}
private ObservableCollection<AutoCompleteModel> itemsCollection = new ObservableCollection<AutoCompleteModel>();
public ObservableCollection<AutoCompleteModel> ItemsCollection
{
get { return itemsCollection; }
set { itemsCollection = value; }
}
}
}
}
Image for Image and Button on Drop Down Items:
Note:
Add the required images in drawable folder (Android), Resources folder(iOS) and at project location for UWP.
Sample Link: Sample
