How to show dropdown icon to the left of Xamarin.Forms ComboBox?
The SfComboBox in Xamarin.Forms provides support to add a custom view instead of default entry.
This section explains how to add Drop-down Icon to the left side of the control using the Custom View.
Refer this Gettingstarted documentation, to create a simple SfComboBox sample and its configuration.
Step 1: Create a CustomComboBox control by inheriting from the SfComboBox control.
public class CustomComboBox: SfComboBox
{
}
Step 2: Create the Model class with the properties need to be assigned.
public class Employee
{
private string name;
public string Name
{
get {return name;}
set {name = value;}
}
}
Step 4: Create the View Model class and add a collection that needs to be bound with the data source.
public class EmployeeViewModel
{
private ObservableCollection<Employee> employeeCollection;
public ObservableCollection<Employee> EmployeeCollection
{
get {return employeeCollection;}
set {employeeCollection = value;}
}
public EmployeeViewModel()
{
employeeCollection = new ObservableCollection<Employee>();
employeeCollection.Add(new Employee() { Name = "Frank" });
employeeCollection.Add(new Employee() { Name = "James" });
employeeCollection.Add(new Employee() { Name = "Steve" });
employeeCollection.Add(new Employee() { Name = "Lucas" });
employeeCollection.Add(new Employee() { Name = "Mark" });
employeeCollection.Add(new Employee() { Name = "Michael" });
employeeCollection.Add(new Employee() { Name = "Aldrin" });
employeeCollection.Add(new Employee() { Name = "Jack" });
employeeCollection.Add(new Employee() { Name = "Howard" });
}
}
Step 5: Initialize the CustomComboBox in XAML page with the Custom View property, DropDownButtonSettings and set Binding Context for this.
In Dropdown Settings, set the Height and Width to 0 to hide the default drop-down button. In Custom View, add an image button for a drop-down and label to show a selected item instead of entry.
<StackLayout>
<local:CustomComboBox x:Name="comboBox"
HeightRequest="40"
MaximumDropDownHeight="200"
ValueChanged="ComboBox_ValueChanged"
DataSource="{Binding EmployeeCollection}"
DisplayMemberPath="Name">
<local:CustomComboBox.CustomView>
<StackLayout BackgroundColor="White" Orientation="Horizontal"
Padding="5,5,5,5" VerticalOptions="Center">
<ImageButton HeightRequest="30" Padding="5,5,5,5"
BackgroundColor="White" WidthRequest="30"
Source="Dropdown.png" Clicked="ImageButton_Clicked"/>
<Label x:Name="labelText" VerticalTextAlignment="Center"
FontSize="18"/>
</StackLayout>
</local:CustomComboBox.CustomView>
<local:CustomComboBox.DropDownButtonSettings>
<comboBox:DropDownButtonSettings Height="0" Width="0"/>
</local:CustomComboBox.DropDownButtonSettings>
</local:CustomComboBox>
</StackLayout>
Step 6: The drop-down opening and closing can be handled by Image Button Clicked event and the label text is updated in the SfComboBox Value Changed as like the below code snippet.
private void ComboBox_ValueChanged(object sender, Syncfusion.XForms.ComboBox.ValueChangedEventArgs e)
{
labelText.Text = e.Value;
}
private void ImageButton_Clicked(object sender, EventArgs e)
{
if (comboBox.IsDropDownOpen)
{
comboBox.IsDropDownOpen = false;
}
else
{
comboBox.IsDropDownOpen = true;
}
}
Step 7: In UWP, the space is still present for the Drop-down in the right side. To resolve this issue by using the Custom Renderer to set the dropdown button minimum width and minimum height to 0.
public class CustomRenderer: SfComboBoxRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e)
{
base.OnElementChanged(e);
if (Control != null)
{
SetInternalProperty(Control, "DropDownButtonMinimumWidth", 0.0);
SetInternalProperty(Control, "DropDownButtonMinimumHeight", 0.0);
}
}
private static void SetInternalProperty(Syncfusion.XForms.UWP.ComboBox.SfComboBox nativeComboBox, string propertyName, Object value)
{
var property = typeof(Syncfusion.XForms.UWP.ComboBox.SfComboBox).GetProperty(propertyName, BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public);
if (property != null)
{
property.SetValue(nativeComboBox, value);
}
}
}
Output
|
You can find the sample in the following link.
Conclusion
I hope you enjoyed learning how to show the dropdown icon to the left of Xamarin.Forms ComboBox.
You can refer to our Xamarin ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin ComboBox example to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
