This article demonstrates how to prevent the Syncfusion .NET MAUI ComboBox dropdown from closing unexpectedly when placed inside a ScrollView and using WindowSoftInputModeAdjust.Resize on Android. The layout resizes when the keyboard appears in the WindowSoftInputModeAdjust.Resize mode, causing the dropdown to close. You can handle this dropdown closing using the OnSizeAllocated and DropDownClosing events. To prevent the dropdown from closing during resizing, use the following approach: Track layout resizing using a flag. Override OnSizeAllocated to detect when the layout is resized. Handle the DropDownClosing event to prevent closing during resizing. C# Code public partial class MainPage : ContentPage { private bool isResizing; // Flag to track resizing public MainPage() { InitializeComponent(); App.Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize); } protected override void OnSizeAllocated(double width, double height) { base.OnSizeAllocated(width, height); isResizing = true; } private async void SfComboBox_DropDownClosing(object sender, Syncfusion.Maui.Core.DropDownCancelEventArgs e) { if (isResizing) { e.Cancel = true; // Prevent closing during resizing } await Task.Delay(200); // Add required delay to ensure UI updates properly after resizing isResizing = false; } } XAML <ScrollView> <VerticalStackLayout> <editors:SfComboBox x:Name="comboBox" Placeholder="Select an item" DropDownClosing="SfComboBox_DropDownClosing"> <editors:SfComboBox.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Apple</x:String> <x:String>Banana</x:String> <x:String>Cherry</x:String> </x:Array> </editors:SfComboBox.ItemsSource> </editors:SfComboBox> </VerticalStackLayout> </ScrollView> Explanation OnSizeAllocated: Detects when the screen resizes due to keyboard appearance. isResizing flag: Prevents the dropdown from closing when resizing occurs. DropDownClosing event: Cancels closing when isResizing is true. Task.Delay(400): Ensures a short delay to update the UI after resizing. Download the complete sample from the GitHub. Conclusion We hope you enjoyed learning how to prevent unexpected closure of the .NET MAUI ComboBox Dropdown. For more information, refer to our .NET MAUI ComboBox’s feature tour page for additional capabilities. You can also explore our .NET MAUI ComboBox documentation for further details. If you’re a Syncfusion customer, access our .NET MAUI components on the License and Downloads page. New to Syncfusion? Try our 30-day free trial to experience the .NET MAUI ComboBox and other powerful .NET MAUI components. Feel free to reach out in the comments below with any questions or for further clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We’re here to help!
This article demonstrates how to apply a full rectangular border to the .NET MAUI ComboBox on all platforms. By default, the ComboBox has a full rectangular border on Mac and iOS platforms. However, on Windows and Android, it only has a bottom border. To achieve a consistent rectangular border across all platforms, you can set the ShowBorder property to False to remove the default border and then wrap the ComboBox inside a Border control. This approach allows you to fully customize the border’s color, thickness, and shape to achieve the desired appearance. Here’s how: XAML <Border Stroke="Red" StrokeShape="RoundRectangle 5"> <editors:SfComboBox ShowBorder="False" Placeholder="Select Here" > <editors:SfComboBox.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Uganda</x:String> <x:String>Ukraine</x:String> <x:String>United States</x:String> <x:String>United Kingdom</x:String> <x:String>Uzbekistan</x:String> </x:Array> </editors:SfComboBox.ItemsSource> </editors:SfComboBox> </Border> In this example, the Border control surrounding the SfComboBox enables full control over the border color, width, and shape. Here, we use a red rounded rectangle border with a radius of 5, creating a visually distinct ComboBox border. Output: Download the complete sample from the GitHub. Conclusion We hope you enjoyed learning how to apply full rectangular border to the .NET MAUI ComboBox. For more information, refer to our .NET MAUI ComboBox’s feature tour page for additional capabilities. You can also explore our .NET MAUI ComboBox documentation for further details. If you’re a Syncfusion customer, access our .NET MAUI components on the License and Downloads page. New to Syncfusion? Try our 30-day free trial to experience the .NET MAUI ComboBox (SfComboBox) and other powerful .NET MAUI components. Feel free to reach out in the comments below with any questions or for further clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We’re here to help!
This article will guide you through the process of implementing multi-line text support in Xamarin.Forms ComboBox’s input field. Step 1: Create a custom SfComboBox control. A custom ComboBox control can be created by sub-classing the SfComboBox control as shown in the following codes. C# public class SfCustomComboBox:SfComboBox { } XAML <local:SfCustomComboBox DisplayMemberPath="Description" DataSource="{Binding Items}" HeightRequest="60"> <local:SfCustomComboBox.ItemTemplate> <DataTemplate> <Label Text="{Binding Description}" TextColor="Black" LineBreakMode="WordWrap" VerticalTextAlignment="Center" Margin="5" /> </DataTemplate> </local:SfCustomComboBox.ItemTemplate> </local:SfCustomComboBox> The custom SfComboBox control is created in .NET Standard library project and is simply a SfComboBox control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the custom SfComboBox control. Step 2: Create a custom renderer in Android. [assembly: ExportRenderer(typeof(SfCustomComboBox), typeof(CustomRenderer))] namespace ComboWordWrap.Droid { public class CustomRenderer:SfComboBoxRenderer { public CustomRenderer(Context context) : base(context) { } protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e) { base.OnElementChanged(e); Control.GetAutoEditText().SetLines(8); Control.GetAutoEditText().SetHorizontallyScrolling(false); } } } Output Download the complete sample in GitHub Conclusion Hope you enjoyed learning how to implement Multi-Line support in Xamarin ComboBox in Android. You can refer to our Xamarin ComboBox feature tour page to know about its other groundbreaking feature representations. 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!
You can use behaviors to handle events more modularly and reusable. Behaviors allow you to encapsulate the interaction logic in a separate class, making it easy to attach to different controls. Below is an example of how you can use behaviors for the SelectionChanged event in the .NET MAUI ComboBox. Step 1: Create the SelectionChangedBehaviors class for the SfComboBox behavior. C# public class SelectionChangedBehavior : Behavior<SfComboBox> { public Command Display { get; private set; } EmployeeViewModel employeeViewModel; protected override void OnAttachedTo(SfComboBox bindable) { bindable.SelectionChanged += Bindable_SelectionChanged; base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(SfComboBox bindable) { bindable.SelectionChanged -= Bindable_SelectionChanged; base.OnDetachingFrom(bindable); } async void Bindable_SelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e) { employeeViewModel = new EmployeeViewModel(); var selectedValue = e.CurrentSelection; var lastItem = selectedValue.Last(); employeeViewModel.SelectedId = new List<string>(); foreach (var item in selectedValue) { var selectedId = (item as Employee).Id; if (item == lastItem) { employeeViewModel.SelectedId.Add(selectedId); Application.Current.MainPage.DisplayAlert("Selected Id", "The last selected ID is " + selectedId, "Ok"); } else { employeeViewModel.SelectedId.Add(selectedId); } } } } Step 2: Attach the SelectionChangedBehavior to the ComboBox behaviors. XAML <ContentPage.BindingContext> <local:EmployeeViewModel/> </ContentPage.BindingContext> <StackLayout Padding="50,100,50,0"> <inputs:SfComboBox x:Name="comboBox" WidthRequest="200" IsEditable="True" SelectedIndex="2" DisplayMemberPath="Name" ItemsSource="{Binding EmployeeCollection}" MaxDropDownHeight = "180"> <inputs:SfComboBox.Behaviors> <local:SelectionChangedBehavior/> </inputs:SfComboBox.Behaviors> </inputs:SfComboBox> </StackLayout> You can find the sample in the following link. Output Conclusion: I hope you enjoyed learning how to use behaviors to manage the SelectionChanged event in .NET MAUI ComboBox(SfComboBox). Refer to our .NET MAUI ComboBox feature tour page for its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI 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 .NET MAUI ComboBox(SfComboBox ) and other .NET MAUI components. Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article illustrates how to close the keyboard when selecting an item from the dropdown in the .NET MAUI SfComboBox. To achieve this, please follow the steps below: Step 1: Install and Register the CommunityToolKit.Maui Install the CommunityToolkit.Maui package from the Manage NuGet Packages. After installing it, register the UseMauiCommunityToolkit method in the MauiProgram class for proper functionality, as demonstrated in the code sample below. MauiProgram.cs using CommunityToolkit.Maui; using Syncfusion.Maui.Core.Hosting; using Microsoft.Extensions.Logging; namespace SfComboBoxSample; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<app>() .ConfigureSyncfusionCore() .UseMauiCommunityToolkit() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); #if DEBUG builder.Logging.AddDebug(); #endif return builder.Build(); } } Step 2: Create the ComboBox control in the XAML In the XAML layout, populate the ComboBox with items using ItemSource and invoke the SelectionChanged event. Xaml <StackLayout WidthRequest="300" Spacing="20"> <inputs:SfComboBox x:Name="comboBox" HeightRequest="40" IsEditable="True" SelectionChanged="comboBox_SelectionChanged" BackgroundColor="White"> <inputs:SfComboBox.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>United States</x:String> <x:String>India</x:String> <x:String>France</x:String> <x:String>Italy</x:String> <x:String>Germany</x:String> <x:String>China</x:String> </x:Array> </inputs:SfComboBox.ItemsSource> </inputs:SfComboBox> </StackLayout> Step 3: Configure the Keyboard method in the Xaml.cs file Implement the HideKeyboardAsync method from the CommunityToolkit.Maui library within the SelectionChanged event method of SfComboBox. This method aids in closing the keyboard when an item is selected from the dropdown in the .NET MAUI SfComboBox, as illustrated in the following code sample. Xaml.cs private async void comboBox_SelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e) { var inputView = comboBox.Children[1]; if (KeyboardExtensions.IsSoftKeyboardShowing((ITextInput)inputView)) { await Task.Delay(200); await (inputView as Entry).HideKeyboardAsync(default); } } Output: Conclusion I hope you enjoyed learning how to close the keyboard when an item is selected from the dropdown in the .NET MAUI SfComboBox. Refer to our .NET MAUI SfComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and download page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components. Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums,Direct - Trac, or feedback portal. We are always happy to assist you!
This article demonstrates how to add new items dynamically to a .NET MAUI ComboBox (SfComboBox) control. Follow these steps to achieve this functionality. Step 1: Define the Data Model and ViewModel Create a model class to enclose vital properties like “Name” and “ID,” which will represent the attributes of the social media options. Next, establish a ViewModel class named “SocialMediaViewModel”. Then, define a property named “SocialMedias” that will store the list of social media details. public class SocialMedia { public string Name { get; set; } public int ID { get; set; } } public class SocialMediaViewModel { public ObservableCollection<socialmedia> SocialMedias { get; set; } public SocialMediaViewModel() { this.SocialMedias = new ObservableCollection<socialmedia>(); this.SocialMedias.Add(new SocialMedia() { Name = "Facebook", ID = 0 }); this.SocialMedias.Add(new SocialMedia() { Name = "Google Plus", ID = 1 }); this.SocialMedias.Add(new SocialMedia() { Name = "Instagram", ID = 2 }); this.SocialMedias.Add(new SocialMedia() { Name = "LinkedIn", ID = 3 }); this.SocialMedias.Add(new SocialMedia() { Name = "Skype", ID = 4 }); this.SocialMedias.Add(new SocialMedia() { Name = "Telegram", ID = 5 }); this.SocialMedias.Add(new SocialMedia() { Name = "Televzr", ID = 6 }); this.SocialMedias.Add(new SocialMedia() { Name = "Tik Tok", ID = 7 }); this.SocialMedias.Add(new SocialMedia() { Name = "Tout", ID = 8 }); } } Step 2: Create the XAML Layout In the XAML layout, integrate the ComboBox control and assign a predefined collection to its ItemsSource property. Then, add a button with its clicked event for adding new items. XAML: <ContentPage.Content> <StackLayout> <editors:SfComboBox x:Name="comboBox" WidthRequest="250" ItemsSource="{Binding SocialMedias}" Placeholder="Social Media" DisplayMemberPath="Name"/> <Button x:Name="AddItem" WidthRequest="100" HeightRequest="50" Text="Add Item" Clicked="AddItem_Clicked"/> </StackLayout> </ContentPage.Content> Step 3: Implement the Event Handler In the event handler method, add items dynamically to the ComboBox. C#: public partial class MainPage : ContentPage { SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); public MainPage() { InitializeComponent(); comboBox.BindingContext = socialMediaViewModel; } private void AddItem_Clicked(object sender, EventArgs e) { socialMediaViewModel.SocialMedias.Add(new SocialMedia() {Name = "YouTube",ID = 2 }); } } Output Conclusion I hope you enjoyed learning how to add new items to .NET MAUI ComboBox dynamically. Refer to our .NET MAUI feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components. Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!
This section explains how to prevent the display of empty dropdowns in the .NET MAUI ComboBox (SfComboBox) and provides solutions to address each scenario. In some instances, an empty collection may appear in the following factors: No Collection Provided to the DataSource To prevent an empty dropdown list, ensure that you provide a valid collection to the ItemSource property of the ComboBox. The ItemSource is responsible for populating the dropdown list with items. DisplayMemberPath Not Set for Corresponding Item Display Properly configure the DisplayMemberPath property to specify the path of the property that should be displayed for each item in the dropdown. This property is essential for correctly displaying textual information related to each item. XAML <ContentPage.Content> <editors:SfComboBox x:Name="comboBox" HeightRequest="50" WidthRequest="250" DisplayMemberPath="Name" ItemsSource="{Binding SocialMedias}" /> </ContentPage.Content> C#: public class SocialMedia { public string Name { get; set; } public int ID { get; set; } } public class SocialMediaViewModel { public ObservableCollection<socialmedia> SocialMedias { get; set; } public SocialMediaViewModel() { this.SocialMedias = new ObservableCollection<socialmedia>(); this.SocialMedias.Add(new SocialMedia() { Name = "Facebook", ID = 0 }); this.SocialMedias.Add(new SocialMedia() { Name = "Google Plus", ID = 1}); this.SocialMedias.Add(new SocialMedia() { Name = "Instagram", ID = 2 }); this.SocialMedias.Add(new SocialMedia() { Name = "LinkedIn", ID = 3 }); this.SocialMedias.Add(new SocialMedia() { Name = "Skype", ID = 4 }); this.SocialMedias.Add(new SocialMedia() { Name = "Telegram", ID = 5 }); this.SocialMedias.Add(new SocialMedia() { Name = "Televzr", ID = 6 }); this.SocialMedias.Add(new SocialMedia() { Name = "Tik Tok", ID = 7 }); this.SocialMedias.Add(new SocialMedia() { Name = "Tout", ID = 8 }); } } Collection Provided is not Optional Ensure that the collection you provide to the ComboBox DataSource is compatible. Since the SfComboBox DataSource type is IEnumerable, it’s recommended to use a collection type like List for proper compatibility. This approach helps avoid displaying an empty collection when using a source of type List. C# public MainPage() { InitializeComponent(); StackLayout layout = new StackLayout() { VerticalOptions = LayoutOptions.Start, HorizontalOptions = LayoutOptions.Start, Padding = new Thickness(30) }; List<object> resolutionList = new List<object>(); resolutionList.Add("1.2"); resolutionList.Add("1.3"); resolutionList.Add("1.4"); resolutionList.Add("1.5"); resolutionList.Add("1.6"); resolutionList.Add("1.7"); resolutionList.Add("1.8"); SfComboBox comboBox = new SfComboBox(); comboBox.HeightRequest = 40; comboBox.ItemsSource = resolutionList; layout.Children.Add(comboBox); Content = layout; } Output Conclusion Hope you enjoyed learning about how to prevent the display of empty dropdowns in the .NET MAUI ComboBox. You can refer to our .NET MAUI ComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI 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 .NET MAUI ComboBox and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!
The following steps will enable you to successfully integrate images and labels into the drop-down items of the .NET MAUI ComboBox (SfComboBox). Step 1: Set up the ComboBox Sample with Required Assemblies Create a sample project that incorporates ComboBox for .NET MAUI. Ensure you include all the necessary assemblies to ensure seamless integration. XAML <editors:SfComboBox Placeholder="Select an employee" TextMemberPath="Name" DisplayMemberPath="Name" ItemsSource="{Binding Employees}" WidthRequest="280" HeightRequest="34"> Step 2: Include Images in the Designated Folder Prepare the required images and place them in the designated folder within the project. These images will enhance the visual representation of ComboBox items in the drop-down list. Step 3: Define the Model Class Craft a Model class that will hold the properties required for assignment to ComboBox items. This class should involve the necessary attributes, such as name and image references, which contribute to the appearance of each item. Model public class Employee { public string Name { get; set; } public string ProfilePicture { get; set; } } Step 4: Implement the ViewModel Create a ViewModel class named EmployeeViewModel within the project. Then, define the Employees property that holds the list of employee details. ViewModel: public class EmployeeViewModel { public ObservableCollection<Employee> Employees { get; set; } public EmployeeViewModel() { this.Employees = new ObservableCollection<Employee>(); Employees.Add(new Employee{Name = "Anne Dodsworth",ProfilePicture = "people_circle1.png",}); Employees.Add(new Employee{Name = "Andrew Fuller", ProfilePicture = "people_circle2.png",}); Employees.Add(new Employee{Name = "Emilio Alvaro", ProfilePicture = "people_circle4.png",}); Employees.Add(new Employee{Name = "Janet Laverl", ProfilePicture = "people_circle5.png",}); Employees.Add(new Employee{Name = "Laura Challehan",ProfilePicture = "people_circle7.png",}); } } Step 5: Bind the Image within the ItemTemplate After creating the sample in XAML, place the ItemTemplate within the ComboBox. Add image and label tags in this template, and bind the profile picture and name respectively. XAML: <editors:SfComboBox.ItemTemplate> <DataTemplate > <ViewCell> <HorizontalStackLayout HeightRequest="60" Spacing="5" VerticalOptions="Center" HorizontalOptions="Start"> <Image HorizontalOptions="Center" VerticalOptions="Center" Source="{Binding ProfilePicture}" /> <Label HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="{Binding Name}"/> </HorizontalStackLayout> </ViewCell> </DataTemplate> </editors:SfComboBox.ItemTemplate> Output Conclusion I hope you enjoyed learning how to add images and labels in the dropdown item in .NET MAUI ComboBox (SfComboBox). Refer to our .NET MAUI ComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and download page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components. Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!
This section explains how to bind the SelectedItem property of a .NET MAUI ComboBox with a ViewModel in a .NET MAUI application. This allows efficient data management and synchronization between user interactions and data representation. Steps: Step 1: Create a Model Class Begin by creating a model class that encapsulates essential properties such as Name and ID. These properties represent attributes of the social media options. Model Class: public class SocialMediaModel { public string Name { get; set; } public int ID { get; set; } } Step 2: Build a ViewModel Class Create a ViewModel class that inherits from INotifyPropertyChanged. Implement the necessary event and method for the property change notifications. Include a collection property to facilitate binding for multiple selected items. Since the SelectedItem property is of object type, the ViewModel should accommodate for multiple selections. ViewModel: public class SocialMediaViewModel : INotifyPropertyChanged { private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));} public event PropertyChangedEventHandler PropertyChanged; private object _selectedItem; public object SelectedItem { get { return _selectedItem; } set { _selectedItem = value; NotifyPropertyChanged("SelectedItem"); } } public ObservableCollection<SocialMedia> SocialMedias { get; set; } public SocialMediaViewModel() { SocialMedias = new ObservableCollection<SocialMedia> { new SocialMedia() { Name = "Facebook", ID = 0 }, new SocialMedia() { Name = "Google Plus", ID = 1 }, new SocialMedia() { Name = "Instagram", ID = 2 }, new SocialMedia() { Name = "LinkedIn", ID = 3 }, new SocialMedia() { Name = "Skype", ID = 4 }, new SocialMedia() { Name = "Telegram", ID = 5 }, new SocialMedia() { Name = "Televzr", ID = 6 }, new SocialMedia() { Name = "Tik Tok", ID = 7 }, new SocialMedia() { Name = "Tout", ID = 8 }, new SocialMedia() { Name = "Tumblr", ID = 9 }, new SocialMedia() { Name = "Twitter", ID = 10 }, new SocialMedia() { Name = "Vimeo", ID = 11 }, new SocialMedia() { Name = "WhatsApp", ID = 12 }, new SocialMedia() { Name = "YouTube", ID = 13 } }; SelectedItem = SocialMedias.ElementAtOrDefault(3); } } Step 3: Bind ComboBox SelectedItem Property In your XAML layout, add the ComboBox control to visually display the social media options for the selection. Bind the SelectedItem property of the ComboBox control to the corresponding property within your ViewModel. XAML: <StackLayout> <editors:SfComboBox WidthRequest="150" HeightRequest="50" ItemsSource="{Binding SocialMedias}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" SelectedValuePath="Name" /> </StackLayout> Output Conclusion Hope you enjoyed learning about how to bind SelectedItem of ComboBox with View Model in .NET MAUI. You can refer to our .NET MAUI ComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI 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 .NET MAUI ComboBox and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!
You can select the dropdown items programmatically by adding the items into DropDownListView.CheckedItems collection in WinForms SfComboBox control. C# foreach (var selectedItems in this.sfComboBox1.DropDownListView.View.Items.ToList()) { //Programmatically add the checked items this.sfComboBox1.DropDownListView.CheckedItems.Add(selectedItems); } Output: Sample: View in GitHub.
You can select the combobox item based on the index value of WinForms SfComboBox control by using SelectedIndex property. You can also select the item using SelectedItem property. Refer the below code for your reference. C# List<State> list = GetData(); SfComboBox sfComboBox1 = new SfComboBox(); sfComboBox1.Size = new Size(150, 28); sfComboBox1.Location = new Point(138, 56); sfComboBox1.DataSource = list; //Bind the Display member and Value member to the data source sfComboBox1.DisplayMember = "DispValue"; sfComboBox1.ValueMember = "SfValue"; sfComboBox1.ComboBoxMode = Syncfusion.WinForms.ListView.Enums.ComboBoxMode.SingleSelection; sfComboBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend; sfComboBox1.AutoCompleteSuggestMode = Syncfusion.WinForms.ListView.Enums.AutoCompleteSuggestMode.Contains; sfComboBox1.MaxDropDownItems = 10; //Select the item based on index sfComboBox1.SelectedIndex = list[1].SfValue; //Select the item based on item sfComboBox1.SelectedItem = list[1]; this.Controls.Add(sfComboBox1); VB Dim list As List(Of State) = GetData() Dim sfComboBox1 As New SfComboBox() sfComboBox1.Size = New Size(150, 28) sfComboBox1.Location = New Point(138, 56) sfComboBox1.DataSource = list 'Bind the Display member and Value member to the data source sfComboBox1.DisplayMember = "DispValue" sfComboBox1.ValueMember = "SfValue" sfComboBox1.ComboBoxMode = Syncfusion.WinForms.ListView.Enums.ComboBoxMode.SingleSelection sfComboBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend sfComboBox1.AutoCompleteSuggestMode = Syncfusion.WinForms.ListView.Enums.AutoCompleteSuggestMode.Contains sfComboBox1.MaxDropDownItems = 10 'Select the item based on index sfComboBox1.SelectedIndex = list(1).SfValue 'Select the item based on item sfComboBox1.SelectedItem = list(1) Me.Controls.Add(sfComboBox1) Output: Sample: View sample in GitHub.
You can bind the SelectedItem property of SfComboBox control by using the DataBindings.Add() method. The below code shows how to bind the SelectedItem with the Selected property in ViewModel.cs. State.cs: public class State { private string shortName; private string longName; public State(string LongName, string ShortName) { this.longName = LongName; this.shortName = ShortName; } public string ShortName { get { return shortName; } } public string LongName { get { return longName; } } } ViewModel.cs: public class ViewModel { private List<State> items; public List<State> Items { get { return items; } set { items = value; } } private object selected; public object Selected { get { return selected; } set { selected = value; } } public ViewModel() { Items = new List<State>(); Items.Add(new State("Alaska", "AK")); Items.Add(new State("Arizona", "AZ")); Items.Add(new State("Colorado", "CO")); Items.Add(new State("Ontario", "ON")); Items.Add(new State("BritishColumbia", "BC")); Selected = Items[3]; } } Form1.cs: public partial class Form1 : Form { public Form1() { InitializeComponent(); ViewModel viewModel = new ViewModel(); sfComboBox1.DataSource = viewModel.Items; sfComboBox1.DisplayMember = "LongName"; sfComboBox1.ValueMember = "ShortName"; sfComboBox1.DataBindings.Add(new Binding("SelectedItem", viewModel,"Selected",true, DataSourceUpdateMode.OnPropertyChanged)); } } View sample in GitHub
Empty collection is displayed in SfComboBox for the following reasons. Collection is not provided to the DataSource. DisplayMemberPath is not set to the corresponding item to be displayed in an item. Collection provided is not optional to the DataSource. Collection is not provided to the DataSource PProvide the collection to the DataSource that will not result in empty drop-down being displayed. DisplayMemberPath iis s not set to the corresponding item to be displayed in an item. DisplayMemberPath property, specifies the property path with type of filtering is done on business objects. Code snippet [XAML] <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms" xmlns:local="clr-namespace:NamespaceName" x:Class="NamespaceName.ClassName"> <ContentPage.BindingContext> <local:EmployeeViewModel/> </ContentPage.BindingContext> <StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30"> <combobox:SfComboBox HeightRequest="40" x:Name="comboBox" DataSource="{Binding EmployeeCollection}" DisplayMemberPath="Name" /> </StackLayout> </ContentPage> Code snippet [C#] public class Employee { private int id; public int ID { get { return id; } set { id = value; } } private string name; public string Name { get { return name; } set { name = value; } } } public class EmployeeViewModel : INotifyPropertyChanged { private ObservableCollection<Employee> employeeCollection; public event PropertyChangedEventHandler PropertyChanged; public ObservableCollection<Employee> EmployeeCollection { get { return employeeCollection; } set { employeeCollection = value; } } private void RaisePropertyChanged(String name) { if (PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } public EmployeeViewModel() { employeeCollection = new ObservableCollection<Employee>(); employeeCollection.Add(new Employee() { ID = 1, Name = "Frank" }); employeeCollection.Add(new Employee() { ID = 2, Name = "James" }); employeeCollection.Add(new Employee() { ID = 3, Name = "Steve" }); employeeCollection.Add(new Employee() { ID = 4, Name = "Lucas" }); employeeCollection.Add(new Employee() { ID = 5, Name = "Mark" }); employeeCollection.Add(new Employee() { ID = 6, Name = "Michael" }); employeeCollection.Add(new Employee() { ID = 7, Name = "Aldrin" }); employeeCollection.Add(new Employee() { ID = 8, Name = "Jack" }); employeeCollection.Add(new Employee() { ID = 9, Name = "Howard" }); } Collection provided is not optional SfComboBox DataSource type is "IEnumerable<Object>". Hence, provide the List<object> type source to avoid the empty collection being displayed from the List<double> type. Code snippet [C#] public MainPage() { InitializeComponent(); StackLayout layout = new StackLayout() { VerticalOptions = LayoutOptions.Start, HorizontalOptions = LayoutOptions.Start, Padding = new Thickness(30) }; List<object> resolutionList = new List<object>(); resolutionList.Add("1.2"); resolutionList.Add("1.3"); resolutionList.Add("1.4"); resolutionList.Add("1.5"); resolutionList.Add("1.6"); resolutionList.Add("1.7"); resolutionList.Add("1.8"); SfComboBox comboBox = new SfComboBox(); comboBox.HeightRequest = 40; comboBox.DataSource = resolutionList; layout.Children.Add(comboBox); Content = layout; } Output FFind the sample link..
To position the DropDown based on the available space in Xamarin.Forms Combobox. Create a CustomRenderer for the respective Android sample. Create a method for providing the position for PopUpWindow. Call the method in the DropDownOpen and TextChanged event to achieve the positioning. Code snippet [C#] public class CustomComboBoxRenderer : SfComboBoxRenderer { Syncfusion.Android.ComboBox.SfComboBox nativeComboBox; public CustomComboBoxRenderer(Context context) : base(context) { } protected override void OnElementChanged(ElementChangedEventArgs<SfComboBox> e) { base.OnElementChanged(e); nativeComboBox = Control; Control.DropDownOpen += Control_DropDownOpen; Control.TextChanged += Control_TextChanged; } private void Control_TextChanged(object sender, Syncfusion.Android.ComboBox.TextChangedEventArgs e) { if (!string.IsNullOrEmpty(nativeComboBox.Text)) { setPopupPosition(); } } private void Control_DropDownOpen(object sender, EventArgs e) { if (!string.IsNullOrEmpty(nativeComboBox.Text)) { setPopupPosition(); } } private void setPopupPosition() { int[] location = new int[2]; nativeComboBox.GetLocationOnScreen(location); int x = location[0]; int y = location[1]; int ScreenWidth = Resources.DisplayMetrics.WidthPixels; if (y <= ScreenWidth / 2) { y += nativeComboBox.Height; nativeComboBox.GetAutoPopUpWindow().ShowAtLocation(nativeComboBox, GravityFlags.Top | GravityFlags.Start, x, y); } else { y = y - nativeComboBox.GetAutoPopUpWindow().Height; nativeComboBox.GetAutoPopUpWindow().ShowAtLocation(nativeComboBox, GravityFlags.Top | GravityFlags.Start, x, y); } } } You can find the sample in the following link.ConclusionI hope you enjoyed learning about how to position the DropDown based on the available space in Xamarin.Forms ComboBox.You can refer to our Xamarin.Forms ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.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 section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
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. ConclusionI 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!
This article describes, how to add separator line in WinForms SfComboBox dropdown items. This requirement can be achieved by handling SfComboBox.DropDownListView.DrawItem and MouseMove events.In the below code, need to set the CheckBoxStyle using reflection concepts to handle the state of checkbox at runtime, then draw the checkbox, item text and separator line manually. The MouseMove event handling is get the mouse hovering item index to highlight the dropdown item. private void DropDownListView_DrawItem(object sender, Syncfusion.WinForms.ListView.Events.DrawItemEventArgs e) { bool isEnableDraw = (this.sfComboBox1.ComboBoxMode == ComboBoxMode.MultiSelection && this.sfComboBox1.AllowSelectAll && this.sfComboBox1.DropDownListView.ShowCheckBoxes && e.ItemIndex == 0) ? false : (e.ItemData as Student).IsDraWSeparator; if (isEnableDraw) { e.Handled = true; var listView = sender as SfListView; var linearLayout = listView.GetType().GetProperty("LinearLayout", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(listView); var items = linearLayout.GetType().GetProperty("Items").GetValue(linearLayout) as List<ListViewItemInfo>; var checkBoxStyle = items[e.ItemIndex].GetType().GetProperty("CheckBoxStyle", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance); checkBoxStyle.SetValue(items[e.ItemIndex], listView.Style.CheckBoxStyle); //Fill the background color of mouse hover item. if (e.ItemIndex == mouseHoverItemIndex) e.Graphics.FillRectangle(new SolidBrush(listView.Style.SelectionStyle.HoverBackColor), e.Bounds); //Fill the background color of Selecteditem. if (sfComboBox1.SelectedIndex == e.ItemIndex) e.Graphics.FillRectangle(new SolidBrush(listView.Style.SelectionStyle.SelectionBackColor), new RectangleF(e.Bounds.X, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height - 2)); RectangleF bounds = new RectangleF(e.Bounds.X + 2, e.Bounds.Y + 2, e.Bounds.Width, e.Bounds.Height); //Draw the checkbox if MultiSelction and showcheckboxes are enabled. if (sfComboBox1.ComboBoxMode == ComboBoxMode.MultiSelection && this.sfComboBox1.DropDownListView.ShowCheckBoxes) { CheckBoxPainter.DrawCheckBox(e.Graphics, new Rectangle(e.Bounds.X + 2, e.Bounds.Y + 2, e.Bounds.Width, e.Bounds.Height - 2), listView.CheckedItems.Contains(e.ItemData) ? CheckState.Checked : CheckState.Unchecked, listView.Style.CheckBoxStyle); bounds = new RectangleF(e.Bounds.X + 20, e.Bounds.Y + 2, e.Bounds.Width, e.Bounds.Height - 2); } //Draw the listview item text. e.Graphics.DrawString((e.ItemData as Student).StudentName, this.Font, new SolidBrush(Color.FromArgb(255, 51, 51, 51)), bounds); //Draw the separator line. e.Graphics.DrawLine(new Pen(Color.Gray, width: 1) { DashPattern = new[] { 2f, 2f } }, e.Bounds.Left, e.Bounds.Bottom - 1, e.Bounds.Right, e.Bounds.Bottom - 1); } } int mouseHoverItemIndex = -1; private void SfComboBox1_MouseMove(object sender, MouseEventArgs e) { var list = (sender as SfListView); //Get the mouse over item index using mouse location. mouseHoverItemIndex = (sender as SfListView).GetRowIndexAtPoint(e.Location); list.Invalidate(); } The output for the above code is shown below: View sample in GitHub
In Xamarin.Forms ComboBox, you can add the SfBusyIndicator when the data is being loaded with the help of DropDownHeaderView or DropDownFooterView. In the following example, the SfBusyIndicator has been loaded in the DropDownFooterView until the data is fetched. Code snippets [Xaml]: <StackLayout Padding="10"> <Label Text="ComboBox"/> <comboBox:SfComboBox x:Name="comboBox" HeightRequest="45" IsEditableMode="True" SuggestionMode="Contains" MaximumDropDownHeight="150" ShowDropDownFooterView="True" DropDownFooterViewHeight="60" ValueChanged="comboBox_ValueChanged" NoResultsFoundText="No Results" AllowFiltering="True" DisplayMemberPath="Name"> <comboBox:SfComboBox.DropDownFooterView> <Grid VerticalOptions="StartAndExpand" HeightRequest="60" BackgroundColor="#f0f0f0" > <busyIndicator:SfBusyIndicator VerticalOptions="Start" x:Name="busyindicator" AnimationType="SlicedCircle" ViewBoxWidth = "40" ViewBoxHeight="40" TextColor="Maroon" IsBusy="True"/> </Grid> </comboBox:SfComboBox.DropDownFooterView> </comboBox:SfComboBox> </StackLayout> Code snippets [C#]: private async void DataChanged() { await Task.Delay(4000); busyindicator.IsBusy = false; comboBox.DropDownFooterViewHeight = 0; if (comboBox.DataSource == null) { LoadItems(); } } private void comboBox_ValueChanged(object sender, Syncfusion.XForms.ComboBox.ValueChangedEventArgs e) { DataChanged(); } Output:Please use the sample link for the clarification. ConclusionI hope you enjoyed learning about how to loading busy indicator in DropDownFooterView.You can refer to our Xamarin.Forms ComboBox feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ComboBox documentation to understand how to create 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 section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This section explains how to detect Tab Key Press event on SfComboBox by using custom renderer in UWP. Refer to this Getting started documentation to create a simple SfComboBox sample and configure it. Step 1: Create a custom combo box class in PCL as like public class CustomSfComboBox: SfComboBox { } Step 2: Create Custom renderer for the SfCombobox class in UWP and invoke the KeyDown event to detect the tab press key as like below code snippet [assembly: ExportRenderer(typeof(CustomSfComboBox), typeof(CustomComboBoxRenderer))] public class CustomComboBoxRenderer : SfComboBoxRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e) { base.OnElementChanged(e); if (Control != null) { Control.KeyDown += Control_KeyDown; } } private void Control_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e) { if (e.Key == Windows.System.VirtualKey.Tab) { Xamarin.Forms.Application.Current.MainPage.DisplayAlert("TabKey", "TabKeyPressed", "OK"); } } } Step 3: Initialize the CustomSfComboBox in XAML page as like below code snippet <customComboBox:CustomSfComboBox /> Output: You can find the sample in the following link
Step 1: Create a custom renderer for SfComboBox control. A custom SfComboBox control can be created by sub-classing the SfComboBox control as demonstrated in the following codes. XAML Mainpage.Xaml <ContentPage.Content> <ContentPage.Content> <StackLayout Padding="50"> <local:CustomComboBox IsEditableMode="true" /> </StackLayout> </ContentPage.Content> </ContentPage> C# MainPage.Xaml.cs public class CustomComboBox : SfComboBox { public CustomComboBox() { } } The custom SfComboBox control is created in .NET Standard library project, and it is simply an SfComboBox control. The customization of the control will be carried out in the custom renderer, so no additional implementation is required in the custom SfComboBox control. Step 2: Create a custom renderer in Android. C# [assembly : ExportRenderer(typeof(CustomComboBox),typeof(ComboBoxRenderer))] namespace Auto_Renderer.Droid { public class ComboBoxRenderer : SfComboBoxRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e) { base.OnElementChanged(e); if (Control != null) { //-----######-------- // Set the Email keyboard for android //-----######-------- Control.GetAutoEditText().InputType = Android.Text.InputTypes.TextVariationEmailAddress; } } } } The call to the base class's OnElementChanged method instantiates an Android SfComboBox with a reference to assign the control to the renderer's Control property. To add Email-Keyboard to SfComboBox in Android, use Android.Text.InputTypes.TextVariationEmailAddress. Step 3: Create a custom renderer in iOS. C# [assembly: ExportRenderer(typeof(CustomComboBox), typeof(ComboBoxRenderer))] namespace Auto_Renderer.iOS { public class ComboBoxRenderer : SfComboBoxRenderer { protected override void OnElementChanged(ElementChangedEventArgs<SfComboBox> e) { base.OnElementChanged(e); if (Control != null) { //-----######-------- // Set the Email keyboard for iOS //-----######-------- Control.TextField.KeyboardType = UIKeyboardType.EmailAddress; } } } } The call to the base class's OnElementChanged method instantiates an iOS SfComboBox with a reference to assign the control to the renderer's Control property. To add Email-Keyboard to SfComboBox in iOS, use UIKeyboardType.EmailAddress. Step 4: Create a custom renderer in UWP. C# [assembly: ExportRenderer(typeof(CustomComboBox), typeof(ComboBoxRenderer))] namespace Auto_Renderer.UWP { public class ComboBoxRenderer : SfComboBoxRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e) { base.OnElementChanged(e); if (Control != null) { //-----######-------- // Set the Email keyboard for UWP //-----######-------- var scope = new InputScope(); var name = new InputScopeName(); name.NameValue = InputScopeNameValue.EmailNameOrAddress; scope.Names.Add(name); Control.InputScope = scope; } } } } The call to the base class's OnElementChanged method instantiates an SfComboBox control with a reference to assign the control to the renderer's Control property. To add Email-Keyboard to SfComboBox in UWP, use InputScopeNameValue.EmailNameOrAddress. You can download the entire source code of this demo.
You can use Behaviors for the SelectionChanged event of Xamarin.Forms ComboBox control by following the given steps: Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfComboBox control to your project. Step 2: Add the ComboBox control to the content view of the main page using the following code. XAML <StackLayout Padding="50,100,50,0"> <comboBox:SfComboBox x:Name="comboBox" MultiSelectMode="Token" DisplayMemberPath="Name" DataSource="{Binding EmployeeCollection}" SelectedItem="{Binding MultiSelectedItem,Mode=TwoWay}" MaximumDropDownHeight = "180"> </comboBox:SfComboBox> </StackLayout> Step 3: Add the necessary Model and ViewModel content and add the following binding context on the MainPage.Cs page. C# namespace ComboBox { public partial class MainPage : ContentPage { EmployeeViewModel employeeViewModel; public MainPage() { InitializeComponent(); employeeViewModel = new EmployeeViewModel(); this.BindingContext = employeeViewModel; } } } Step 4: Add the Behavior code in view model that needs to be used for combo box SelectionChangedEvent. C# public class SelectionChangedBehavior : Behavior<SfComboBox> { public Command Display { get; private set; } EmployeeViewModel employeeViewModel; protected override void OnAttachedTo(SfComboBox bindable) { bindable.SelectionChanged += Bindable_SelectionChanged; base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(SfComboBox bindable) { bindable.SelectionChanged -= Bindable_SelectionChanged; base.OnDetachingFrom(bindable); } void Bindable_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e) { employeeViewModel = new EmployeeViewModel(); var selectedValue = e.Value as List<object>; var lastItem = selectedValue.Last(); employeeViewModel.SelectedId = new List<string>(); foreach (var item in selectedValue) { if (item == lastItem) { var selId = item as Employee; employeeViewModel.SelectedId.Add(selId.Id); Application.Current.MainPage.DisplayAlert("Selected Id", "The last selected ID is " + selId.Id, "Ok"); } else { var selId = item as Employee; employeeViewModel.SelectedId.Add(selId.Id); } } } } Add the same behavior to your SfComboBox Xaml code. XAML <StackLayout Padding="50,100,50,0"> <comboBox:SfComboBox x:Name="comboBox" MultiSelectMode="Token" DisplayMemberPath="Name" DataSource="{Binding EmployeeCollection}" SelectedItem="{Binding MultiSelectedItem,Mode=TwoWay}" MaximumDropDownHeight = "180"> <comboBox:SfComboBox.Behaviors> <local:SelectionChangedBehavior/> </comboBox:SfComboBox.Behaviors> </comboBox:SfComboBox> </StackLayout> The following screenshot illustrates the output. Please download the sample for using Behaviors for the SelectionChanged event of SfComboBox: Sample.Conclusion I hope you enjoyed learning about how to use behaviours for changed event in Xamarin.Forms ComboBox.You can refer to our Xamarin.Forms ComboBox feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ComboBox documentation to understand how to create 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 section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can use Behaviors for the SelectionChanged event of the SfAutoComplete control by following the given steps: Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfAutoComplete control to your project. Step 2: Add the SfAutoComplete control to the content view of the main page using the following code. XAML <StackLayout Padding="50,100,50,0"> <autocomplete:SfAutoComplete x:Name="autocomplete" MultiSelectMode="Token" DisplayMemberPath="Name" DataSource="{Binding EmployeeCollection}" SelectedItem="{Binding MultiSelectedItem,Mode=TwoWay}" > </autocomplete:SfAutoComplete> </StackLayout> Step 3: Add the necessary Model and ViewModel classes and add the following binding context on the MainPage.Cs page. C# namespace ComboBox { public partial class MainPage : ContentPage { EmployeeViewModel employeeViewModel; public MainPage() { InitializeComponent(); employeeViewModel = new EmployeeViewModel(); this.BindingContext = employeeViewModel; } } } Step 4: Add the Behavior code in the view model that needs to be used for auto complete SelectionChangedEvent. C# public class SelectionChangedBehavior : Behavior<SfAutoComplete> { public Command Display {get; private set; } EmployeeViewModel employeeViewModel; protected override void OnAttachedTo(SfAutoComplete bindable) { bindable.SelectionChanged += Bindable_SelectionChanged; base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(SfAutoComplete bindable) { bindable.SelectionChanged -= Bindable_SelectionChanged; base.OnDetachingFrom(bindable); } void Bindable_SelectionChanged(object sender, Syncfusion.SfAutoComplete.XForms.SelectionChangedEventArgs e) { employeeViewModel = new EmployeeViewModel(); var selectedValue = e.Value as List<object>; var lastItem = selectedValue.Last(); employeeViewModel.SelectedId = new List<string>(); foreach (var item in selectedValue) { if (item == lastItem) { var selId = item as Employee; employeeViewModel.SelectedId.Add(selId.Id); Application.Current.MainPage.DisplayAlert("Selected Id", "The last selected ID is " + selId.Id, "Ok"); } else { var selId = item as Employee; employeeViewModel.SelectedId.Add(selId.Id); } } } } Add the same behavior to your SfAutoComplete Xaml code. XAML <StackLayout Padding="50,100,50,0"> <autocomplete:SfAutoComplete x:Name="autocomplete" MultiSelectMode="Token" DisplayMemberPath="Name" DataSource="{Binding EmployeeCollection}" SelectedItem="{Binding MultiSelectedItem,Mode=TwoWay}" > <autocomplete:SfAutoComplete.Behaviors> <local:SelectionChangedBehavior/> </autocomplete:SfAutoComplete.Behaviors> </autocomplete:SfAutoComplete> </StackLayout> The following screenshot illustrates the output. You can download the sample for using Behaviors for the SelectionChanged event of SfAutoComplete in the following link: Sample
The combo box control has support to show custom view in the drop-down suggestion box using the DropdownHeaderView and DropdownFooterView properties. Steps to show calendar in the combo box dropdown: Step 1: Add the SfCombobox control in the content page. Step 2: Add the SfCalendar control in the DropdownHeaderView or DropdownFooterView property. Step 3: Customize the drop-down button using the DrodownButtonSetting property. Step 4: To show the selected date in the combo box textfield, set the selected date to the Text property of the combo box in the Sfcalendar selection changed event. The following code showsdemonstrates how to show the calendar in the combo box drop-down. Code: <StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30"> <combobox:SfComboBox HeightRequest="40" x:Name="sfComboBox" ShowDropDownFooterView="False" ShowDropDownHeaderView="True" TextSize="12" DropDownHeaderViewHeight="300" MaximumDropDownHeight="300" DropDownFooterViewHeight="0" DropDownItemHeight="0"> <combobox:SfComboBox.DropDownHeaderView> <syncfusion:SfCalendar x:Name="calendar" SelectionChanged="calendar_SelectionChanged" HeightRequest="300" /> </combobox:SfComboBox.DropDownHeaderView> <combobox:SfComboBox.DropDownButtonSettings> <combobox:DropDownButtonSettings Image="date.png" /> </combobox:SfComboBox.DropDownButtonSettings> </combobox:SfComboBox> </StackLayout> C# Code: public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); sfComboBox.DataSource = new ObservableCollection<object>() { "i"}; sfComboBox.Text = DateTime.Now.Date.ToString("D"); } private void calendar_SelectionChanged(object sender, Syncfusion.SfCalendar.XForms.SelectionChangedEventArgs e) { sfComboBox.Text = e.DateAdded[0].Date.ToString("D"); } } Screenshot: Please download the sample from the following link: Sample
You can set the SelectedValue in SfcomboBox in Xamarin.iOS by setting a value to the SelectedItem property. Step 1: Add the SfCombobox control and add the items using the data source property. Step 2: Add the UIButton and add the click event to the UI button. Step 3: In the button click event, set the value to the selected item property. The following code demonstrates how to navigate between the tab items using tap gesture. C# public partial class MyViewController : UIViewController { ObservableCollection<Employee> EmployeeDetails; SfComboBox combobox; public MyViewController() : base("MyViewController", null) { combobox = new SfComboBox(); combobox.IsEditable = true; combobox.SuggestionMode = SuggestionMode.StartsWith; combobox.Frame = new CoreGraphics.CGRect(25,100, UIScreen.MainScreen.Bounds.Width-50, 40); combobox.ItemHeight = 60; this.GetEmployeeData(); combobox.DisplayMemberPath = (NSString)"Condition"; combobox.SelectedValuePath = (NSString)"ConditionId"; combobox.DataSource = EmployeeDetails; combobox.MaxDropDownHeight = 250; UIButton uIButton = new UIButton(); uIButton.BackgroundColor = UIColor.LightGray; uIButton.SetTitle("Set SelectedItem", UIControlState.Normal); uIButton.Frame = new CoreGraphics.CGRect(25,300, UIScreen.MainScreen.Bounds.Width-50, 60); uIButton.TouchUpInside += UIButton_TouchUpInside; this.Add(combobox); this.Add(uIButton); } void UIButton_TouchUpInside(object sender, EventArgs e) { combobox.SelectedItem = EmployeeDetails[4]; } Please download the sample from the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfCombobox211608-1535692654
AutoComplete present in the SfTextBoxExt has been disabled using property named “AutoCompleteMode”, which is present inside the SfComboBox and it can be retrieved using “FindVisualChildren” function. The following code example demonstrates the same. Xaml <input:SfComboBox x:Name="sfComboBox" Width="150" DisplayMemberPath="Name" ComboBoxMode="Editable" Loaded="sfCombo_Loaded"/> C#: public static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject { if (depObj != null) { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++) { DependencyObject child = VisualTreeHelper.GetChild(depObj, i); if (child != null && child is T) { yield return (T)child; } foreach (T childOfChild in FindVisualChildren<T>(child)) { yield return childOfChild; } } } } private void sfCombo_Loaded(object sender, RoutedEventArgs e) { SfTextBoxExt text = FindVisualChildren<SfTextBoxExt>( sfComboBox).First(); if (text != null) text.AutoCompleteMode = AutoCompleteMode.None; } Fig 1: With/Without AutoComplete in SfComboBox
In SfComboBox, you can bind the SelectedValue property of the SfComboBox. When SfComboBox is used as a template for the SfDataGrid column, set the SelectedValue in a separate SfComboBox. You can also set the SelectedValue for each SfComboBox in the SfDataGrid in a loaded event. This can be achieved in the following code. XAML <syncfusion:GridTemplateColumn MappingName="ShipCountry"> <syncfusion:GridTemplateColumn.CellTemplate> <DataTemplate> <editors:SfComboBox x:Name="Combo" Loaded="Combo_Loaded"/> </DataTemplate> </syncfusion:GridTemplateColumn.CellTemplate> </syncfusion:GridTemplateColumn> C# private void Combo_Loaded(object sender, RoutedEventArgs e) { SfComboBox combobox = sender as SfComboBox; if(combobox!=null) { combobox.ItemsSource = new ShipCountries(); combobox.SetBinding(SfComboBox.SelectedValueProperty, sfdatagrid.Columns["ShipCountry"].DisplayBinding); } } Figure 1: SelectedValues are binded to the SfComboBox Figure 2: SfComboBox dropdown is opened
