From ab06f9b99388d094ad3d48a4b15c2eeaa059a74d Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 2 Sep 2026 13:00:48 +0530 Subject: [PATCH 01/12] Updated for Autocomplete --- MAUI/Autocomplete/DropDown-Customization.md | 1445 ++++++++++++++ MAUI/Autocomplete/Events.md | 478 +++++ MAUI/Autocomplete/UI-Customization.md | 1904 +------------------ 3 files changed, 1945 insertions(+), 1882 deletions(-) create mode 100644 MAUI/Autocomplete/DropDown-Customization.md create mode 100644 MAUI/Autocomplete/Events.md diff --git a/MAUI/Autocomplete/DropDown-Customization.md b/MAUI/Autocomplete/DropDown-Customization.md new file mode 100644 index 0000000000..04705ae520 --- /dev/null +++ b/MAUI/Autocomplete/DropDown-Customization.md @@ -0,0 +1,1445 @@ +--- +layout: post +title: DropDown Customization in .NET MAUI Autocomplete | Syncfusion® +description: Learn all about DropDown customization support in Syncfusion® .NET MAUI Autocomplete control into .NET MAUI application and its features here. +platform: maui +control: SfAutocomplete +documentation: ug +--- + +# DropDown Customization in .NET MAUI Autocomplete + +This section explains different DropDown customizations available in the [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) control. + +## Prerequisites + +Before using the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html), ensure the following NuGet package is installed in your .NET MAUI project: + +- `Syncfusion.Maui.Inputs` + +For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) documentation. + +To get started quickly on customizing the appearance of the .NET MAUI Autocomplete, you can check out this video: + +{% youtube "https://www.youtube.com/watch?v=Hh5pfXvax9o" %} + +## Customize the DropDown (suggestion) item + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using the custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + ... + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + SfAutocomplete autoComplete = new() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + }; + + DataTemplate itemTemplate = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + autoComplete.ItemTemplate = itemTemplate; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + ... + } + } + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete ItemTemplate](Images/UICustomization/ItemTemplate.png) + +### Maximum DropDown Height + +The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the `Autocomplete` control. The default value of the MaxDropDownHeight property is `400d`. + +N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + MaxDropDownHeight = 100, + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following gif image illustrates the result of the above code: + +![.NET MAUI Autocomplete maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) + +### Customize the DropDown item text + +DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownItemFontAttributes = FontAttributes.Italic, + DropDownItemFontFamily = "OpenSansSemibold", + DropDownItemFontSize = 16, + DropDownItemTextColor = Colors.DarkViolet +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Item Text](Images/UICustomization/DropDownItemText.png) + +### Customize the DropDown background color + +The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownBackground = Colors.YellowGreen +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Background](Images/UICustomization/DropDownBackground.png) + +### Customize the DropDown Selected Item Background Color + +The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of the selected item in the dropdown. The default value is `new SolidColorBrush(Color.FromArgb("#1C1B1F14"))`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + SelectedDropDownItemBackground = Colors.LightSeaGreen +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) + +### Customize the Selected DropDown Item Text Style + +The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the `SfAutocomplete` control is used to customize the appearance of the selected item in the dropdown list. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight C# %} + +SfAutocomplete autoComplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + SelectedDropDownItemTextStyle = new DropDownTextStyle + { + TextColor = Colors.Orange, + FontSize = 16, + FontAttributes = FontAttributes.Bold + } +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Customize the DropDown Border Color + +The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownStroke = Colors.DarkOrange +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Stroke](Images/UICustomization/DropDownStroke.png) + +### Customize the DropDown Border Thickness + +The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownStroke = Colors.DarkOrange, + DropDownStrokeThickness = 5 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Stroke Thickness](Images/UICustomization/DropDownStrokeThickness.png) + +### Customize the Dropdown Shadow Visibility + +The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. The default value of the `IsDropDownShadowVisible` property is `true`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + IsDropDownShadowVisible = False +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) + +### Customize the DropDown Item Height + +The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownItemHeight = 80 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) + +### Customize the DropDown Placement + +The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. The default value of the `DropDownPlacement` property is `Auto`. + +* `Top` - Drop-down will be placed above the text box. + +* `Bottom` - Drop-down will be placed below the text box. + +* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. + +* `None` - Drop-down will not be shown with the filtered items. + + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownPlacement = DropDownPlacement.Top +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Dropdownplacement.](Images/UICustomization/placementauto.png) + +### Customize the DropDown Item Padding + +The autocomplete enables the user to provide padding for the items inside dropdown using the [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. The default value of the `ItemPadding` property is `new Thickness(10, 0, 10, 0)`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemPadding = new Thickness(10, 20, 0, 0) +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Itempadding.](Images/UICustomization/Itempadding.png) + +### Customize the DropDown Width + +The [DropDownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownWidth) property is used to modify the width of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownWidth = 400 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDownWidth.](Images/UICustomization/DropDownWidth.png) + + +### Show Suggestion Box on Focus + +Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. The default value of the `ShowSuggestionsOnFocus` property is `false`. + +{% tabs %} + +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ShowSuggestionsOnFocus = true +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete OnFocus.](Images/UICustomization/OnFocus.png) + +## Customize DropDown (suggestion) items based on condition + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Emilio Alvaro", + ProfilePicture = "people_circle7.png", + Designation = "Product Manager", + ID = "E003" + }); + Employees.Add(new Employee + { + Name = "Janet Leverling", + ProfilePicture = "people_circle2.png", + Designation = "HR", + ID = "E004", + }); + Employees.Add(new Employee + { + Name = "Laura Callahan", + ProfilePicture = "people_circle10.png", + Designation = "Product Manager", + ID = "E005", + }); + } + } + + //Template selector + public class EmployeeTemplateSelector : DataTemplateSelector + { + public DataTemplate EmployeeTemplate1 { get; set; } + public DataTemplate EmployeeTemplate2 { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var employeeName = ((Employee)item).Name; + { + if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || + employeeName.ToString() == "Laura Callahan") + { + return EmployeeTemplate1; + } + else + { + return EmployeeTemplate2; + } + } + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + DataTemplate employeeTemplate1 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Blue; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Coral; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + DataTemplate employeeTemplate2 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0, 0, 0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Red; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Green; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); + employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; + employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; + + SfAutocomplete autocomplete = new() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + ItemTemplate = employeeTemplateSelector, + }; + + this.Content = autocomplete; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) + +## Customize Dropdown corner radius + +The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the `SfAutocomplete` control. The default value of the `DropDownCornerRadius` property is `0`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfAutocomplete autocomplete = new SfAutocomplete() +{ + WidthRequest = 250, + HeightRequest = 50, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias, + DropDownCornerRadius = 25 +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius_ac.png) + +## See also + +- [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) +- [Basic Features](https://help.syncfusion.com/maui/autocomplete/basic-features) +- [Searching and Filtering](https://help.syncfusion.com/maui/autocomplete/searching-filtering) \ No newline at end of file diff --git a/MAUI/Autocomplete/Events.md b/MAUI/Autocomplete/Events.md new file mode 100644 index 0000000000..b56f485cf6 --- /dev/null +++ b/MAUI/Autocomplete/Events.md @@ -0,0 +1,478 @@ +--- +layout: post +title: Events in .NET MAUI Autocomplete | Syncfusion® +description: Learn all about Events support in Syncfusion® .NET MAUI Autocomplete control into .NET MAUI application and its features here. +platform: maui +control: SfAutocomplete +documentation: ug +--- + +# Events in .NET MAUI Autocomplete + +This section explains different Events available in the [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) control. + +## Prerequisites + +Before using the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html), ensure the following NuGet package is installed in your .NET MAUI project: + + +- `Syncfusion.Maui.Inputs` + +For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) documentation. + +To get started quickly on customizing the appearance of the .NET MAUI Autocomplete, you can check out this video: + +{% youtube "https://www.youtube.com/watch?v=Hh5pfXvax9o" %} + +# Events + +## Completed Event + +The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) by pressing the return key on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`: + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +private async void Autocomplete_Completed(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Text entering Completed", "close"); +} + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +Completed event can be subscribed in C# also: + +{% tabs %} +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +autocomplete.Completed+=Autocomplete_Completed; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete completed event](Images/UICustomization/CompletedEvent.png) + +N> The `Completed` event is not supported in the Android platform. + +## DropDownOpening Event + +The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event is raised when the dropdown menu is about to open in the `SfAutocomplete`. The event uses `CancelEventArgs`, which exposes the following property: + + * Cancel: Dropdown opening is based on this value. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + autocomplete.DropdownOpening += Autocomplete_DropdownOpening; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% tabs %} + +{% highlight c# %} + + private void Autocomplete_DropdownOpening(object sender, CancelEventArgs e) + { + e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. + } + +{% endhighlight %} + +{% endtabs %} + + +## DropDownOpened Event + +The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the SfAutocomplete drop-down is opened. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + autocomplete.DropdownOpened += Autocomplete_DropdownOpened; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% tabs %} + +{% highlight c# %} + + private void Autocomplete_DropdownOpened(object sender, EventArgs e) + { + // Trigger when the dropdown is opened + } + +{% endhighlight %} + +{% endtabs %} + +## DropDownClosed Event + +The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the SfAutocomplete drop-down is closed. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% highlight c# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + autocomplete.DropDownClosed += Autocomplete_DropDownClosed; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight c# %} + + private void Autocomplete_DropDownClosed(object sender, EventArgs e) + { + await DisplayAlert("Message", "DropDown Closed", "close"); + } + +{% endhighlight %} +{% endtabs %} + +## ValueChanged Event +When the value of Autocomplete changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html#Syncfusion_Maui_Inputs_SfAutocomplete_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: + +* `OldValue` - Contains the previous text value before the change. +* `NewValue` - Contains the new text value after the change. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +autocomplete.ValueChanged += OnValueChanged; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The ValueChanged event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e) +{ + await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); +} + +{% endhighlight %} + +{% endtabs %} + +## ClearButtonClicked Event + +The [ClearButtonClicked]() event is raised when the user activates the clear button in the `SfAutocomplete` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name" + }; +autocomplete.ClearButtonClicked += Autocomplete_ClearButtonClicked; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `ClearButtonClicked` event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void Autocomplete_ClearButtonClicked(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Clear Button Clicked", "ok"); +} + +{% endhighlight %} +{% endtabs %} + +## See also + +- [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) +- [Basic Features](https://help.syncfusion.com/maui/autocomplete/basic-features) +- [Searching and Filtering](https://help.syncfusion.com/maui/autocomplete/searching-filtering) \ No newline at end of file diff --git a/MAUI/Autocomplete/UI-Customization.md b/MAUI/Autocomplete/UI-Customization.md index c11ac52d4b..0a9ca5cb01 100644 --- a/MAUI/Autocomplete/UI-Customization.md +++ b/MAUI/Autocomplete/UI-Customization.md @@ -344,1904 +344,44 @@ public class SocialMedia ![.NET MAUI Autocomplete Selection Text Highlight Color](Images/UICustomization/SelectionTextHighlightColor.png) -## Maximum DropDown Height - -The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the `Autocomplete` control. The default value of the MaxDropDownHeight property is `400d`. - -N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - MaxDropDownHeight = 100, - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following gif image illustrates the result of the above code: - -![.NET MAUI Autocomplete maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) - -## Customize the DropDown (suggestion) item - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using the custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - ... - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - SfAutocomplete autoComplete = new() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - }; - - DataTemplate itemTemplate = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - autoComplete.ItemTemplate = itemTemplate; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - ... - } - } - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete ItemTemplate](Images/UICustomization/ItemTemplate.png) - -### Customize the DropDown item text - -DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownItemFontAttributes = FontAttributes.Italic, - DropDownItemFontFamily = "OpenSansSemibold", - DropDownItemFontSize = 16, - DropDownItemTextColor = Colors.DarkViolet -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Item Text](Images/UICustomization/DropDownItemText.png) - -### Customize the DropDown background color - -The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownBackground = Colors.YellowGreen -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Background](Images/UICustomization/DropDownBackground.png) - -### Customize the DropDown Selected Item Background Color - -The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of the selected item in the dropdown. The default value is `new SolidColorBrush(Color.FromArgb("#1C1B1F14"))`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - SelectedDropDownItemBackground = Colors.LightSeaGreen -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) - -### Customize the Selected DropDown Item Text Style - -The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the `SfAutocomplete` control is used to customize the appearance of the selected item in the dropdown list. - -{% tabs %} -{% highlight xaml %} - - - - - - - -{% endhighlight %} -{% highlight C# %} - -SfAutocomplete autoComplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - SelectedDropDownItemTextStyle = new DropDownTextStyle - { - TextColor = Colors.Orange, - FontSize = 16, - FontAttributes = FontAttributes.Bold - } -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -### Customize the DropDown Border Color - -The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownStroke = Colors.DarkOrange -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Stroke](Images/UICustomization/DropDownStroke.png) - -### Customize the DropDown Border Thickness - -The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownStroke = Colors.DarkOrange, - DropDownStrokeThickness = 5 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Stroke Thickness](Images/UICustomization/DropDownStrokeThickness.png) - -### Customize the Dropdown Shadow Visibility - -The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. The default value of the `IsDropDownShadowVisible` property is `true`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - IsDropDownShadowVisible = False -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) - -### Customize the DropDown Item Height - -The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownItemHeight = 80 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) - -### Customize the DropDown Placement - -The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. The default value of the `DropDownPlacement` property is `Auto`. - -* `Top` - Drop-down will be placed above the text box. - -* `Bottom` - Drop-down will be placed below the text box. - -* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. - -* `None` - Drop-down will not be shown with the filtered items. - - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownPlacement = AutocompleteDropDownPlacement.Top -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Dropdownplacement.](Images/UICustomization/placementauto.png) - -### Customize the DropDown Item Padding - -The autocomplete enables the user to provide padding for the items inside dropdown using the [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. The default value of the `ItemPadding` property is `new Thickness(10, 0, 10, 0)`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemPadding = new Thickness(10, 20, 0, 0) -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Itempadding.](Images/UICustomization/Itempadding.png) - -### Customize the DropDown Width - -The [DropDownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the width of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownWidth = 400 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDownWidth.](Images/UICustomization/DropDownWidth.png) - - -### Show Suggestion Box on Focus - -Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. The default value of the `ShowSuggestionsOnFocus` property is `false`. - -{% tabs %} - -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ShowSuggestionsOnFocus = true -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete OnFocus.](Images/UICustomization/OnFocus.png) - -## Customize DropDown (suggestion) items based on condition - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Emilio Alvaro", - ProfilePicture = "people_circle7.png", - Designation = "Product Manager", - ID = "E003" - }); - Employees.Add(new Employee - { - Name = "Janet Leverling", - ProfilePicture = "people_circle2.png", - Designation = "HR", - ID = "E004", - }); - Employees.Add(new Employee - { - Name = "Laura Callahan", - ProfilePicture = "people_circle10.png", - Designation = "Product Manager", - ID = "E005", - }); - } - } - - //Template selector - public class EmployeeTemplateSelector : DataTemplateSelector - { - public DataTemplate EmployeeTemplate1 { get; set; } - public DataTemplate EmployeeTemplate2 { get; set; } - - protected override DataTemplate OnSelectTemplate(object item, BindableObject container) - { - var employeeName = ((Employee)item).Name; - { - if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || - employeeName.ToString() == "Laura Callahan") - { - return EmployeeTemplate1; - } - else - { - return EmployeeTemplate2; - } - } - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - DataTemplate employeeTemplate1 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Blue; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Coral; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - DataTemplate employeeTemplate2 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0, 0, 0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Red; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Green; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); - employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; - employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; - - SfAutocomplete autocomplete = new() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - ItemTemplate = employeeTemplateSelector, - }; - - this.Content = autocomplete; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) - -## Customize Dropdown corner radius - -The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the `SfAutocomplete` control. The default value of the `DropDownCornerRadius` property is `0`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); -SfAutocomplete autocomplete = new SfAutocomplete() -{ - WidthRequest = 250, - HeightRequest = 50, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemsSource = socialMediaViewModel.SocialMedias, - DropDownCornerRadius = 25 -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius_ac.png) - -## Styling token items - -The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property. - -{% tabs %} - -{% highlight xaml %} - - ... - xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" - xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs" - ... - - - - - - - -{% endhighlight %} - -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete with tokenitemstyle](Images/UICustomization/TokenItemStyle.png) - -## Completed Event - -The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) by pressing the return key on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`: - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -private async void Autocomplete_Completed(object sender, EventArgs e) -{ - await DisplayAlert("Message", "Text entering Completed", "close"); -} - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -Completed event can be subscribed in C# also: - -{% tabs %} -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -autocomplete.Completed+=Autocomplete_Completed; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete completed event](Images/UICustomization/CompletedEvent.png) - -N> The `Completed` event is not supported in the Android platform. - -## DropDownOpening Event - -The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event is raised when the dropdown menu is about to open in the `SfAutocomplete`. The event uses `CancelEventArgs`, which exposes the following property: - - * Cancel: Dropdown opening is based on this value. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropdownOpening += Autocomplete_DropdownOpening; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} - -{% highlight c# %} - - private void Autocomplete_DropdownOpening(object sender, CancelEventArgs e) - { - e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. - } - -{% endhighlight %} - -{% endtabs %} - - -## DropDownOpened Event +## Styling token items -The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the SfAutocomplete drop-down is opened. +The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property. {% tabs %} {% highlight xaml %} - - - -{% endhighlight %} - -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropdownOpened += Autocomplete_DropdownOpened; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} - -{% highlight c# %} - - private void Autocomplete_DropdownOpened(object sender, EventArgs e) - { - // Trigger when the dropdown is opened - } - -{% endhighlight %} - -{% endtabs %} - -## DropDownClosed Event - -The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the SfAutocomplete drop-down is closed. - -{% tabs %} -{% highlight xaml %} + ... + xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" + xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs" + ... - - + TextMemberPath="Name" > + + + -{% endhighlight %} -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropDownClosed += Autocomplete_DropDownClosed; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} - - private void Autocomplete_DropDownClosed(object sender, EventArgs e) - { - await DisplayAlert("Message", "DropDown Closed", "close"); - } - -{% endhighlight %} -{% endtabs %} - -## ValueChanged Event -When the value of Autocomplete changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html#Syncfusion_Maui_Inputs_SfAutocomplete_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: - -* `OldValue` - Contains the previous text value before the change. -* `NewValue` - Contains the new text value after the change. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -autocomplete.ValueChanged += OnValueChanged; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The ValueChanged event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e) -{ - await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); -} - -{% endhighlight %} - -{% endtabs %} - -## ClearButtonClicked Event - -The [ClearButtonClicked]() event is raised when the user activates the clear button in the `SfAutocomplete` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name" - }; -autocomplete.ClearButtonClicked += Autocomplete_ClearButtonClicked; {% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} {% endtabs %} -The `ClearButtonClicked` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void Autocomplete_ClearButtonClicked(object sender, EventArgs e) -{ - await DisplayAlert("Message", "Clear Button Clicked", "ok"); -} +The following image illustrates the result of the above code: -{% endhighlight %} -{% endtabs %} +![.NET MAUI Autocomplete with tokenitemstyle](Images/UICustomization/TokenItemStyle.png) ## CursorPosition From 64694d458bd0e3ece56b735477ba449321ccbbc2 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 2 Sep 2026 15:41:27 +0530 Subject: [PATCH 02/12] Updated for MaskedEntry and ComboBox UG --- MAUI/ComboBox/DropDown-Customization.md | 1487 +++++++++++++++++++++++ MAUI/ComboBox/Events.md | 487 ++++++++ MAUI/Masked-Entry/Culture.md | 2 + maui-toc.html | 4 + 4 files changed, 1980 insertions(+) create mode 100644 MAUI/ComboBox/DropDown-Customization.md create mode 100644 MAUI/ComboBox/Events.md diff --git a/MAUI/ComboBox/DropDown-Customization.md b/MAUI/ComboBox/DropDown-Customization.md new file mode 100644 index 0000000000..665c57ab58 --- /dev/null +++ b/MAUI/ComboBox/DropDown-Customization.md @@ -0,0 +1,1487 @@ +--- +layout: post +title: DropDown Customization in .NET MAUI ComboBox | Syncfusion® +description: Learn all about DropDown customization support in Syncfusion® .NET MAUI ComboBox control into .NET MAUI application and its basic features here. +platform: maui +control: SfComboBox +documentation: ug +keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobox maui, .net maui dropdown list, .net maui select menu. +--- + +# DropDown Customization in .NET MAUI ComboBox + +This section explains the different DropDown customizations available in [.NET MAUI ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html). + +To get started quickly with customizing the appearance of the .NET MAUI ComboBox, you can watch this video: + +{% youtube "https://www.youtube.com/watch?v=_yk7El0Seu8" %} + +## Prerequisites + +Before using the [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html), ensure the following NuGet package is installed in your .NET MAUI project: + +- `Syncfusion.Maui.Inputs` + +For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/combobox/getting-started) documentation. + + +## Maximum DropDown Height + +The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the ComboBox control. The default value of `MaxDropDownHeight` property is `400d`. + + N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + IsEditable = true, + MaxDropDownHeight = 150, + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) + +## Customize the DropDown (suggestion) item + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. The sample assumes a binding context with an `Employees` collection and image assets added to the project. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +EmployeeViewModel employee = new EmployeeViewModel(); + +SfComboBox comboBox = new SfComboBox() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + }; + +DataTemplate itemTemplate = new DataTemplate(() => +{ + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; +}); +comboBox.ItemTemplate = itemTemplate; + +this.Content = comboBox; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox ItemTemplate](Images/UICustomization/ItemTemplate.png) + +### Customize the DropDown item text + +DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + Placeholder="Enter Media", + TextMemberPath = "Name", + DisplayMemberPath = "Name", + DropDownItemFontAttributes = FontAttributes.Italic, + DropDownItemFontFamily = "OpenSansSemibold", + DropDownItemTextColor = Colors.DarkViolet, + DropDownItemFontSize = 16, + ItemsSource = socialMediaViewModel.SocialMedias +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Item Text](Images/UICustomization/DropDownItemText.png) + +### Customize the DropDown background color + +The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + DropDownBackground = Colors.YellowGreen, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Background](Images/UICustomization/DropDownBackground.png) + +### Customize the DropDown selected item background color + +The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of selected item in the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + SelectedDropDownItemBackground = Colors.LightSeaGreen, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) + +### Customize the Selected DropDown Item Text Style + +The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the ComboBox control allows developers to customize the appearance of the selected item in the dropdown list. This feature is useful for highlighting user selections and improving the overall UI experience. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + SelectedDropDownItemTextStyle = new DropDownTextStyle + { + TextColor = Colors.Orange, + FontSize = 16, + FontAttributes = FontAttributes.Bold + } +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Customize the DropDown Border Color + +The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownStroke = Colors.DarkOrange, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Stroke](Images/UICustomization/DropDownStroke.png) + +### Customize the DropDown Border Thickness + +The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownStroke = Colors.DarkOrange, + DropDownStrokeThickness = 5, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown StrokeThickness](Images/UICustomization/DropDownStrokeThickness.png) + +### Customize the dropdown shadow visibility + +The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + IsDropDownShadowVisible = false +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) + +### Customize the DropDown Item Height + +The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownItemHeight = 25, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) + +### Customize the DropDownPlacement + +The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. + +* `Top` - Drop-down will be placed above the text box. + +* `Bottom` - Drop-down will be placed below the text box. + +* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. + +* `None` - Drop-down will not be shown with the filtered items. + + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownPlacement = DropDownPlacement.Top, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Dropdownplacement.](Images/UICustomization/placementcombo.png) + +### Customize the DropDown ItemPadding + +The comboBox enables the user to provide padding for the items inside dropdown using [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemPadding = new Thickness(10,20,0,0), +}; + +{% endhighlight %} + +{% endtabs %} + +![.NET MAUI ComboBox Itempadding.](Images/UICustomization/Itempadding.png) + +### Customize the DropDown Width + +The [DropdownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the Width of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropdownWidth = 500, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDownWidth.](Images/UICustomization/DropDownWidth.png) + + +### Show suggestion box on focus + +Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ShowSuggestionsOnFocus = true +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox OnFocus.](Images/UICustomization/OnFocus.png) + +## Customize the DropDown (suggestion) item based on condition + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture ="people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Emilio Alvaro", + ProfilePicture = "people_circle7.png", + Designation = "Product Manager", + ID = "E003" + }); + Employees.Add(new Employee + { + Name = "Janet Leverling", + ProfilePicture = "people_circle2.png", + Designation = "HR", + ID = "E004", + }); + Employees.Add(new Employee + { + Name = "Laura Callahan", + ProfilePicture = "people_circle10.png", + Designation = "Product Manager", + ID = "E005", + }); + } + } + + //Template selector + public class EmployeeTemplateSelector : DataTemplateSelector + { + public DataTemplate EmployeeTemplate1 { get; set; } + public DataTemplate EmployeeTemplate2 { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var employeeName = ((Employee)item).Name; + { + if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || + employeeName.ToString() == "Laura Callahan") + { + return EmployeeTemplate1; + } + else + { + return EmployeeTemplate2; + } + } + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + DataTemplate employeeTemplate1 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Blue; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Coral; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + DataTemplate employeeTemplate2 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0, 0, 0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Red; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Green; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); + employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; + employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; + + SfComboBox comboBox = new SfComboBox() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + ItemTemplate = employeeTemplateSelector, + }; + + this.Content = comboBox; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) + + +## Customize Dropdown corner radius + +The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the ComboBox control. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox() +{ + WidthRequest = 250, + HeightRequest = 50, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias, + DropDownCornerRadius = 25 +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius.png) + +### View for DropDown button + +We can set `View` to the drop down button in ComboBox using [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings) property. +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + Placeholder = "Enter Social Media", + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + DropDownButtonSettings = new DropDownButtonSettings + { + Width = 80, + Height = 40, + View = new Grid + { + BackgroundColor = Color.GreenYellow, + Children = + { + new Label + { + Text = "Click", + FontSize = 12, + TextColor = Color.Blue, + HorizontalTextAlignment = TextAlignment.Center, + VerticalOptions = LayoutOptions.Center + } + } + } + } +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Button CustomView](images/UICustomization/DropDownButtonSettings_View.png) + +## See Also + +* [Header and footer](https://help.syncfusion.com/maui/combobox/header-and-footer) +* [No results found](https://help.syncfusion.com/maui/combobox/no-results-found) +* [Liquid Glass support](https://help.syncfusion.com/maui/combobox/liquidglasssupport) \ No newline at end of file diff --git a/MAUI/ComboBox/Events.md b/MAUI/ComboBox/Events.md new file mode 100644 index 0000000000..e76432f51d --- /dev/null +++ b/MAUI/ComboBox/Events.md @@ -0,0 +1,487 @@ +--- +layout: post +title: Events in .NET MAUI ComboBox | Syncfusion® +description: Learn about Events in Syncfusion® .NET MAUI ComboBox control. +platform: maui +control: SfComboBox +documentation: ug +keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobox maui, .net maui dropdown list, .net maui select menu. +--- + +# Events in .NET MAUI ComboBox + +This section explains the Events available in [.NET MAUI ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html). + +To get started quickly with customizing the appearance of the .NET MAUI ComboBox, you can watch this video: + +{% youtube "https://www.youtube.com/watch?v=_yk7El0Seu8" %} + +## Prerequisites + +Before using the [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html), ensure the following NuGet package is installed in your .NET MAUI project: + +- `Syncfusion.Maui.Inputs` + +For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/combobox/getting-started) documentation. + + +## Completed Event + +The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the ComboBox editable mode by pressing return key on the keyboard.The handler for the event is a generic event handler, taking the `sender` and `EventArgs`(the `EventArgs` value is `string.Empty`): + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox combobox = new SfComboBox() +{ + IsEditable = true, + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", +}; +combobox.Completed += combobox_Completed; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `Completed` event can be handled in C# as follows: + +{% tabs %} +{% highlight C# %} + +private async void combobox_Completed(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Text entering Completed", "close"); +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox completed event](Images/UICustomization/CompletedEvent.png) + +N> The `Completed` event is not supported in the Android platform. + +## DropDownOpening Event + +The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event will be fired whenever opening the dropdown menu in the ComboBox. It can cancel dropdown opening with `CancelEventArgs` that contains the following property: + + * Cancel: Dropdown opening is based on this value. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + + SfComboBox comboBox = new SfComboBox + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + comboBox.DropdownOpening += comboBox_DropdownOpening; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `DropdownOpening` event can be handled in C# as follows: + +{% tabs %} + +{% highlight c# %} + + private void comboBox_DropdownOpening(object sender, CancelEventArgs e) + { + e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. + } + +{% endhighlight %} + +{% endtabs %} + +## DropDownOpened Event + +The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the ComboBox drop-down is opened. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +comboBox.DropdownOpened += comboBox_DropdownOpened; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `DropdownOpened` event can be handled in C# as follows: + +{% tabs %} + +{% highlight c# %} + +private void comboBox_DropdownOpened(object sender, EventArgs e) +{ + // Triggered when dropdown is opened +} + +{% endhighlight %} + +{% endtabs %} + +## DropDownClosed Event + +The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the ComboBox drop-down is closed. + +{% tabs %} +{% highlight xaml %} + + +{% endhighlight %} +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +comboBox.DropDownClosed += SfComboBox_DropDownClosed; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `DropDownClosed` event can be handled in C# as follows: + +{% tabs %} +{% highlight c# %} + +private void SfComboBox_DropDownClosed(object sender, EventArgs e) +{ + DisplayAlert("Message", "DropDown Closed", "close"); +} + +{% endhighlight %} +{% endtabs %} + +N> When `WindowSoftInputModeAdjust.Resize` is set in the sample and `ComboBox` is placed inside a `ScrollView`, the dropdown may close unexpectedly due to layout resizing. To prevent this, override `OnSizeAllocated` and handle the `DropDownClosing`. For more details, refer to the [KB article](https://support.syncfusion.com/agent/kb/19349). + +## ValueChanged Event +When the value of comboBox changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: + +* `OldValue` - Contains the previous text value before the change. +* `NewValue` - Contains the new text value after the change. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +comboBox.ValueChanged += OnValueChanged; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `ValueChanged` event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e) +{ + await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); +} + +{% endhighlight %} + +{% endtabs %} + + +## ClearButtonClicked Event + +The [ClearButtonClicked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ClearButtonClicked) event is raised when the user activates the clear button in the `ComboBox` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name" +}; +comboBox.ClearButtonClicked += comboBox_ClearButtonClicked; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `ClearButtonClicked` event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void comboBox_ClearButtonClicked(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Clear Button Clicked", "ok"); +} + +{% endhighlight %} +{% endtabs %} + +## See Also + +* [Header and footer](https://help.syncfusion.com/maui/combobox/header-and-footer) +* [No results found](https://help.syncfusion.com/maui/combobox/no-results-found) +* [Liquid Glass support](https://help.syncfusion.com/maui/combobox/liquidglasssupport) \ No newline at end of file diff --git a/MAUI/Masked-Entry/Culture.md b/MAUI/Masked-Entry/Culture.md index f31e3c46ab..f5841e6e51 100644 --- a/MAUI/Masked-Entry/Culture.md +++ b/MAUI/Masked-Entry/Culture.md @@ -74,6 +74,8 @@ The following example shows how to set the France culture for the currency symbo {% tabs %} {% highlight C# %} +using System.Globalization; + SfMaskedEntry maskedEntry = new SfMaskedEntry(); maskedEntry.WidthRequest = 200; maskedEntry.MaskType = MaskedEntryMaskType.Simple; diff --git a/maui-toc.html b/maui-toc.html index 8e81609c9e..bd7e9e9510 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -352,6 +352,8 @@
  • Searching and Filtering
  • No Results Found
  • Maximum display item with Expander
    • +
  • Events
    • +
  • DropDown Customization
  • UI Customization
  • Visual States
  • Liquid Glass support
    • @@ -759,6 +761,8 @@
  • Filtering
  • No Results Found
  • Maximum display item with Expander
    • +
  • Events
    • +
  • DropDown Customization
  • UI Customization
  • Visual States
  • Liquid Glass support
    • From 7ed51ce69e0dd7fcfaa828b0d38cda3bdd087cbb Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Mon, 7 Sep 2026 12:20:37 +0530 Subject: [PATCH 03/12] Commit the changes --- MAUI/Autocomplete/UI-Customization.md | 2 - MAUI/ComboBox/UI-Customization.md | 1920 +------------------------ 2 files changed, 39 insertions(+), 1883 deletions(-) diff --git a/MAUI/Autocomplete/UI-Customization.md b/MAUI/Autocomplete/UI-Customization.md index 0a9ca5cb01..b7b7aa228d 100644 --- a/MAUI/Autocomplete/UI-Customization.md +++ b/MAUI/Autocomplete/UI-Customization.md @@ -349,7 +349,6 @@ public class SocialMedia The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property. {% tabs %} - {% highlight xaml %} ... @@ -376,7 +375,6 @@ The Autocomplete control allows you to customize the style of the TokenItem gene     {% endhighlight %} - {% endtabs %} The following image illustrates the result of the above code: diff --git a/MAUI/ComboBox/UI-Customization.md b/MAUI/ComboBox/UI-Customization.md index 400b22c68e..28d4a2bb86 100644 --- a/MAUI/ComboBox/UI-Customization.md +++ b/MAUI/ComboBox/UI-Customization.md @@ -510,1790 +510,41 @@ The following image illustrates the result of the above code: ![.NET MAUI ComboBox maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) -## Customize the DropDown (suggestion) item - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. The sample assumes a binding context with an `Employees` collection and image assets added to the project. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - -EmployeeViewModel employee = new EmployeeViewModel(); - -SfComboBox comboBox = new SfComboBox() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - }; - -DataTemplate itemTemplate = new DataTemplate(() => -{ - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; -}); -comboBox.ItemTemplate = itemTemplate; - -this.Content = comboBox; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox ItemTemplate](Images/UICustomization/ItemTemplate.png) - -### Customize the DropDown item text - -DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - Placeholder="Enter Media", - TextMemberPath = "Name", - DisplayMemberPath = "Name", - DropDownItemFontAttributes = FontAttributes.Italic, - DropDownItemFontFamily = "OpenSansSemibold", - DropDownItemTextColor = Colors.DarkViolet, - DropDownItemFontSize = 16, - ItemsSource = socialMediaViewModel.SocialMedias -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Item Text](Images/UICustomization/DropDownItemText.png) - -### Customize the DropDown background color - -The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - DropDownBackground = Colors.YellowGreen, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Background](Images/UICustomization/DropDownBackground.png) - -### Customize the DropDown selected item background color - -The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of selected item in the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - SelectedDropDownItemBackground = Colors.LightSeaGreen, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) - -### Customize the Selected DropDown Item Text Style - -The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the ComboBox control allows developers to customize the appearance of the selected item in the dropdown list. This feature is useful for highlighting user selections and improving the overall UI experience. - -{% tabs %} -{% highlight xaml %} - - - - - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - SelectedDropDownItemTextStyle = new DropDownTextStyle - { - TextColor = Colors.Orange, - FontSize = 16, - FontAttributes = FontAttributes.Bold - } -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -### Customize the DropDown Border Color - -The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownStroke = Colors.DarkOrange, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Stroke](Images/UICustomization/DropDownStroke.png) - -### Customize the DropDown Border Thickness - -The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownStroke = Colors.DarkOrange, - DropDownStrokeThickness = 5, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown StrokeThickness](Images/UICustomization/DropDownStrokeThickness.png) - -### Customize the dropdown shadow visibility - -The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - IsDropDownShadowVisible = false -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) - -### Customize the DropDown Item Height - -The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownItemHeight = 25, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) - -### Customize the DropDownPlacement - -The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. - -* `Top` - Drop-down will be placed above the text box. - -* `Bottom` - Drop-down will be placed below the text box. - -* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. - -* `None` - Drop-down will not be shown with the filtered items. - - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownPlacement = DropDownPlacement.Top, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Dropdownplacement.](Images/UICustomization/placementcombo.png) - -### Customize the DropDown ItemPadding - -The comboBox enables the user to provide padding for the items inside dropdown using [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemPadding = new Thickness(10,20,0,0), -}; - -{% endhighlight %} - -{% endtabs %} - -![.NET MAUI ComboBox Itempadding.](Images/UICustomization/Itempadding.png) - -### Customize the DropDown Width - -The [DropdownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the Width of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropdownWidth = 500, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDownWidth.](Images/UICustomization/DropDownWidth.png) - - -### Show suggestion box on focus - -Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. - -{% tabs %} -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ShowSuggestionsOnFocus = true -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox OnFocus.](Images/UICustomization/OnFocus.png) - -## Customize the DropDown (suggestion) item based on condition - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture ="people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Emilio Alvaro", - ProfilePicture = "people_circle7.png", - Designation = "Product Manager", - ID = "E003" - }); - Employees.Add(new Employee - { - Name = "Janet Leverling", - ProfilePicture = "people_circle2.png", - Designation = "HR", - ID = "E004", - }); - Employees.Add(new Employee - { - Name = "Laura Callahan", - ProfilePicture = "people_circle10.png", - Designation = "Product Manager", - ID = "E005", - }); - } - } - - //Template selector - public class EmployeeTemplateSelector : DataTemplateSelector - { - public DataTemplate EmployeeTemplate1 { get; set; } - public DataTemplate EmployeeTemplate2 { get; set; } - - protected override DataTemplate OnSelectTemplate(object item, BindableObject container) - { - var employeeName = ((Employee)item).Name; - { - if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || - employeeName.ToString() == "Laura Callahan") - { - return EmployeeTemplate1; - } - else - { - return EmployeeTemplate2; - } - } - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - DataTemplate employeeTemplate1 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Blue; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Coral; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - DataTemplate employeeTemplate2 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0, 0, 0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Red; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Green; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); - employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; - employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; - - SfComboBox comboBox = new SfComboBox() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - ItemTemplate = employeeTemplateSelector, - }; - - this.Content = comboBox; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) - -## DropDown button customization - -We can customize the size of the drop down button in [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) by using the `Width` and `Height` properties in [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings). - -{% tabs %} - -{% highlight xaml %} - - - - - - - - -{% endhighlight %} - -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - Placeholder = "Enter Social Media", - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - DropDownButtonSettings = new DropDownButtonSettings - { - Width = 50, - Height = 40 - } -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Button Size Customization](images/UICustomization/DropDownButtonSize.png) - -## Customize Dropdown corner radius - -The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the ComboBox control. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); -SfComboBox comboBox = new SfComboBox() -{ - WidthRequest = 250, - HeightRequest = 50, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemsSource = socialMediaViewModel.SocialMedias, - DropDownCornerRadius = 25 -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius.png) - -### View for DropDown button - -We can set `View` to the drop down button in ComboBox using [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings) property. -{% tabs %} - -{% highlight xaml %} - - - - - - - - - - - - - -{% endhighlight %} - -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - Placeholder = "Enter Social Media", - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - DropDownButtonSettings = new DropDownButtonSettings - { - Width = 80, - Height = 40, - View = new Grid - { - BackgroundColor = Color.GreenYellow, - Children = - { - new Label - { - Text = "Click", - FontSize = 12, - TextColor = Color.Blue, - HorizontalTextAlignment = TextAlignment.Center, - VerticalOptions = LayoutOptions.Center - } - } - } - } -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Button CustomView](images/UICustomization/DropDownButtonSettings_View.png) - -## Styling token items - -The ComboBox control allows you to customize the style of TokenItem generated in the selection area by using the [TokenItemStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_TokenItemStyle) property. - -{% tabs %} - -{% highlight xaml %} - - - - - - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code. - -![.NET MAUI ComboBox token item style](Images/UICustomization/Tokenitemstyle.png) - - -## Completed Event - -The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the ComboBox editable mode by pressing return key on the keyboard.The handler for the event is a generic event handler, taking the `sender` and `EventArgs`(the `EventArgs` value is `string.Empty`): - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox combobox = new SfComboBox() -{ - IsEditable = true, - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", -}; -combobox.Completed += combobox_Completed; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `Completed` event can be handled in C# as follows: - -{% tabs %} -{% highlight C# %} - -private async void combobox_Completed(object sender, EventArgs e) -{ - await DisplayAlert("Message", "Text entering Completed", "close"); -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox completed event](Images/UICustomization/CompletedEvent.png) - -N> The `Completed` event is not supported in the Android platform. - -## DropDownOpening Event - -The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event will be fired whenever opening the dropdown menu in the ComboBox. It can cancel dropdown opening with `CancelEventArgs` that contains the following property: - - * Cancel: Dropdown opening is based on this value. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - - SfComboBox comboBox = new SfComboBox - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - comboBox.DropdownOpening += comboBox_DropdownOpening; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `DropdownOpening` event can be handled in C# as follows: - -{% tabs %} - -{% highlight c# %} - - private void comboBox_DropdownOpening(object sender, CancelEventArgs e) - { - e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. - } - -{% endhighlight %} - -{% endtabs %} - -## DropDownOpened Event +## DropDown button customization -The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the ComboBox drop-down is opened. +We can customize the size of the drop down button in [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) by using the `Width` and `Height` properties in [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings). {% tabs %} {% highlight xaml %} + TextMemberPath="Name" + DisplayMemberPath="Name"> + + + + - + {% endhighlight %} {% highlight c# %} SfComboBox comboBox = new SfComboBox { + Placeholder = "Enter Social Media", ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -comboBox.DropdownOpened += comboBox_DropdownOpened; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() + DropDownButtonSettings = new DropDownButtonSettings { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; + Width = 50, + Height = 40 } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `DropdownOpened` event can be handled in C# as follows: - -{% tabs %} - -{% highlight c# %} - -private void comboBox_DropdownOpened(object sender, EventArgs e) -{ - // Triggered when dropdown is opened -} - -{% endhighlight %} - -{% endtabs %} - -## DropDownClosed Event - -The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the ComboBox drop-down is closed. - -{% tabs %} -{% highlight xaml %} - - -{% endhighlight %} -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" }; -comboBox.DropDownClosed += SfComboBox_DropDownClosed; {% endhighlight %} {% highlight c# tabtitle="ViewModel" %} @@ -2329,47 +580,34 @@ public class SocialMedia {% endhighlight %} {% endtabs %} -The `DropDownClosed` event can be handled in C# as follows: - -{% tabs %} -{% highlight c# %} - -private void SfComboBox_DropDownClosed(object sender, EventArgs e) -{ - DisplayAlert("Message", "DropDown Closed", "close"); -} - -{% endhighlight %} -{% endtabs %} - -N> When `WindowSoftInputModeAdjust.Resize` is set in the sample and `ComboBox` is placed inside a `ScrollView`, the dropdown may close unexpectedly due to layout resizing. To prevent this, override `OnSizeAllocated` and handle the `DropDownClosing`. For more details, refer to the [KB article](https://support.syncfusion.com/agent/kb/19349). +![.NET MAUI ComboBox DropDown Button Size Customization](images/UICustomization/DropDownButtonSize.png) -## ValueChanged Event -When the value of comboBox changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: +## Styling token items -* `OldValue` - Contains the previous text value before the change. -* `NewValue` - Contains the new text value after the change. +The ComboBox control allows you to customize the style of TokenItem generated in the selection area by using the [TokenItemStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_TokenItemStyle) property. {% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} +{% highlight xaml %} -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -comboBox.ValueChanged += OnValueChanged; + + + + + {% endhighlight %} {% highlight c# tabtitle="ViewModel" %} @@ -2405,20 +643,10 @@ public class SocialMedia {% endhighlight %} {% endtabs %} -The `ValueChanged` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e) -{ - await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); -} +The following image illustrates the result of the above code. -{% endhighlight %} +![.NET MAUI ComboBox token item style](Images/UICustomization/Tokenitemstyle.png) -{% endtabs %} - ## CursorPosition The cursor position in the input view can be obtained or updated using the [CursorPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_CursorPosition) property in the ComboBox. @@ -2636,76 +864,6 @@ The following image illustrates the result of the above code: ![.NET MAUI ComboBox ClearButtonPath](Images/UICustomization/clearbuttoncustomization.png) -## ClearButtonClicked Event - -The [ClearButtonClicked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ClearButtonClicked) event is raised when the user activates the clear button in the `ComboBox` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name" -}; -comboBox.ClearButtonClicked += comboBox_ClearButtonClicked; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `ClearButtonClicked` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void comboBox_ClearButtonClicked(object sender, EventArgs e) -{ - await DisplayAlert("Message", "Clear Button Clicked", "ok"); -} - -{% endhighlight %} -{% endtabs %} ## Return Command and Return Command Parameter From f87ab40d50a1415f09d3ee34db3d7841208dbdd8 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Thu, 10 Sep 2026 14:57:44 +0530 Subject: [PATCH 04/12] Updated Visual states for NumericEntry and maskedEntry --- MAUI/Autocomplete/Events.md | 8 +- MAUI/Autocomplete/Selection.md | 4 +- MAUI/Autocomplete/UI-Customization.md | 2 +- MAUI/Carousel-View/how-to.md | 2 +- MAUI/ComboBox/Events.md | 8 +- MAUI/ComboBox/Selection.md | 4 +- MAUI/ComboBox/UI-Customization.md | 4 +- MAUI/Masked-Entry/Basic-Features.md | 2 +- MAUI/Masked-Entry/Events.md | 4 +- .../maui_masked_entry_disable_state.png | Bin 0 -> 2076 bytes .../maui_masked_entry_focused_state.png | Bin 0 -> 2700 bytes .../maui_masked_entry_hover_state.png | Bin 0 -> 2054 bytes .../maui_masked_entry_normal_state.png | Bin 0 -> 2058 bytes MAUI/Masked-Entry/Validation.md | 2 +- MAUI/Masked-Entry/VisualStates.md | 144 ++++++++++++++++ MAUI/NumericEntry/Basic-Features.md | 6 +- MAUI/NumericEntry/VisualStates.md | 152 +++++++++++++++++ .../disabled-visual-state-numericentry.png | Bin 0 -> 1759 bytes .../focused-visual-state-numericentry.png | Bin 0 -> 1936 bytes .../hovered-visual-state-numericentry.png | Bin 0 -> 1806 bytes .../normal-visual-state-numericentry.png | Bin 0 -> 1772 bytes MAUI/Radial-Menu/Events.md | 20 +-- .../SfRadialMenuItem-Customization.md | 2 +- MAUI/Rating/VisualStates.md | 161 ++++++++++++++++++ MAUI/Rating/images/visual_state_disable.png | Bin 0 -> 6714 bytes MAUI/Rating/images/visual_state_hover.png | Bin 0 -> 7954 bytes MAUI/Rating/images/visual_state_normal.png | Bin 0 -> 9159 bytes MAUI/Rotator/Events.md | 6 +- MAUI/Switch/Events.md | 2 +- MAUI/Switch/Getting-Started.md | 2 +- 30 files changed, 495 insertions(+), 40 deletions(-) create mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png create mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_focused_state.png create mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_hover_state.png create mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png create mode 100644 MAUI/Masked-Entry/VisualStates.md create mode 100644 MAUI/NumericEntry/VisualStates.md create mode 100644 MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png create mode 100644 MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png create mode 100644 MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png create mode 100644 MAUI/NumericEntry/VisualStates_images/normal-visual-state-numericentry.png create mode 100644 MAUI/Rating/VisualStates.md create mode 100644 MAUI/Rating/images/visual_state_disable.png create mode 100644 MAUI/Rating/images/visual_state_hover.png create mode 100644 MAUI/Rating/images/visual_state_normal.png diff --git a/MAUI/Autocomplete/Events.md b/MAUI/Autocomplete/Events.md index b56f485cf6..e724e778a7 100644 --- a/MAUI/Autocomplete/Events.md +++ b/MAUI/Autocomplete/Events.md @@ -44,7 +44,7 @@ The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropD private async void Autocomplete_Completed(object sender, EventArgs e) { - await DisplayAlert("Message", "Text entering Completed", "close"); + await DisplayAlertAsync("Message", "Text entering Completed", "close"); } {% endhighlight %} @@ -319,7 +319,7 @@ public class SocialMedia private void Autocomplete_DropDownClosed(object sender, EventArgs e) { - await DisplayAlert("Message", "DropDown Closed", "close"); + await DisplayAlertAsync("Message", "DropDown Closed", "close"); } {% endhighlight %} @@ -393,7 +393,7 @@ The ValueChanged event can be handled as follows: private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e) { - await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); + await DisplayAlertAsync("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); } {% endhighlight %} @@ -465,7 +465,7 @@ The `ClearButtonClicked` event can be handled as follows: private async void Autocomplete_ClearButtonClicked(object sender, EventArgs e) { - await DisplayAlert("Message", "Clear Button Clicked", "ok"); + await DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); } {% endhighlight %} diff --git a/MAUI/Autocomplete/Selection.md b/MAUI/Autocomplete/Selection.md index 213036c0d8..72ebf3ea02 100644 --- a/MAUI/Autocomplete/Selection.md +++ b/MAUI/Autocomplete/Selection.md @@ -456,7 +456,7 @@ The event handler is implemented in the page's code-behind: private async void OnSelectionChanging(object sender, SelectionChangingEventArgs e) { - await DisplayAlert("Alert", "Selecting item is changing", "Ok"); + await DisplayAlertAsync("Alert", "Selecting item is changing", "Ok"); } {% endhighlight %} @@ -534,7 +534,7 @@ The event handler is implemented in the page's code-behind: private async void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { - await DisplayAlert("Alert", "Selected item has changed", "Ok"); + await DisplayAlertAsync("Alert", "Selected item has changed", "Ok"); } {% endhighlight %} diff --git a/MAUI/Autocomplete/UI-Customization.md b/MAUI/Autocomplete/UI-Customization.md index b7b7aa228d..3ccb5d6f01 100644 --- a/MAUI/Autocomplete/UI-Customization.md +++ b/MAUI/Autocomplete/UI-Customization.md @@ -667,7 +667,7 @@ public SocialMediaViewModel private async void OnAlertCommandExecuted(string parameter) { - await Application.Current.MainPage.DisplayAlert("Alert", parameter, "OK"); + await DisplayAlertAsync("Alert", parameter, "OK"); } } diff --git a/MAUI/Carousel-View/how-to.md b/MAUI/Carousel-View/how-to.md index 88732dc1f6..da2ca81ef5 100644 --- a/MAUI/Carousel-View/how-to.md +++ b/MAUI/Carousel-View/how-to.md @@ -103,7 +103,7 @@ private void Carousel_SelectionChanged(object sender, SelectionChangedEventArgs if (sender is SfCarousel sfCarousel) { int count = sfCarousel.SelectedIndex + 1; - this.DisplayAlert("SelectionChanged", "Carousel item " + count + " has been selected.", "OK"); + this.DisplayAlertAsync("SelectionChanged", "Carousel item " + count + " has been selected.", "OK"); } } diff --git a/MAUI/ComboBox/Events.md b/MAUI/ComboBox/Events.md index e76432f51d..9ff0ce5767 100644 --- a/MAUI/ComboBox/Events.md +++ b/MAUI/ComboBox/Events.md @@ -93,7 +93,7 @@ The `Completed` event can be handled in C# as follows: private async void combobox_Completed(object sender, EventArgs e) { - await DisplayAlert("Message", "Text entering Completed", "close"); + await DisplayAlertAsyncAsync("Message", "Text entering Completed", "close"); } {% endhighlight %} @@ -325,7 +325,7 @@ The `DropDownClosed` event can be handled in C# as follows: private void SfComboBox_DropDownClosed(object sender, EventArgs e) { - DisplayAlert("Message", "DropDown Closed", "close"); + DisplayAlertAsync("Message", "DropDown Closed", "close"); } {% endhighlight %} @@ -401,7 +401,7 @@ The `ValueChanged` event can be handled as follows: private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e) { - await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); + await DisplayAlertAsync("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); } {% endhighlight %} @@ -474,7 +474,7 @@ The `ClearButtonClicked` event can be handled as follows: private async void comboBox_ClearButtonClicked(object sender, EventArgs e) { - await DisplayAlert("Message", "Clear Button Clicked", "ok"); + await DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); } {% endhighlight %} diff --git a/MAUI/ComboBox/Selection.md b/MAUI/ComboBox/Selection.md index ef3b8ed257..29d6c3b261 100644 --- a/MAUI/ComboBox/Selection.md +++ b/MAUI/ComboBox/Selection.md @@ -562,7 +562,7 @@ The `SelectionChanging` event can be handled in C# as follows: private void OnSelectionChanging(object sender, SelectionChangingEventArgs e) { - await DisplayAlert("Alert", "Selecting Item has changing", "Ok"); + await DisplayAlertAsync("Alert", "Selecting Item has changing", "Ok"); } {% endhighlight %} @@ -650,7 +650,7 @@ The `SelectionChanged` event can be handled in C# as follows: private void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { - await DisplayAlert("Alert", $"Selected Item has changed", "Ok"); + await DisplayAlertAsync("Alert", $"Selected Item has changed", "Ok"); } {% endhighlight %} diff --git a/MAUI/ComboBox/UI-Customization.md b/MAUI/ComboBox/UI-Customization.md index 28d4a2bb86..61aaf74665 100644 --- a/MAUI/ComboBox/UI-Customization.md +++ b/MAUI/ComboBox/UI-Customization.md @@ -522,7 +522,7 @@ We can customize the size of the drop down button in [ComboBox](https://help.syn Placeholder="Enter Social Media" ItemsSource="{Binding SocialMedias}" TextMemberPath="Name" - DisplayMemberPath="Name"> + DisplayMemberPath="Name"/> @@ -935,7 +935,7 @@ public SocialMediaViewModel private async void OnAlertCommandExecuted(string parameter) { - await Application.Current.MainPage.DisplayAlert("Alert", parameter, "OK"); + await Application.Current.MainPage.DisplayAlertAsync("Alert", parameter, "OK"); } } diff --git a/MAUI/Masked-Entry/Basic-Features.md b/MAUI/Masked-Entry/Basic-Features.md index 28d3e68210..c734ecc89d 100644 --- a/MAUI/Masked-Entry/Basic-Features.md +++ b/MAUI/Masked-Entry/Basic-Features.md @@ -604,7 +604,7 @@ public class CommandDemoViewModel var page = Application.Current?.Windows[0]?.Page; if (page is not null) { - await page.DisplayAlert("Alert", parameter, "OK"); + await page.DisplayAlertAsync("Alert", parameter, "OK"); } } } diff --git a/MAUI/Masked-Entry/Events.md b/MAUI/Masked-Entry/Events.md index 42474b97e6..9e56b7783c 100644 --- a/MAUI/Masked-Entry/Events.md +++ b/MAUI/Masked-Entry/Events.md @@ -169,7 +169,7 @@ private void MaskedEntry_Completed(object sender, EventArgs e) // Place this handler in the code-behind of a ContentPage, // or resolve the current page via Application.Current?.Windows[0]?.Page. var page = Application.Current?.Windows[0]?.Page; - page?.DisplayAlert("Message", "Text entering Completed", "ok"); + page?.DisplayAlertAsync("Message", "Text entering Completed", "ok"); } {% endhighlight %} @@ -215,7 +215,7 @@ private void MaskedEntry_ClearButtonClicked(object sender, EventArgs e) // Place this handler in the code-behind of a ContentPage, // or resolve the current page via Application.Current?.Windows[0]?.Page. var page = Application.Current?.Windows[0]?.Page; - page?.DisplayAlert("Message", "Clear Button Clicked", "ok"); + page?.DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); } {% endhighlight %} diff --git a/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png b/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png new file mode 100644 index 0000000000000000000000000000000000000000..ed12e165dc693ae7ffe888f4ac15046aad49e1e9 GIT binary patch literal 2076 zcmd6o`!|~j8pq#MB`DEpDW)W+?Q~n0me9IoFs!bjZYzs%8I`0)E6QL9B~34jbxSz9 zm8q(>vt`q`;&b`e044Afe%=H zoi_aT%a|+xfU|!C0;d0X83166K!4wV=2d-TYE)?vgF#E1fA8L@vWE{g+KO+zb zI0%C5U5Vffx9z7V_QLN**J-n;0X!vrWQzS=Mut?i92yp;s)d|(5ay)W;U1>!cGWxjH8ZU^(j4Ufo0#+brA5({pXWWDs6TmANtqGbyyinq&sR zBh}ttjWfZdsutJaK#qWl^f{8Her|XeAbj!{An2pe@T&S$SP_dTfx}?1vTUtJy|A-B zt>zz@@5^`lJa;RxJ5MHD?C(k!AP`>H-wLih6^+$vZ}cbGZ%(gMk7W;*6Mwt$eKQbV8lgaB}heTDO`53 zsYO?pXlHez(Fbu#V7aU<9?1J+|NLX{T^Vtw$#U4^r#LHyWlxiJHyx^oXV$J2lZp}@ z?qgV$k&C<~=~Pt<$YT^S!iDhXBomilsrH9S==vl*nmh*;Be5yBe~|?F!TIve0+@h1 zSYaZ{zU-jny?k@xVI%S#`2>`VeCOdjZ*`w3@;2w&GG+Jk$%#Zm%;5$U%0OkX%-T&T zdL{^L!vFe?^3?_FmWa=%J+Ymn^mOmhz2_+nJD11U|cP9{18&BYX1dnCB=FEQ}1y{3A3pWP7Z z?x=n}_^_nnl@GFkL4R@F2xXk*HfcIn9^*4AijVCZX|svnjM&bdwclP`=ZgIz9*~Pp zjCtL$9-9DdFST@s&3D=byQR(TsXaNUzxj)LqcYCsHD_&_ioLPQlhD+Jw7RO2V`$fJ zXZaCm8VJ3jDHv#g<{B?{_YL?tb@+;j)>ch9BDW*s8q3CZk%wH(kUj8hF>8rtO~iGw z%T+6r#oSGp*a91S43@7+!>=9MuKfE|$KZcSI#^Zl80=R&th>DikEj<)XJ@$mOLq_ItTCelKEQP24pc2qih0vmg`M&UNV9n_jjpsd}V_(jGC>COY%GDA+TJ=b|cUt=@W?r+S=4M6_Yt;uNOd8@;O zCS=?>qh3ynwJN4pq6g(n=V1EOTT1J{Q3PTz9vQGtdjzXAf5af}DFS}j08^}}jEhVe zzL`N)2#4SA)I8qJ4EUdRK8f$+S5bddbw%P#K8Nn8E}JHZ8I1{aG;y4XciIJ2?Kq3`a>s9|8*t%>sQ&Q1XLJM6hg3%j z(?@GC(k7FH6xt%tel@p7@HY8P$0Ih9RxsQ&BYEvdu;!8Zf7*ubzsa{aT2W^@A(cvT zkXDuJ`H8Mi8>*|T7q+%qwXOjAv@maUhu%5qR99Dbrjyjz*r*Nx#Fexq)EK_`Qb$vf zt^e0cm(QL(tE>fhkl!5|*Jaj;XmEeb(~$PIuzP#brL7gN1-H$C5D+!GK@*@rw~iOQ z>$D+-La`;^m|ghwzsdKKVx}lfzxP&RhweVl-A6dGVp*W@U&^3F)eec zG__eHA+$2^H0LR$GG`9YE)`J}7$P8o`m*iXKk)8)e|Qd`>w2#H^Ld`<`rP-O`=9e( zdO8Pn007YQMtb-GfJU8qU!=WDJ(F}(ht!Kkte@9ufcDmGNgaS95WWZiU=;6Gg=?x~ z@Yl%8u>i2A>yM$)hkf(~0O%a@_CQ=r3>8ehiLnYaN&ir?!-(v8TN8SU`R$XE#_-Ir zGeKXNXhz<`YowQrJbkVA)80$kxh1Ex!LRn~KB+-6Gj0N&2VoVtg3g3(#RK{qqmjzT ze9JzrOZ3U&xH24p+4AE@Rh)X(Wcvl+frc~R6!`7(UMt``C=xh^AOkltp&IW%h#e2W znV?e;5IEgh+Ys>m=LcTChx*nJ~nZeQ#5P|NUWdt8hx006*7T z$W6GC_g&p^VQ!VA|&hOoX-}>>9;>V9BcqzcCc25anAVS9B4X?B;cecSYNC zw6%lqPJgVNVmxdl8&JK;YFr=owyl>EVo-lVmGjmthnrr}L z7jsIR#9J3CHs>Fl>mVKYaqNv3cTF_B5&q)vUkMoNQ(`BNQmpWf!lC$A8tFg>+^!T` z^=+hhV($5bzJXOjHnely>1>n8-L8InOhv32Zu6`lZV#=d44Qt7uzNV!meSn1I&g&D zZ{KT*ZM^{BTAxd9dWeE6>RKgl-M9)K1s$VYWjmD1r&H+DHycvqLZUd8diG`@Reos8 z6x}D7U?oWw{0EtQW|X*<5j_*Nmmbx6SCPo1=v%-ZIfvv4T9p1BFET-MdBbs~^y;2P z7y{g6S?Rg7HZ7|c(THUH=|X7Fd^v zQIeIaPAy9qLtwqiyP`DVv>9>_lv(Ev7_k zf_wKLQm3t#JEKiTFb|I@WT6$)sX+sG^wE z{&s(0#NWL?0@%Q~JmUx1$lNVNuvO{e1m~U6tE-Oj=q_D9)%GGk+pZ{(90tQ3pIVKZ zpjW33-jL;YIVs0J{FWCflXN+?Y|d{=+`J-+pL0hD99N{t?d1K2_(s8W`AG)H=_avs zHR%g0{;O`EkE-jdUv?DS`+fQMn8USI8DndsIT$yqz+grjv@>x5TNUCMNdM~a3AVh9 zv=LW!Y07!CH?*RSx&2;1)%HV$oj#W?ou`~^;5Z?r152<=zM}?@Z_Rq<@mx{l*%S== zk^oByI$lLcL1c>0p~sIjUD0aOSlW%6i4Ku8>)-8Yxu_MhA8|0~&~-8k5;1)#$L92i zoHUrE+fan}Y!svfELYkfnP24^M?>mhn$2&b?ofZ$E`@d?;US+me0huAteiDuY2^7Q zQZf4ubhx-h2X3_`l_bECIDmI2G&gVF?Ak^5YJN`vbm*cAl86O}~rSVDsgvPCjh( zHz5YKPuC~LQvB*I-||~__3W4%-}P9;r`7nu2$@CqU%A#DTgtI3`ndRbvyqjtS1Noe5izb> z6-AlX?S({zeqM#k?SGD~5zvZQ5WG8XK`_;SqVHX|Ippg}G+JEFI`kya*n}$dp*vJc z;d_=WB4z}{K9{(wwxM+4K+H&<(+f5g+%f?+ET}8-PvF3jXYi*7|6QJAuc>cRD%8}% zT_H$IuKi1UO762Ue_t7I~`ZI zI=_z(4<(ro4x2M)b2p3W%eU70i4DzyD;Wvu>TKXc${Gh{5o!k=i}oZZ&!fbSV?V?r zf{n@oSRKPnJ~xM_>S+Z(d%oI_mNT7@%f0V(o*wz=*Ac=v!y0+CTGcbU(RFc9lFwl4 zUvckq=nY+ldM5HIzns}>jF7KgK3glgy#lKmA-G~8CM_HI)nFQwFGsUFV64LR_ICfo z3033ryMa$b>Fs?M$qlPItpOl#?{ifw#As~@(ZsQEe?A_}3)ZqlnfHLqAYaMtn%XJv zC7Xq}{APGf(w=CDNqRgrUl@>)bSH#_oe98E=k0DRt}ln_n&|imBVgwzIa8c=jvbbc z0w?4^J6~2ybExVfx%(4bz&ube{S*r`@?H-9l}OF-8 z{YB%S$(Aq*CP94RjQDSXq5A$UMgK(S!+BZzw1A(46H8Eck}A;!7$sgCT&mr*w7B?a zMI_?`6d!nC^o zQ1*M&+M~(j*;AMb=Okf!xN$b4_S*K)*5dB`p{#uik|Yr%3g9Gzk z`g(IZg>3Cy0n_2-PSF^*fN`5Pslg`XfC#Awr(Xg z6fKEejrWabJnLHev zI5B#^+SPX8E4vSLkkt<+JyEjws;sOd|8dLth`WrbhbdN{Ya#3Vvg+9#-%ROs!Uqr# z5H$?n-3RP&OAi64&q0=Jczu2SkXo(&pp?%o|I&D-4wVr1+Y$6PtC$J-?$CFw1sDvI z#bW(hQ&Y1nlV#yl3Mwk0F1CQzRE2jy!&b2qo7uwn+AcbMDOJGZo!dnL<`plf;PM8^ zTn_^(wz%17^W}iNOihJ7&VCzKE8>K~T#6U!jZI&5^JsMWPc#}$*=(9-#!JM_3Ei?? z!Z#~=;sIHIHveN~$g$@|c{XMM+hY|!v7K$@3e+8P1;&i|`Dr6V933qz9sO-BEG(?0 zzqN)ARoHlFhOARKMc)1-9gc+%Kz!ZK*CGZIi0p)jh&M!94SEz!GU(LYD(cbZ4zeL$zpeUPYbxM z3_KZ0^G_gfI9)ywo4e{@xWSJwnz>*0m_v!tU2_cfAU(?Eo#Mk6#)^3Z+2ZbG?_tSU z^5vkl(_bJ5n}oz?ha`@azA8e%OTPELb6!}4JhLIXJctqp?l2Vnoqc_ywbpYTd(_!1 zN6XZ`;?(DX!4uNasE_|Da|rd14Ei}J1f&n_M_*%|_CnK%$61&1N4!{$W**o zt#s|N$|H(4LneyT#v1j&*x)*l*}#SZJd^_sj5Yq)Ao3| z-3pEt7@;oWd8(PQ(HW^vd`I@KHO(IHa;0PVn*)kDE%YC@UHA(a)2~fsg6?eWd3ls0 zn5Ne2AK5Q@{;(p|Q;XXx)48ul)0nV+22LsQZR7A6layr1G^P#55jrgPP*IS2terc| zf|VF@vkdZH&A!(@Hymu*Mr=G5IIB3DfAL)U%m(5Q8v_vHwCYFp{o{&vjmYx+G4`9u{yE`~U*dIw+$dI2rAwK`dn?4<@N~=oT+b-|tNua-N@R*2y!WP|sK#5@IB5``rEDy4@y81mb+Wg9uD?^l$r30Z(#PozZlw6=$|G-{; zPwyc0=1zatT8l_+25}wqUIgvi@#V(Ie*1osrj6OY%|Io*DUvoua_#%|I`Q`@T)n>6 pNu0=d05utawCwrT?*9q$mxz*QBwJL4*tola^XCvDU1!to{1;N>#!LVJ literal 0 HcmV?d00001 diff --git a/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png b/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png new file mode 100644 index 0000000000000000000000000000000000000000..5694e6dd2487206a90c844ebb58b74c733797d0a GIT binary patch literal 2058 zcmd6o{a4b59>>3k4>J{QIyHmD+iIuf!@M*O@2$rVIREL%Ef zV(L9TY=8@9bxaw}Br-vV^mS=+1r-97#FPwt0DM9WFZ~hQ*$=PJ=kq?FbKXCEet3Vr zk3SaWw9RW9002%g(GiIN0AX6@>mS%!YHjTx-O?cV#HhnS`w)E2BCOA0Mbg!kwGKowO&DAn}m> zgm9aKfYTY!ihboH2df06&oBxRYd1ku)}jM<@Uu*7jqSXEKl*5aVxu|)`Uw@|Fb}=;?&FFW+BQz@2 zNv&237L|NIO~x1t$M@AVClAiulm>FL%0amDyCaqV!Q%~Ucl-kaOaajNlY{f)U-hAI z@;lh))M0;r>xwQ9Ln!fR>?z-9-6Vs$y~jL26^r>vslL$(5^qfTGTk=AS*ReyE;hJ3 zByJ}9x&x+sj{_IkNa3pg!WfXTB}7rUypOR~8N0Do&DMVkURS5)6&yjOo%7Yk#>UZ- z$4YkqYZT{bXgL!Cr9_~~I263^zusO0mbA6_nG8(nd zwmcG9_rr8n_AJQRPC*EWIWxfGZdaw0{w2-OMO-v%WQX+J4K-yHM-KSCK`pMDo*B47 zX6TpaB%@M=CWqm+MaQ_jrVIE_JA2AQ-XeuxzYbhd-Ca+1RKdk} zUimT%`kDK{{WNgzg#}%)qFzMhU`Z_zh!v@qoNQ@#~8kY{h{*; z*38%1ZbyYIeljxh4&^KDK^1AE_gz5dtFm zGF=n}wGg7XySWd_8k22k zd%D_k)$>=PE+`eY=J|U!VF@gtm8QJfYxLymhdRTm?>kSoAcg8Ip-v}b&(d-yBMPNm zhnrg%FtKbRZF{BXWp3$PyS&H;-YWdJ*C)?R)cFzjka+V5f=-u5Kd~4BH`Hu(ic-trYi)6 z%h=luP&AnsShT;m|7J(NpHMBIh-$x&Jin0^V=m-VB5GKVIQgJqS%ktf|V&7*pJA#{)uqdlH#y<7XF#mwfG0gVMRyd7og?7VR>1P#u zl$Y|0Rrkp}^Fz(ZkY75B4bn>5^f1(`Vnk8BzK!A86Bw`P8hlosC{pG}G(9t4>|{TF zaUCM-=*nK)HrS=rmx2p5r#>NKlcY+!tmnt;^{D9!s@!>QU3aq4X!h$RK&s~NRW=c2 zGcH3A`C@n~JJ-wP@c<-1@iPXI{qvEuOL!i~Lp_coUpX_evet6hje@u|@Y&3J2d-(n zqe4I!v4jllPY9YT-7vAyXv~59xw$x2SKP9b2UH- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +SfMaskedEntry maskedEntry = new SfMaskedEntry +{ + WidthRequest = 250, + HeightRequest = 50, + Placeholder = "Enter a value", +}; +VisualStateGroupList visualStateGroupList = new VisualStateGroupList(); +VisualStateGroup commonStateGroup = new VisualStateGroup { Name = "CommonStates" }; + +VisualState normalState = new VisualState { Name = "Normal" }; +normalState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#707070") }); +normalState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); +normalState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#707070") }); + +VisualState focusedState = new VisualState { Name = "Focused" }; +focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#f903e9") }); +focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); +focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#f903e9") }); + +VisualState pointerOverState = new VisualState { Name = "PointerOver" }; +pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#c372bd") }); +pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); +pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#c372bd") }); + +VisualState disabledState = new VisualState { Name = "Disabled" }; +disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#BDBDBD") }); +disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); +disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); + +commonStateGroup.States.Add(normalState); +commonStateGroup.States.Add(focusedState); +commonStateGroup.States.Add(pointerOverState); +commonStateGroup.States.Add(disabledState); + +visualStateGroupList.Add(commonStateGroup); +VisualStateManager.SetVisualStateGroups(maskedEntry, visualStateGroupList); +Content = maskedEntry; + +{% endhighlight %} +{% endtabs %} + + +### Normal visual state + +![.NET MAUI Masked Entry in the Normal visual state](MaskedEntry_Images/maui_masked_entry_normal_state.png) + +### Hover visual state + +![.NET MAUI Masked Entry in the Hover visual state](MaskedEntry_Images/maui_masked_entry_hover_state.png) + +### Focused visual state + +![.NET MAUI Masked Entry in the Focused visual state](MaskedEntry_Images/maui_masked_entry_focused_state.png) + +### Disabled visual state + +![.NET MAUI Masked Entry in the Disabled visual state](MaskedEntry_Images/maui_masked_entry_disable_state.png) + + +## See Also + +* [Getting Started](https://help.syncfusion.com/maui/masked-entry/getting-started) +* [Basic Features](https://help.syncfusion.com/maui/masked-entry/basic-features) +* [Mask Types](https://help.syncfusion.com/maui/masked-entry/mask-types) +* [Formatting Value](https://help.syncfusion.com/maui/masked-entry/formatting-value) diff --git a/MAUI/NumericEntry/Basic-Features.md b/MAUI/NumericEntry/Basic-Features.md index bfde4c4426..e877ce3cd0 100644 --- a/MAUI/NumericEntry/Basic-Features.md +++ b/MAUI/NumericEntry/Basic-Features.md @@ -232,7 +232,7 @@ The `Completed` event can be handled in C# as follows: private async void numericEntry_Completed(object sender, EventArgs e) { - await DisplayAlert("Message", "Text entering Completed", "OK"); + await DisplayAlertAsync("Message", "Text entering Completed", "OK"); } {% endhighlight %} @@ -272,7 +272,7 @@ The `ClearButtonClicked` event can be handled in C# as follows: private async void numericEntry_ClearButtonClicked(object sender, EventArgs e) { - await DisplayAlert("Message", "Clear Button Clicked", "OK"); + await DisplayAlertAsync("Message", "Clear Button Clicked", "OK"); } {% endhighlight %} @@ -497,7 +497,7 @@ public class CommandDemoViewModel private async void OnAlertCommandExecuted(string parameter) { - await Shell.Current.DisplayAlert("Alert", parameter, "OK"); + await Shell.Current.DisplayAlertAsync("Alert", parameter, "OK"); } } diff --git a/MAUI/NumericEntry/VisualStates.md b/MAUI/NumericEntry/VisualStates.md new file mode 100644 index 0000000000..5d5b20fd40 --- /dev/null +++ b/MAUI/NumericEntry/VisualStates.md @@ -0,0 +1,152 @@ +--- +layout: post +title: Visual states in .NET MAUI Numeric Entry | Syncfusion® +description: Learn about visual states support in the Syncfusion® .NET MAUI Numeric Entry control and how to customize each state +platform: maui +control: SfNumericEntry +documentation: ug +--- + +# Visual States in .NET MAUI Numeric Entry + +Visual states let you change the appearance of [.NET MAUI Numeric Entry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfNumericEntry.html) in response to user interaction. Use them to apply different colors, borders, or other properties for each state without writing code-behind handlers. + +`Numeric Entry` supports the following visual states through the [`VisualStateManager`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-10.0): + +* `Normal` - The default resting state of the Numeric Entry. +* `Focused` - The Numeric Entry has keyboard or input focus. +* `Disabled` - The Numeric Entry is disabled (`IsEnabled` is `false`). +* `Hover` - The pointer is over the Numeric Entry (desktop platforms). + +## Prerequisites + +Before using the [SfNumericEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfNumericEntry.html), ensure the following NuGet package is installed in your .NET MAUI project: + +- `Syncfusion.Maui.Inputs` + +For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/numericentry/getting-started) documentation. + +## Defining visual states + +`SfNumericEntry` exposes its visual states through a single `VisualStateGroup` named `CommonStates`. Each `VisualState` contains a collection of `Setter` objects that target bindable properties on the Numeric Entry. Commonly customized properties include `Stroke`, `TextColor`, `ClearButtonColor`, and `UpDownButtonColor`. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +SfNumericEntry numericEntry = new SfNumericEntry +{ + WidthRequest = 250, + HeightRequest = 50, + UpDownPlacementMode = UpDownPlacementMode.Inline, + Placeholder = "Enter a value", +}; +VisualStateGroupList visualStateGroupList = new VisualStateGroupList(); +VisualStateGroup commonStateGroup = new VisualStateGroup { Name = "CommonStates" }; + +VisualState normalState = new VisualState { Name = "Normal" }; +normalState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#707070") }); +normalState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); +normalState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#707070") }); +normalState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#707070") }); + +VisualState focusedState = new VisualState { Name = "Focused" }; +focusedState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#f903e9") }); +focusedState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); +focusedState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#f903e9") }); +focusedState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#f903e9") }); + +VisualState pointerOverState = new VisualState { Name = "PointerOver" }; +pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#c372bd") }); +pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); +pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#c372bd") }); +pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#c372bd") }); + +VisualState disabledState = new VisualState { Name = "Disabled" }; +disabledState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#BDBDBD") }); +disabledState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); +disabledState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); +disabledState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); + +commonStateGroup.States.Add(normalState); +commonStateGroup.States.Add(focusedState); +commonStateGroup.States.Add(pointerOverState); +commonStateGroup.States.Add(disabledState); + +visualStateGroupList.Add(commonStateGroup); + +VisualStateManager.SetVisualStateGroups(numericEntry, visualStateGroupList); + +Content = numericEntry; + +{% endhighlight %} +{% endtabs %} + + +### Normal visual state + +![.NET MAUI Numeric Entry in the Normal visual state](VisualStates_images/normal-visual-state-numericentry.png) + +### Hover visual state + +![.NET MAUI Numeric Entry in the Hover visual state](VisualStates_images/hovered-visual-state-numericentry.png) + +### Focused visual state + +![.NET MAUI Numeric Entry in the Focused visual state](VisualStates_images/focused-visual-state-numericentry.png) + +### Disabled visual state + +![.NET MAUI Numeric Entry in the Disabled visual state](VisualStates_images/disabled-visual-state-numericentry.png) + + +## See Also + +* [Basic Features](https://help.syncfusion.com/maui/numericentry/basic-features) +* [Formatting](https://help.syncfusion.com/maui/numericentry/formatting) +* [Restriction](https://help.syncfusion.com/maui/numericentry/restriction) diff --git a/MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png new file mode 100644 index 0000000000000000000000000000000000000000..eee221418269d90f9f32b3b2263e51ae83fac77a GIT binary patch literal 1759 zcmd5-`BTyf6#t@jkYhQ~I=YsTi&j?VQRYeFnxf_riW`|%lcIRwhHD;(o26}*E3TFY zDQ!cGmZGMqgRWXsqedc}MJwG3Joju>~ z0RTY91L=wa01!=`-`%}a?J=6C4AcQcK)JgBjNXF_>Ou>P@J0YYU7ofwe22OQCm=Bd z0NBgg28fNXxDEh26FpoJ0m>c252o#Whf&ok0V zOH1p{-)c`?ea`!7VO7ZOmZz?Kem$u2Eq64SY|r3{n5ebCVrx%3O{DmdGsQu+^Hqiyk<$xk&cufi`Y_*x#V9Crl&``!B2?9D^o0iFtj!K zlc>!xJGL9XDZaPA)@wPA{Qd|Iq6#3ttfmgLKh2xiW6-%Kuv0j0r=`rYQ}K#p*nTq& z&bB4N*%qtmfLTiuqAQxAWn3VSGhIpYj4MF<#!6IiSr5_Z(3~jo z+S*_$tAfO?84pq(^YZ>^5W$ds941(0Zn|a{%P+3)(4`q_9as1Shgl50>2ovU!H_Rx z?BVl95LiX@#9I;_%yPx|ZKuwdcM4(yGv9Xl+Dxj^@}~JbeyUF*iRSWov6Y zoP2#NXO?N@M`nOgE+5UqiZ@sT-meA+ner&b#bD*fUoG3c&I$tqgp=A&j1f#z@WcjA&A+R3M43yDXys!$(Tk)>Lc=m9>b-88{O}pwA#=%q5+)v)uJ_Bk(4Z*%?;Pjz7%_%)azKbzA-aHqjq8IR-vGd0|<>LTK^;5 a*#h1^C@6BeqS919CBWl?k1N9^Ec0*b3mTmO literal 0 HcmV?d00001 diff --git a/MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png new file mode 100644 index 0000000000000000000000000000000000000000..aa679b0b48704cb1caca3a1d736f61015df3ae3b GIT binary patch literal 1936 zcmcIleN@s{82&j4v7z>%SW^01_A$4<*hEX6_A4!HiNz7EO!FgBm*PrI!H=LX zz-YO}asU8~+;Of10MKLV)+q?MZY(6`Ht8n4D8hlgKuOCwnU26hAP)!t%IKfZ2QJfb z!yj?Sq5#0SdI@@Uk%gxKz+jWRE94dDKicCN>3eMLi+&u*M2qyB2x(gu&VZx*zD2~i zgrdy84oJSW0hLWkM|`1Py#kI(aq|H$z1s0|{Z4{Ci1{H4FYodQnsYGV-6Ypmp1&tl zaZVPrTCdNqoPJwwFD(ep?IxQ6xPT%G0CYkO0QY|*kOWyE;e&mB_oKNzABLLI)jN^a zvJ{HLkRqeP=aCvD60u3as?Cnsc$u0yI6nSzC$bvn5R`Ls)?sKgLlA6v@+a@hwiao4 zv6ny`nF9yQGAa}`u1(U2GgzFuA=E4qc5yIumg{fBDdvDRA$0HkKvt=aX|oAupzE1q zN~OJtKKqg+nERWLd+{T-QZlUMV;nSbV+?9zo^ydfUgm9=kae*lF=ugYKKnCD+mxXCVP2Y2CAQS)=f=A@Yk zE#YPseS*j)n?%iHnOV_46$*6*m3h26aP*mbwosFYhgb8L64kJn7fW-7^I zej-(?ottia64Htndf}Ie z_Y*A!VId(>Tgzt9%~c+?@(!Y7YHCVW78gFD*<~rUK6o~9{&BTwnXY87%`p}Ub1}OY z=I&GEHwG>s8~Pke>yDHY8b-5?+E1m7byr4_8Itbz@?V`T>1l1IZP$n*W*yxscmFoT zsuQi_>2m{jTHP=#x7!kp+}!WT!I5kuLc)90rId@p3^OK0QucFEPU<0N0rAh~81~kZ>S$yl02!`PUx8!cKv<9O;tj%r}0rS);%YNBp8bo)x^d z)Q^Ee5Uy-0p}%ZeCH54d!3`%=ejV@OOF|+mtLEzseeqi`*S~Cba8Z^O*+$Y%)(U%* ziO)|%RY45NTk5`QN>N^1P8^>qRO&9ZQfwCSVR=}ukUwIW^yV~gip2MZs`fI1M5|vn zzoo?H#Ent)U3m{zZ9LjN{3I_;YaG^jC8_u5kgLFJTat1UE*(L5d__+56b?SW)8?ce zus%hDrE(j#bLAbSCH3q^@??4*K^rabvN}P&vGAN9*CJ|f*#lL9xRtq7{eAP_wLO%J zh)!3*-_@@wKChCCzo<+*Or}Lc3_1N>W-RF$t3E=adpc6Qkv$!3Hf*1ewzeirN8LK= z(X8Pz>m411*rl-l`M<-2L?=6pu=1F-w=;)oW@@FX5h&u{V3mnmaBL@a#Fg4Cz0=*J z??!2MS9M~9M3X8?@CQtp=33n=^qL^o8**P$5zO#zNPx)yNE literal 0 HcmV?d00001 diff --git a/MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png new file mode 100644 index 0000000000000000000000000000000000000000..8eaf28470dfbe405be9d1848e1fe55a7bf2e01ec GIT binary patch literal 1806 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +SfRating rating = new SfRating +{ + Value = 3, +}; + +VisualStateGroupList visualStateGroupList = new VisualStateGroupList(); +VisualStateGroup commonStateGroup = new VisualStateGroup { Name = "CommonStates" }; + +VisualState normalState = new VisualState { Name = "Normal" }; +normalState.Setters.Add(new Setter +{ + Property = SfRating.RatingSettingsProperty, + Value = new RatingSettings + { + RatedFill = Color.FromArgb("#db9602"), + RatedStroke = Color.FromArgb("#F57C00"), + UnratedFill = Color.FromArgb("#E0E0E0"), + UnratedStroke = Color.FromArgb("#9E9E9E") + } +}); + +VisualState pointerOverState = new VisualState { Name = "PointerOver" }; +pointerOverState.Setters.Add(new Setter +{ + Property = SfRating.RatingSettingsProperty, + Value = new RatingSettings + { + RatedFill = Color.FromArgb("#e8c764"), + RatedStroke = Color.FromArgb("#FF8F00"), + UnratedFill = Color.FromArgb("#D6D6D6"), + UnratedStroke = Color.FromArgb("#BDBDBD") + } +}); + +VisualState disabledState = new VisualState { Name = "Disabled" }; +disabledState.Setters.Add(new Setter +{ + Property = SfRating.RatingSettingsProperty, + Value = new RatingSettings + { + RatedFill = Color.FromArgb("#CFCFCF"), + RatedStroke = Color.FromArgb("#A8A8A8"), + UnratedFill = Color.FromArgb("#F0F0F0"), + UnratedStroke = Color.FromArgb("#D0D0D0") + } +}); + +commonStateGroup.States.Add(normalState); +commonStateGroup.States.Add(pointerOverState); +commonStateGroup.States.Add(disabledState); + +visualStateGroupList.Add(commonStateGroup); + +VisualStateManager.SetVisualStateGroups(rating, visualStateGroupList); + +Content = rating; + +{% endhighlight %} +{% endtabs %} + +### Normal visual state + +![.NET MAUI Rating in the Normal visual state](images/visual_state_normal.png) + +### Hovered visual state + +![.NET MAUI Rating in the Hovered visual state](images/visual_state_hover.png) + +### Disabled visual state + +![.NET MAUI Rating in the Disabled visual state](images/visual_state_disable.png) + +## See Also + +- [Appearance Customization](https://help.syncfusion.com/maui/rating/appearance-customization) +- [Appearance and Styling](https://help.syncfusion.com/maui/rating/appearance-and-styling) +- [Getting Started](https://help.syncfusion.com/maui/rating/getting-started) diff --git a/MAUI/Rating/images/visual_state_disable.png b/MAUI/Rating/images/visual_state_disable.png new file mode 100644 index 0000000000000000000000000000000000000000..8047c703d8df9aa0eb65f47ad8ae0d50f1e71f0b GIT binary patch literal 6714 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 M71ZP_W#0$?4~Dqpg8%>k literal 0 HcmV?d00001 diff --git a/MAUI/Rating/images/visual_state_hover.png b/MAUI/Rating/images/visual_state_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..9b2c6d527f42daa04cff3729b197becef547eb48 GIT binary patch literal 7954 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 S5wxZ+KwA?EDSz}l{Qm&VmUC4A literal 0 HcmV?d00001 diff --git a/MAUI/Rating/images/visual_state_normal.png b/MAUI/Rating/images/visual_state_normal.png new file mode 100644 index 0000000000000000000000000000000000000000..4eebc042af7378553f0590cbc2d9b60c6eecbb76 GIT binary patch literal 9159 zcmdUVZ(mNhG_45@6p++%(>J;NVbp|GRMeT}y0maCl8M zRY0$O&G&Lhk{D*aA~(6yXFrsg*8G|iK4?gtt3f+w!Su@%=o)m?jPPP?eN z+avta+$t8r#m5+9mJ&gs6hi$#jf6pRUtjl#r$o@#son&d)=@*k{&f-<=KnC~KE`mCnL0Yj}*UOQn>`&P?=D_!hp zqDtD%H8JKaA*eM#?MuHsLQEUURzStgkTkq8((?XfWay(nFGs*32r>Hh42pW-eehE# zZ2OMI>rpws2KX*XCfFp_{<~dv+Ma9V|)?tT|ZEkMv zp&&Pug)=A~rMR#4kOaO%eX3^UKKm1#5nEt9l5F3NqLY&i%xHRAtE%wuBjUgXG4^-b zSDoCl82B_SWzk37a@Y(rhh!d>mbz#KTu)YS-L<9-L6Uzi15<+b|A% z`Z#O~XwAQ{UUm8yMeKH?aDVyht_P>Vs+SZ-rT!kJPf^u!{2}hvXCE_vAfxd2_C)+z z(f9C^0>8M95fQh{<_Rs`v;XSanOA%Qa$WqU&&kDBZay`Scq33tL{^0aRU(2W-Z>`Y2mA;RY){} z1GJZTXElm5&052rI=1f}Lyi3%8`Nc_xwu$8kCo(6`G?bHn%_gwj8h6;mPCYdQeGK? zW7>+6rg<+~Q2vmE0Yjw3FG41~xlB20ck%@OUd<}N8&zc7Z{p9i)F;Zj+Wq*g4c>dk zn#{>s#b;YR-DDyyTu1t@*$a;T7yBO%V5an+tDmg-v|FqNH=i7{w)MkMPczx;Z0KiT zhDUbut9?X1m@4gu9BV$opFaFsvV>|VX4S2XPqWON<>aVP6|k|QVwL<+58d0Nwccb; zqE|-pHWu$E-+Y(V_@|Nm?O3X|+80cqYmNKux?1zIL$2{EOIpsj!5SO4Y$=wqd`RWA zYLY?{l%z(Ho$hpDqClO05I2E8d}@CFvCB&5+O)a&YjIedSM47s(`K%r`FKfVFr>&Z~9)DY>;Q+#USb z`N!p)Y_Rxj^=pLrjYrHC_jz$1vOy`pZExIDEE(%qs=l;AfEoB^cuXSbQpQ*kzrDhA z^Az~88w=u|>pYIxv-D~GY_8w-dxsg=A~=uFo)YMqK>K=b^F++`!5kE^wKw&JlyrC}U$Tq-?-` zZxY){w+MQ}G&8MZbfYoS4E^C1RtQe{G~NtiVz93zGJH*6d~RF};C$Ao#KdGzTX)}> zAf*X%1I1O%EzDRocMjw&( z-h`@J+BEN9Jzea)M$vGxE%9v95@G$;_B#Zod6)pE--9nUW$1I=OMV23GlB`jo{uz5 zVnwG$^u8Qw^4RoDhLA-tz`|z~A2(@LXRsrsMoh74Jk$0}PUhoO6v?^XBDKa&X}n~G z#t7#ooF>WqZc27>JyFJ?H`e?Kzm<+XcH|v&1szBOmd1viakh1*&Q$1eR?gtw}ZGX3(NV6QXlzhNn<##NcsHTa9IM0Uj;QMrrnf@ zU556;LS#p;MnPY(_yu;#E-b2IIJgwf0(Akx*XR))C{Sczke^3=$C!5G-2p40EiPG%at#SO{9-5v+8*R!LDm(XJ>H< zfd7ixDnI{ZSJr|2P7nS;xf!`-#HFRH=iigUyq3bX`m)~LM{D7{CSboAq2|khm9K*t z!Oq7+EP*it)qywXSy)?B4sh!XBhWK=4T@ta&@b1V882ovX%A{`LG}EC1;!NdVyVxI z>&xc7m?dG9a9UfEYf&AFeR6cNbPGOpT<*gI5&q5EFFxp6k@%##rm=ekb|j2ow(}u6&E-L3xA~ zIU;@Y@`X)=|v!WR)rSLWOh(iZFLvfRD(ne_&=2 zc2(C9ejWVNB)00^BZ&S-SkCiL((dmt@d84tVK=;4y5jSNx^V>ok;isp|M^6B$wEgh z6l}%6Z%SfPJpL+Kg{kjEV?DvZS7>di^w7+#16*Hee@+5#>|}8=@TJpsJoe*jivZC& zuiqg%SI$k9X4f?oA~|64De880w!%zHLs%As(`8ZX`wlF9@7TTGNa^@uDODY(DZox&77rSqm$ z3{=If5Dl3;lVr7hsGU2VSj8F5zT?4aYZU$^PhFm{292f8t-t|aoR@{hFCPI?XsHk) z30kh@S2X>{3#*xURjc12?7;D2jNkZaA8c|yhm{jxq=pApjP;{%u??hXA2s{=%7tp` zlHJu7DQJ7QU~{D9G@dIzIS(BqNNJK@@QgCA+Byb6U9Q^`5-9I3uWQ^^l`?fAmi#Y5G^xqYG4+>4^BQB>iNRn%t={fML5_G?? zF0z+kR(rYG*8@H%nN4MfzVE!&^YojWszbx^M&D{!;p#$!?y`bRRiQ|>cXx~Hbl1rY zy*akAPm!F6*sM+r6J@kxq2&YW6k*F0MsdKFc)`2F50<~hFy|X;ckw+hpafTBd$fy6 zT_Fg`B5y~=?nfkB_iNwU2iFq}+85Q{o-FZH4#=BmKZvScpm8Qvd(IlV@SlMu53ime& zwZjajnVFeF&Y2{uifYoPxW;YK=I2p=d~P3;N2=g%s(;J4g!@d_J9TA_tb0c8y~=+` z8ZFs8AB{~H(22$Fb3lD0rYKLRw-J$LcWuCwd;Xm|-#> znOIc4smLo)kTg|H%d$kOATec}FJ~;TC}foz|Kk>J?shWh#^(?u3M*MF?4rVq&g%-F zBW7lu3>KR_iobG}OZMf~NKunQ3AXI^1sf&qj5qD-xD%pKWHBu5cE_8E+x@x{S02tl z*g=19&YPY6$58QTjvj3luV3ufuxZt=i>P3PlCXKpBLqZrN|JOR9L=#dObzP6zr(MC zn=#2@_O2I3-}^DbI@cf zQ0DK;1UV0-lV*t;`gNzglDD~zV2;gq4TG<)#ik)ZL^9t&hG$sJvmn%X-9$A#zM}wl zQ2bD4Y>rKm5DCJ!`rcsn^BZzrPan;A=a@TX{&Ft=cNH;-{&lFmGvnpnb<5PX@GdB5cUtq!k5zo%x^s}YOekpTc0d7Oq zs5lbo!uL=so0h8BhtbVv8!d~$8#Rw;nIJ#&_Zn|=3=xqJ>6 z{W6u~z)W!wn#{0Iw&N2OmYd4~OIETx>dN1tH&AZGkqBO09oUF0$}3OPAr%+k&XHA~U1+lv5kY`~RqnPDLz&+TpJ4Q2t>jQyN&6`gO8yk?9d zzhy_3K?tWp*%gCK#c7}{1aE`3wWP=+(;xK6aud3Z6ZRHCkScRxL(1d^vl8TyOn8Ei zyISW2zi^#)kxn`W3$wG(CUBA@%h4ess~Ks%v@0%i+bXyp&Yp#7f}6B}rEsC|I{m3_ zZ~~u}-t~pNnQv0-|EVKyT`cprCzqDYjPm~U|NNqCZ=^Q0u<)ejxu5_kYxx#jCW6<1TM9njS>@E+mw9oy1m~;zzLAR?QIiP z?oh?I3pH<1*5yP&Lof;Md!eNMA}@& zG76mnH(F0jY%xw7M=~c{@3i?$2mEcWc z${?z;!3&F0<4Hglc6x_z>kAFr;S9EJtnAi!MOyYFU9fc)lEzUjN9U+QMnYzuQQ+t( zsrBG5qsM(i##VJlPK;N6O10&Fe4owkP@^8LJ;I{lD`X5^U(YHXs^~3IgOwf~BWzUt zT$_l5=qcUf}hv^2)g>_HKU|@UdTU5 zL$o!NYP3=^Ys^km4)6I&Wik!yz7edU$76>j4c>@#63QfWi(A(-GvD#WZMJEzH z1JLC>5(h-E>~_XTW?uh{oD`K~p$n#v8-v4YyK9C(e(MDY@gwT2c!D6 ztIy=*8ilIR$9J`&TAu68_pzT&!o-LcD2nS09R)F?+nut(@kQ5jfX zMNuc$SQ;TIb0K1Tvi0e$xr3ZcCk;FxU)^xV!M#5hhUrM#mH2S#KVX$=?iE}4<&1Ch z{$q}_c#t_3A!(Y!%5qqtK%+fsotjxSiekh;tz5RmR%)R-mg2qvs!^*OSHyt6{WxVX zLU_)aA~2xgxJ+wiR;F2T8|vg8$k#F7u^{TFHFA5W6aN(}{;iW`6*ljV_42A9lz=5C zbr!|{5F1h|mjv@xsPI7J0dtZ*1^$ACqyi9u^31)97g1226w6{3^P)1_sOLR!eLy#5~@?-p%*@o~TR&8-o7k1m}||7PpV!Xu*8$Z;Mp z-(XEqUOD(~JDjG|it@ELhC&n$H^)X^zBF~Iyc0fw}~jRQ(ho3=;+n!B)DSz=}z;I!5TI(+;Bc-Fmo0F z)%veDoLSow4;>b;&59N<`1eJI{`_eU!?WHiX-hOFFR-|KQxVxNX0GRi@vfrH(lc6u zj3+lhe0XM>jBZ?-y-)e;f4os;|Ibtc4c1EU_3mW)Q?a6&k5xsbRMN90X;yZ$jqIem5l%0lKUO z+@AhYCE%f$P(O|rolNb@%D%I!t?@Kr&!P0z0kQmXTQTUAC3 zC(C~|*awU&Eh`sBf;9&YVs%}ue)ogdauYRa0|N{WvW$FCALW`%43}h6>J+j5-~Jm{ z_EVUWtXt2rr=4jjv}-C$(h>Em&xV&7TNd8VA>T;&+WdWQd5D@sXxj^q_kBC^>GF~y zL;FolzraxE^@?Z<>RpzW(Fs$+>;~cfL;Q>2g>~7St&_``<)inl`CO&zeRs{3&0dyD zWSEM27x#pgwtdPcTg9#dsjhZ&!N z7aZ5%scsqrA~rTLQNC|*)1yw(E4Ex~!z<$%&y#zUF5 zC`+~~U3ya9iiAziBLkZD6KTjrz48!y1XnkNrmKL`URPun!+*fzL5K;NyBOt3sjB?eml{$FE{7UgfwkZS?t} zLk>k;q1OJeW(~RKWy?<{1|N^`&U=G~DbKE~%Z)q@qF0bz5+yfMCDHs|zWuw#LH0#d z>>d%eh&i`Kkne_iq1)l7qsi9}Ef-#3t##H$uM?^f#hbSA;A<~^iDk!0fT`m0D+f(DcSkkq!lg;t;R_|`LS0s*Y zn0DA4{>Cu~D9 z!z-53(5EY$C80ac&Gb;*I*%nx~?+JZLs;~HMMYCQQ(Kynjn-Gv4suK5IkaWf+qA_B>T6#_s8P!NX z3Wq1D9Di$IM(oe18iQ^VzP-+-f3TRx0ACs8+{%AKxS1c9D^~MCy(+5sfiI+4QKlJBK`OCTisbt*^1b&Sw*zyp7L=GqAEFZXCC~( z{h@!qsH_}#>W`x$CLHbS72tZS8S*hxV;3VYyJ#)CVqEch=MdY#|wXPsC6!b zSS>`MMqa3bCIR`=s9d1^78^jAE&HIUkE*DR4Cf^1E2_rAAR(&H@_U z@0ca?$x{h*JBS-oXe3NOi2~G(ePu#5wq+f=UlR0CkF$#~1cfkhq(-?PxduXjsyr3K4hGEnoOZ*(-?HHj6yjK({hZ0?uNU~|A_y!8&E4JlOJx<&pihfPY87Zp_dTOSj@goz>Bk%gb1N~W`&`uAviE25-r$w~UoSQ!5PnemptgP(mR$FK-j3Qd=v2F;G zq3eTWzEq9RfjJG@%Ec0l!CLML`@n{KGqJ_InfgVlP--La`gOL;fKB+kTOXUr}Ua#sZVe=1% z`C${am4FroUv!2i17ntwk%t}C3%d}l&w13~bK=fgSBg7S+%!W|WgLAUC4Gbv&(-GU z9|=6XCZAP8wXE-9)FWN!y-crEFN}u2-e+>%X3%0&YFga5^} z&WPp8PuQ5>j*t-Z#f`{M&TKb$n-mwHJdZ-M5m;#krcatD&W8?bkiGX2Gw$^`LDRv& z7aRCIX@fSWr4$6S-DDayOdpvn0(7_IHv#{6odO()wsxC<)$@k2Kg=m1aLcYmJRh31 z>k^{l_1vr#nuyG9n{SBewcwdze6@fPz)e%=4GCyR8lv!CH&5JVWuYWI&b+_R27eDt zhphf}g2_xjvk#?Ckh)3`cb=pKg}8xGElMFVpg++y`X)&dYA|P??@yxF5WGT_Q}yRlv+hUc<1qB4(4!{($Z7i|BI-$g5E|< z2u+GvQlOC9lJ%#KKu*PCDk}VGyfaX%j-m9_50<#EeeDoV4&wQA6L#stB{7eZaiQoD zjU%~bhgyG*$tWVi?J!yHpqL4PZPL}0WHg%P`tZ31<|ZcT>tGd=D}vF}>d$L#Eowo} z7UotZHqm5~8}Ee&*gl^tsR^bTx&n5!RP65AQd=X0l-kIE;SQ;J zmRnhHoE{g7`hj#jhr&y~NUk;u{t~+FNLi(?I(E^xX@Br3)J7`-%=_lgUd6q3UXo)x z>xw1aCRz1)DBC0x4f?`8u^RcS<8rri?MY!MPxnLs*cRtS3N0Q&G;yfTQ6qPj^ z=}~o>@zznFo?#HdDF5IUiYwtR|EXK={4(^v63*?I>oo!bMdv`8A8>P{lcSRqN)d&v zC1Bl2`n6*jD3ER{SiM1S_=2!~^tE62UXjmw8RU3X1bN%5byr{isj@_(mZ4BOVakF^ zMhkgs6ur2ve!XCGSb!%j96bn{%a9ZNhm)4F!VyL&Yyc(?^Opo8LU6WYGe=6=<8wcB t61V=J107PJ|L+fU{NJ8E8TgBbH}K&}J@vDv*uytCnyOkVl}eUj{{zHfUQ+-7 literal 0 HcmV?d00001 diff --git a/MAUI/Rotator/Events.md b/MAUI/Rotator/Events.md index ebe10f7a23..946cf66c92 100644 --- a/MAUI/Rotator/Events.md +++ b/MAUI/Rotator/Events.md @@ -108,9 +108,7 @@ The `SelectedIndexChanged` event can be handled in C# as follows: private void Rotator_SelectedIndexChanged(object sender, SelectedIndexChangedEventArgs e) { // e.Index is the new index; e.OldIndex is the previous index. - DisplayAlert("Notification", - $"Selected index changed from {e.OldIndex} to {e.Index}", - "OK"); + DisplayAlertAsync("Notification", $"Selected index changed from {e.OldIndex} to {e.Index}", "OK"); } {% endhighlight %} @@ -204,7 +202,7 @@ The `ItemTapped` event can be handled in C# as follows: private void Rotator_ItemTapped(object sender, EventArgs e) { - DisplayAlert("Notification", "Rotator Item is Tapped", "Ok"); + DisplayAlertAsync("Notification", "Rotator Item is Tapped", "Ok"); } {% endhighlight %} diff --git a/MAUI/Switch/Events.md b/MAUI/Switch/Events.md index 4d97b20cf8..f610798b07 100644 --- a/MAUI/Switch/Events.md +++ b/MAUI/Switch/Events.md @@ -57,7 +57,7 @@ private async void SfSwitch_StateChanged(object sender, SwitchStateChangedEventA bool? newValue = e.NewValue; bool? oldValue = e.OldValue; - await DisplayAlert("Alert", "Switch State Changed", "Close"); + await DisplayAlertAsync("Alert", "Switch State Changed", "Close"); } {% endhighlight %} diff --git a/MAUI/Switch/Getting-Started.md b/MAUI/Switch/Getting-Started.md index dc3b75a3ca..7fd33d87a9 100644 --- a/MAUI/Switch/Getting-Started.md +++ b/MAUI/Switch/Getting-Started.md @@ -153,7 +153,7 @@ this.Content = sfSwitch; private void OnSwitchStateChanged(object sender, SwitchStateChangedEventArgs e) { - DisplayAlert("Message", "SUCCESS", "OK"); + DisplayAlertAsync("Message", "SUCCESS", "OK"); } {% endhighlight %} From 46ba4738bb705db0508fb3aa1b1c93affa699fc5 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Thu, 10 Sep 2026 15:01:09 +0530 Subject: [PATCH 05/12] Added in maui-toc.html --- maui-toc.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/maui-toc.html b/maui-toc.html index f5245044f4..1a58c8c326 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1242,6 +1242,7 @@
  • Validation
  • Events
  • Show Password Character
    • +
  • Visual States
  • Liquid Glass Support
    • @@ -1276,6 +1277,7 @@
  • Formatting
  • Restriction
  • UpDown Button
    • +
  • Visual States
  • Liquid Glass Supoort
    • @@ -1506,6 +1508,7 @@
  • Appearance and Styling
  • Restrict User Selection
  • Appearance Customization
    • +
  • Visual States
  • From 2d68f951a43619f0ede3c35c6a14c0343f771336 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Thu, 10 Sep 2026 16:52:45 +0530 Subject: [PATCH 06/12] Updated for button and resolved CI error --- MAUI/Autocomplete/Events.md | 4 +-- MAUI/Button/Customization.md | 49 +++++++++++++++++----------------- MAUI/Button/Getting-Started.md | 2 +- MAUI/Button/Right-To-Left.md | 8 +++--- MAUI/ComboBox/Events.md | 2 +- MAUI/Rating/VisualStates.md | 2 +- 6 files changed, 33 insertions(+), 34 deletions(-) diff --git a/MAUI/Autocomplete/Events.md b/MAUI/Autocomplete/Events.md index e724e778a7..15578d3a44 100644 --- a/MAUI/Autocomplete/Events.md +++ b/MAUI/Autocomplete/Events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in .NET MAUI Autocomplete | Syncfusion® -description: Learn all about Events support in Syncfusion® .NET MAUI Autocomplete control into .NET MAUI application and its features here. +description: Learn about all events in the Syncfusion® .NET MAUI Autocomplete control and how to handle user interactions and state changes. platform: maui control: SfAutocomplete documentation: ug @@ -24,8 +24,6 @@ To get started quickly on customizing the appearance of the .NET MAUI Autocomple {% youtube "https://www.youtube.com/watch?v=Hh5pfXvax9o" %} -# Events - ## Completed Event The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) by pressing the return key on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`: diff --git a/MAUI/Button/Customization.md b/MAUI/Button/Customization.md index 5d718bbdc1..eafbe33968 100644 --- a/MAUI/Button/Customization.md +++ b/MAUI/Button/Customization.md @@ -49,7 +49,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with text color](images/customization-images/Button_textcolor.png) +![SfButton with text color](Images/customization-images/Button_textcolor.png) ### Font Size @@ -77,7 +77,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with font size](images/customization-images/Button_fontsize.png) +![SfButton with font size](Images/customization-images/Button_fontsize.png) ### Font Attributes @@ -105,7 +105,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with fontattributes](images/customization-images/Button_fontattributes.png) +![SfButton with fontattributes](Images/customization-images/Button_fontattributes.png) ### Font Family @@ -133,7 +133,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with fontfamily](images/customization-images/Button_fontfamily.jpg) +![SfButton with fontfamily](Images/customization-images/Button_fontfamily.jpg) ### Text Alignment @@ -191,10 +191,10 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![.NET MAUI Button Text Transform](images/customization-images/Button_texttransform.png) +![.NET MAUI Button Text Transform](Images/customization-images/Button_texttransform.png) ## LineBreakMode -The [LineBreakMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is `NoWrap`. The following options are available in `LineBreakMode`: +The [LineBreakMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is `WordWrap`. The following options are available in `LineBreakMode`: * `NoWrap` - Avoids the text wrap. * `WordWrap` - Wraps the text by words. @@ -230,7 +230,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with LineBreakMode](images/customization-images/Button_linebreakmode.png) +![SfButton with LineBreakMode](Images/customization-images/Button_linebreakmode.png) ## Background Customization @@ -262,7 +262,7 @@ this.Content = button; N> When defining the background colors of the SfButton control, always use the `Background` property instead of the `BackgroundColor` property. -![SfButton with background color](images/customization-images/Button_backgroundcolor.png) +![SfButton with background color](Images/customization-images/Button_backgroundcolor.png) ### Background Image @@ -294,7 +294,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![.NET MAUI Button with background image](images/customization-images/Button_backgroundimage.png) +![.NET MAUI Button with background image](Images/customization-images/Button_backgroundimage.png) ### Stroke @@ -324,7 +324,7 @@ this.Content = button; N> To display the `Stroke` color, you must also define the `StrokeThickness` property (default value is `0`). -![SfButton with stroke](images/customization-images/Button_border.png) +![SfButton with stroke](Images/customization-images/Button_border.png) ### StrokeThickness @@ -352,7 +352,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with strokethickness](images/customization-images/Button_borderthickness.png) +![SfButton with strokethickness](Images/customization-images/Button_borderthickness.png) ### CornerRadius @@ -378,7 +378,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with cornerradius](images/customization-images/Button_cornerradius.png) +![SfButton with cornerradius](Images/customization-images/Button_cornerradius.png) ## Image Customization @@ -412,7 +412,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image](images/customization-images/Button_icon.png) +![SfButton with image](Images/customization-images/Button_icon.png) ### ShowIcon @@ -524,7 +524,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with end alignment](images/customization-images/Button_imagealignment_end.png) +![SfButton with image with icon image with end alignment](Images/customization-images/Button_imagealignment_end.png) **Start image alignment in `Button`** @@ -567,7 +567,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with start alignment](images/customization-images/Button_imagealignment_start.png) +![SfButton with image with icon image with start alignment](Images/customization-images/Button_imagealignment_start.png) **Top image alignment in `Button`** @@ -610,7 +610,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with top alignment](images/customization-images/Button_imagealignment_top.png) +![SfButton with image with icon image with top alignment](Images/customization-images/Button_imagealignment_top.png) **Bottom image alignment in `Button`** @@ -653,7 +653,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image at the bottom of the text](images/customization-images/Button_imagealignment_bottom.png) +![SfButton with image at the bottom of the text](Images/customization-images/Button_imagealignment_bottom.png) **Default image alignment in `Button`** @@ -696,7 +696,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with default alignment](images/customization-images/Button_imagealignment_default.png) +![SfButton with image with icon image with default alignment](Images/customization-images/Button_imagealignment_default.png) **Left image alignment in `Button`** @@ -741,7 +741,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with left alignment](images/customization-images/Button_imagealignment_left.png) +![SfButton with image with icon image with left alignment](Images/customization-images/Button_imagealignment_left.png) **Right image alignment in `Button`** @@ -785,11 +785,11 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![SfButton with image with icon image with right alignment](images/customization-images/Button_imagealignment_right.png) +![SfButton with image with icon image with right alignment](Images/customization-images/Button_imagealignment_right.png) ## EnableRippleEffect -The [EnableRippleEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_EnableRippleEffect) property is used to control the presence of the ripple effect. The default value is `false`. +The [EnableRippleEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_EnableRippleEffect) property is used to control the presence of the ripple effect. The default value is `true`. {% tabs %} {% highlight xaml %} @@ -811,7 +811,7 @@ this.Content = button; {% endhighlight %} {% endtabs %} -![.NET MAUI RippleEffect support](images/customization-images/Button_EnableRippleEffect.gif) +![.NET MAUI RippleEffect support](Images/customization-images/Button_EnableRippleEffect.gif) ## Gradient Background @@ -896,7 +896,7 @@ this.Content = radialButton; {% endhighlight %} {% endtabs %} -![.NET MAUI gradient support](images/customization-images/Button_gradient.jpg) +![.NET MAUI gradient support](Images/customization-images/Button_gradient.jpg) ## Command @@ -962,4 +962,5 @@ public class CommandDemoViewModel : INotifyPropertyChanged ## See also - [Events](https://help.syncfusion.com/maui/button/events) -- [Visual States](https://help.syncfusion.com/maui/button/visual-states) \ No newline at end of file +- [Visual States](https://help.syncfusion.com/maui/button/visual-states) +- [Command](https://help.syncfusion.com/maui/button/command) \ No newline at end of file diff --git a/MAUI/Button/Getting-Started.md b/MAUI/Button/Getting-Started.md index de98ac777f..73909a191b 100644 --- a/MAUI/Button/Getting-Started.md +++ b/MAUI/Button/Getting-Started.md @@ -143,7 +143,7 @@ button.TextColor = Colors.White; The following screenshot illustrates the result of the above code. -![.NET MAUI Button](images/customization-images/Button_textcolor.png) +![.NET MAUI Button](Images/customization-images/Button_textcolor.png) You can download the Button Getting Started sample from [GitHub](https://github.com/SyncfusionExamples/maui-button-samples) diff --git a/MAUI/Button/Right-To-Left.md b/MAUI/Button/Right-To-Left.md index e919f52b8e..d785156160 100644 --- a/MAUI/Button/Right-To-Left.md +++ b/MAUI/Button/Right-To-Left.md @@ -9,7 +9,7 @@ documentation: ug # Right-to-Left in .NET MAUI Button -The [.NET MAUI Button`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) supports right-to-left (RTL) layout by setting [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.flowdirection?view=net-maui-11.0) to `RightToLeft`, or by changing the device language to an RTL language such as Arabic or Hebrew. +The [`.NET MAUI Button`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) supports right-to-left (RTL) layout by setting [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.flowdirection?view=net-maui-11.0) to `RightToLeft`, or by changing the device language to an RTL language such as Arabic or Hebrew. ## Prerequisites @@ -51,10 +51,10 @@ this.Content = button; The following image shows the result of the code above: -![.NET MAUI Button with right-to-left layout](images/right-to-left/RTL.png) +![.NET MAUI Button with right-to-left layout](Images/right-to-left/RTL.png) ## See Also - [Customization](https://help.syncfusion.com/maui/button/customization) -- [Right-to-Left](https://help.syncfusion.com/maui/button/right-to-left) -- [Visual States](https://help.syncfusion.com/maui/button/visual-states) \ No newline at end of file +- [Visual States](https://help.syncfusion.com/maui/button/visual-states) +- [Liquid Glass Effect](https://help.syncfusion.com/maui/button/liquidglasssupport) \ No newline at end of file diff --git a/MAUI/ComboBox/Events.md b/MAUI/ComboBox/Events.md index 9ff0ce5767..935e4d9073 100644 --- a/MAUI/ComboBox/Events.md +++ b/MAUI/ComboBox/Events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in .NET MAUI ComboBox | Syncfusion® -description: Learn about Events in Syncfusion® .NET MAUI ComboBox control. +description: Learn about all events in the Syncfusion® .NET MAUI ComboBox control and how to handle user interactions and state changes. platform: maui control: SfComboBox documentation: ug diff --git a/MAUI/Rating/VisualStates.md b/MAUI/Rating/VisualStates.md index 7f141b86de..98730905db 100644 --- a/MAUI/Rating/VisualStates.md +++ b/MAUI/Rating/VisualStates.md @@ -2,7 +2,7 @@ layout: post title: Visual States in .NET MAUI Rating | Syncfusion® -description: Learn here about visual states support in Syncfusion® .NET MAUI Rating control. +description: Learn about visual state support in the Syncfusion® .NET MAUI Rating control and customize its appearance. platform: maui control: Rating documentation: ug From 107f9da8a472d308b803b8020ac4fca1038c6b4e Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Fri, 11 Sep 2026 12:39:24 +0530 Subject: [PATCH 07/12] Fixed CI errors --- MAUI/Button/Customization.md | 1 - MAUI/Effects-View/Methods.md | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/MAUI/Button/Customization.md b/MAUI/Button/Customization.md index eafbe33968..1c5256d003 100644 --- a/MAUI/Button/Customization.md +++ b/MAUI/Button/Customization.md @@ -963,4 +963,3 @@ public class CommandDemoViewModel : INotifyPropertyChanged - [Events](https://help.syncfusion.com/maui/button/events) - [Visual States](https://help.syncfusion.com/maui/button/visual-states) -- [Command](https://help.syncfusion.com/maui/button/command) \ No newline at end of file diff --git a/MAUI/Effects-View/Methods.md b/MAUI/Effects-View/Methods.md index 1f9a4592d3..8dfedfd140 100644 --- a/MAUI/Effects-View/Methods.md +++ b/MAUI/Effects-View/Methods.md @@ -159,7 +159,7 @@ The [Reset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsVi {% highlight xaml %} + Spacing="10"> + Offset="0.0"/> + Offset="1.0"/> From 6b39ccfc55c8d9bfb984cc0cc07db9fb664756f3 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 23 Sep 2026 12:03:32 +0530 Subject: [PATCH 08/12] Reverted editors controls changes --- MAUI/Autocomplete/Basic-Features.md | 73 + MAUI/Autocomplete/DropDown-Customization.md | 1445 ------------- MAUI/Autocomplete/Events.md | 476 ---- MAUI/Autocomplete/Overview.md | 4 +- MAUI/Autocomplete/Selection.md | 4 +- MAUI/Autocomplete/UI-Customization.md | 1906 +++++++++++++++- MAUI/Autocomplete/properties.md | 90 +- MAUI/ComboBox/DropDown-Customization.md | 1487 ------------- MAUI/ComboBox/Editing.md | 74 + MAUI/ComboBox/Events.md | 487 ----- MAUI/ComboBox/Getting-Started.md | 2 +- MAUI/ComboBox/Selection.md | 4 +- MAUI/ComboBox/Smart-Filtering.md | 2 +- MAUI/ComboBox/UI-Customization.md | 1920 ++++++++++++++++- MAUI/ComboBox/properties.md | 24 +- MAUI/Masked-Entry/Basic-Features.md | 2 +- MAUI/Masked-Entry/Culture.md | 2 - MAUI/Masked-Entry/Events.md | 4 +- .../maui_masked_entry_disable_state.png | Bin 2076 -> 0 bytes .../maui_masked_entry_focused_state.png | Bin 2700 -> 0 bytes .../maui_masked_entry_hover_state.png | Bin 2054 -> 0 bytes .../maui_masked_entry_normal_state.png | Bin 2058 -> 0 bytes MAUI/Masked-Entry/Overview.md | 2 +- MAUI/Masked-Entry/Validation.md | 2 +- MAUI/Masked-Entry/VisualStates.md | 144 -- MAUI/Masked-Entry/properties.md | 74 +- MAUI/NumericEntry/Basic-Features.md | 6 +- MAUI/NumericEntry/VisualStates.md | 152 -- .../disabled-visual-state-numericentry.png | Bin 1759 -> 0 bytes .../focused-visual-state-numericentry.png | Bin 1936 -> 0 bytes .../hovered-visual-state-numericentry.png | Bin 1806 -> 0 bytes .../normal-visual-state-numericentry.png | Bin 1772 -> 0 bytes MAUI/NumericEntry/properties.md | 86 +- 33 files changed, 4065 insertions(+), 4407 deletions(-) delete mode 100644 MAUI/Autocomplete/DropDown-Customization.md delete mode 100644 MAUI/Autocomplete/Events.md delete mode 100644 MAUI/ComboBox/DropDown-Customization.md delete mode 100644 MAUI/ComboBox/Events.md delete mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png delete mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_focused_state.png delete mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_hover_state.png delete mode 100644 MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png delete mode 100644 MAUI/Masked-Entry/VisualStates.md delete mode 100644 MAUI/NumericEntry/VisualStates.md delete mode 100644 MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png delete mode 100644 MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png delete mode 100644 MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png delete mode 100644 MAUI/NumericEntry/VisualStates_images/normal-visual-state-numericentry.png diff --git a/MAUI/Autocomplete/Basic-Features.md b/MAUI/Autocomplete/Basic-Features.md index d88c456d14..ef6ddf9df8 100644 --- a/MAUI/Autocomplete/Basic-Features.md +++ b/MAUI/Autocomplete/Basic-Features.md @@ -124,6 +124,79 @@ The following screenshot illustrates the AutomationIds of the inner elements: ![AutomationIds of inner elements in .NET MAUI Autocomplete](Images/GettingStarted/AutoComplete_AutomationID.png) +## Keyboard + +The [Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) +control provides support for changing the keyboard type through the `Keyboard` property. By default, the `Keyboard` property is set to `Keyboard.Default`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +var viewModel = new EmployeeViewModel(); + +SfAutocomplete autocomplete = new SfAutocomplete +{ + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter an employee name", + Keyboard = Keyboard.Text, + ItemsSource = viewModel.Employees +}; + +Content = autocomplete; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +using System.Collections.ObjectModel; + +public class Employee +{ + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } +} + +public class EmployeeViewModel +{ + public ObservableCollection Employees { get; set; } + + public EmployeeViewModel() + { + Employees = new ObservableCollection + { + new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001" + }, + new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002" + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + ## See also - [Selection](https://help.syncfusion.com/maui/autocomplete/selection) diff --git a/MAUI/Autocomplete/DropDown-Customization.md b/MAUI/Autocomplete/DropDown-Customization.md deleted file mode 100644 index 04705ae520..0000000000 --- a/MAUI/Autocomplete/DropDown-Customization.md +++ /dev/null @@ -1,1445 +0,0 @@ ---- -layout: post -title: DropDown Customization in .NET MAUI Autocomplete | Syncfusion® -description: Learn all about DropDown customization support in Syncfusion® .NET MAUI Autocomplete control into .NET MAUI application and its features here. -platform: maui -control: SfAutocomplete -documentation: ug ---- - -# DropDown Customization in .NET MAUI Autocomplete - -This section explains different DropDown customizations available in the [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) control. - -## Prerequisites - -Before using the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html), ensure the following NuGet package is installed in your .NET MAUI project: - -- `Syncfusion.Maui.Inputs` - -For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) documentation. - -To get started quickly on customizing the appearance of the .NET MAUI Autocomplete, you can check out this video: - -{% youtube "https://www.youtube.com/watch?v=Hh5pfXvax9o" %} - -## Customize the DropDown (suggestion) item - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using the custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - ... - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - SfAutocomplete autoComplete = new() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - }; - - DataTemplate itemTemplate = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - autoComplete.ItemTemplate = itemTemplate; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - ... - } - } - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete ItemTemplate](Images/UICustomization/ItemTemplate.png) - -### Maximum DropDown Height - -The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the `Autocomplete` control. The default value of the MaxDropDownHeight property is `400d`. - -N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - MaxDropDownHeight = 100, - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following gif image illustrates the result of the above code: - -![.NET MAUI Autocomplete maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) - -### Customize the DropDown item text - -DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownItemFontAttributes = FontAttributes.Italic, - DropDownItemFontFamily = "OpenSansSemibold", - DropDownItemFontSize = 16, - DropDownItemTextColor = Colors.DarkViolet -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Item Text](Images/UICustomization/DropDownItemText.png) - -### Customize the DropDown background color - -The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownBackground = Colors.YellowGreen -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Background](Images/UICustomization/DropDownBackground.png) - -### Customize the DropDown Selected Item Background Color - -The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of the selected item in the dropdown. The default value is `new SolidColorBrush(Color.FromArgb("#1C1B1F14"))`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - SelectedDropDownItemBackground = Colors.LightSeaGreen -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) - -### Customize the Selected DropDown Item Text Style - -The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the `SfAutocomplete` control is used to customize the appearance of the selected item in the dropdown list. - -{% tabs %} -{% highlight xaml %} - - - - - - - -{% endhighlight %} -{% highlight C# %} - -SfAutocomplete autoComplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - SelectedDropDownItemTextStyle = new DropDownTextStyle - { - TextColor = Colors.Orange, - FontSize = 16, - FontAttributes = FontAttributes.Bold - } -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -### Customize the DropDown Border Color - -The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownStroke = Colors.DarkOrange -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Stroke](Images/UICustomization/DropDownStroke.png) - -### Customize the DropDown Border Thickness - -The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownStroke = Colors.DarkOrange, - DropDownStrokeThickness = 5 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Stroke Thickness](Images/UICustomization/DropDownStrokeThickness.png) - -### Customize the Dropdown Shadow Visibility - -The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. The default value of the `IsDropDownShadowVisible` property is `true`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - IsDropDownShadowVisible = False -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) - -### Customize the DropDown Item Height - -The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - DropDownItemHeight = 80 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) - -### Customize the DropDown Placement - -The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. The default value of the `DropDownPlacement` property is `Auto`. - -* `Top` - Drop-down will be placed above the text box. - -* `Bottom` - Drop-down will be placed below the text box. - -* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. - -* `None` - Drop-down will not be shown with the filtered items. - - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownPlacement = DropDownPlacement.Top -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Dropdownplacement.](Images/UICustomization/placementauto.png) - -### Customize the DropDown Item Padding - -The autocomplete enables the user to provide padding for the items inside dropdown using the [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. The default value of the `ItemPadding` property is `new Thickness(10, 0, 10, 0)`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemPadding = new Thickness(10, 20, 0, 0) -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete Itempadding.](Images/UICustomization/Itempadding.png) - -### Customize the DropDown Width - -The [DropDownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownWidth) property is used to modify the width of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownWidth = 400 -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete DropDownWidth.](Images/UICustomization/DropDownWidth.png) - - -### Show Suggestion Box on Focus - -Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. The default value of the `ShowSuggestionsOnFocus` property is `false`. - -{% tabs %} - -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ShowSuggestionsOnFocus = true -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI Autocomplete OnFocus.](Images/UICustomization/OnFocus.png) - -## Customize DropDown (suggestion) items based on condition - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Emilio Alvaro", - ProfilePicture = "people_circle7.png", - Designation = "Product Manager", - ID = "E003" - }); - Employees.Add(new Employee - { - Name = "Janet Leverling", - ProfilePicture = "people_circle2.png", - Designation = "HR", - ID = "E004", - }); - Employees.Add(new Employee - { - Name = "Laura Callahan", - ProfilePicture = "people_circle10.png", - Designation = "Product Manager", - ID = "E005", - }); - } - } - - //Template selector - public class EmployeeTemplateSelector : DataTemplateSelector - { - public DataTemplate EmployeeTemplate1 { get; set; } - public DataTemplate EmployeeTemplate2 { get; set; } - - protected override DataTemplate OnSelectTemplate(object item, BindableObject container) - { - var employeeName = ((Employee)item).Name; - { - if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || - employeeName.ToString() == "Laura Callahan") - { - return EmployeeTemplate1; - } - else - { - return EmployeeTemplate2; - } - } - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - DataTemplate employeeTemplate1 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Blue; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Coral; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - DataTemplate employeeTemplate2 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, "ProfilePicture"); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0, 0, 0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Red; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Green; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); - employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; - employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; - - SfAutocomplete autocomplete = new() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - ItemTemplate = employeeTemplateSelector, - }; - - this.Content = autocomplete; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) - -## Customize Dropdown corner radius - -The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the `SfAutocomplete` control. The default value of the `DropDownCornerRadius` property is `0`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); -SfAutocomplete autocomplete = new SfAutocomplete() -{ - WidthRequest = 250, - HeightRequest = 50, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemsSource = socialMediaViewModel.SocialMedias, - DropDownCornerRadius = 25 -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius_ac.png) - -## See also - -- [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) -- [Basic Features](https://help.syncfusion.com/maui/autocomplete/basic-features) -- [Searching and Filtering](https://help.syncfusion.com/maui/autocomplete/searching-filtering) \ No newline at end of file diff --git a/MAUI/Autocomplete/Events.md b/MAUI/Autocomplete/Events.md deleted file mode 100644 index 15578d3a44..0000000000 --- a/MAUI/Autocomplete/Events.md +++ /dev/null @@ -1,476 +0,0 @@ ---- -layout: post -title: Events in .NET MAUI Autocomplete | Syncfusion® -description: Learn about all events in the Syncfusion® .NET MAUI Autocomplete control and how to handle user interactions and state changes. -platform: maui -control: SfAutocomplete -documentation: ug ---- - -# Events in .NET MAUI Autocomplete - -This section explains different Events available in the [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) control. - -## Prerequisites - -Before using the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html), ensure the following NuGet package is installed in your .NET MAUI project: - - -- `Syncfusion.Maui.Inputs` - -For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) documentation. - -To get started quickly on customizing the appearance of the .NET MAUI Autocomplete, you can check out this video: - -{% youtube "https://www.youtube.com/watch?v=Hh5pfXvax9o" %} - -## Completed Event - -The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) by pressing the return key on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`: - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -private async void Autocomplete_Completed(object sender, EventArgs e) -{ - await DisplayAlertAsync("Message", "Text entering Completed", "close"); -} - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -Completed event can be subscribed in C# also: - -{% tabs %} -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -autocomplete.Completed+=Autocomplete_Completed; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI Autocomplete completed event](Images/UICustomization/CompletedEvent.png) - -N> The `Completed` event is not supported in the Android platform. - -## DropDownOpening Event - -The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event is raised when the dropdown menu is about to open in the `SfAutocomplete`. The event uses `CancelEventArgs`, which exposes the following property: - - * Cancel: Dropdown opening is based on this value. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropdownOpening += Autocomplete_DropdownOpening; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} - -{% highlight c# %} - - private void Autocomplete_DropdownOpening(object sender, CancelEventArgs e) - { - e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. - } - -{% endhighlight %} - -{% endtabs %} - - -## DropDownOpened Event - -The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the SfAutocomplete drop-down is opened. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropdownOpened += Autocomplete_DropdownOpened; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} - -{% highlight c# %} - - private void Autocomplete_DropdownOpened(object sender, EventArgs e) - { - // Trigger when the dropdown is opened - } - -{% endhighlight %} - -{% endtabs %} - -## DropDownClosed Event - -The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the SfAutocomplete drop-down is closed. - -{% tabs %} -{% highlight xaml %} - - - - -{% endhighlight %} -{% highlight c# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - autocomplete.DropDownClosed += Autocomplete_DropDownClosed; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} - - private void Autocomplete_DropDownClosed(object sender, EventArgs e) - { - await DisplayAlertAsync("Message", "DropDown Closed", "close"); - } - -{% endhighlight %} -{% endtabs %} - -## ValueChanged Event -When the value of Autocomplete changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html#Syncfusion_Maui_Inputs_SfAutocomplete_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: - -* `OldValue` - Contains the previous text value before the change. -* `NewValue` - Contains the new text value after the change. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfAutocomplete autocomplete = new SfAutocomplete -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -autocomplete.ValueChanged += OnValueChanged; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The ValueChanged event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e) -{ - await DisplayAlertAsync("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); -} - -{% endhighlight %} - -{% endtabs %} - -## ClearButtonClicked Event - -The [ClearButtonClicked]() event is raised when the user activates the clear button in the `SfAutocomplete` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - - SfAutocomplete autocomplete = new SfAutocomplete - { - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name" - }; -autocomplete.ClearButtonClicked += Autocomplete_ClearButtonClicked; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `ClearButtonClicked` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void Autocomplete_ClearButtonClicked(object sender, EventArgs e) -{ - await DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); -} - -{% endhighlight %} -{% endtabs %} - -## See also - -- [Getting Started](https://help.syncfusion.com/maui/autocomplete/getting-started) -- [Basic Features](https://help.syncfusion.com/maui/autocomplete/basic-features) -- [Searching and Filtering](https://help.syncfusion.com/maui/autocomplete/searching-filtering) \ No newline at end of file diff --git a/MAUI/Autocomplete/Overview.md b/MAUI/Autocomplete/Overview.md index dc6b68fe72..0cd7bc7fdc 100644 --- a/MAUI/Autocomplete/Overview.md +++ b/MAUI/Autocomplete/Overview.md @@ -67,7 +67,7 @@ The following table summarizes the globalization support available in this contr Keyboard navigation -Autocomplete +Autocomplete not-applicable full-support not-applicable @@ -80,7 +80,7 @@ The following table summarizes the globalization support available in this contr - [ComboBox](https://help.syncfusion.com/maui/combobox/overview) for flexible selection with optional user input. - [ListView](https://help.syncfusion.com/maui/listview/overview) for displaying filtered results in list format. -- [Numeric Entry](https://help.syncfusion.com/maui/numeric-entry/overview) for structured numeric input with validation and formatting. +- [Numeric Entry](https://help.syncfusion.com/maui/numericentry/overview) for structured numeric input with validation and formatting. ## See Also diff --git a/MAUI/Autocomplete/Selection.md b/MAUI/Autocomplete/Selection.md index 72ebf3ea02..213036c0d8 100644 --- a/MAUI/Autocomplete/Selection.md +++ b/MAUI/Autocomplete/Selection.md @@ -456,7 +456,7 @@ The event handler is implemented in the page's code-behind: private async void OnSelectionChanging(object sender, SelectionChangingEventArgs e) { - await DisplayAlertAsync("Alert", "Selecting item is changing", "Ok"); + await DisplayAlert("Alert", "Selecting item is changing", "Ok"); } {% endhighlight %} @@ -534,7 +534,7 @@ The event handler is implemented in the page's code-behind: private async void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { - await DisplayAlertAsync("Alert", "Selected item has changed", "Ok"); + await DisplayAlert("Alert", "Selected item has changed", "Ok"); } {% endhighlight %} diff --git a/MAUI/Autocomplete/UI-Customization.md b/MAUI/Autocomplete/UI-Customization.md index 3ccb5d6f01..c11ac52d4b 100644 --- a/MAUI/Autocomplete/UI-Customization.md +++ b/MAUI/Autocomplete/UI-Customization.md @@ -344,42 +344,1904 @@ public class SocialMedia ![.NET MAUI Autocomplete Selection Text Highlight Color](Images/UICustomization/SelectionTextHighlightColor.png) +## Maximum DropDown Height + +The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the `Autocomplete` control. The default value of the MaxDropDownHeight property is `400d`. + +N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + MaxDropDownHeight = 100, + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following gif image illustrates the result of the above code: + +![.NET MAUI Autocomplete maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) + +## Customize the DropDown (suggestion) item + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using the custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + ... + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + SfAutocomplete autoComplete = new() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + }; + + DataTemplate itemTemplate = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + autoComplete.ItemTemplate = itemTemplate; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + ... + } + } + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete ItemTemplate](Images/UICustomization/ItemTemplate.png) + +### Customize the DropDown item text + +DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownItemFontAttributes = FontAttributes.Italic, + DropDownItemFontFamily = "OpenSansSemibold", + DropDownItemFontSize = 16, + DropDownItemTextColor = Colors.DarkViolet +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Item Text](Images/UICustomization/DropDownItemText.png) + +### Customize the DropDown background color + +The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownBackground = Colors.YellowGreen +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Background](Images/UICustomization/DropDownBackground.png) + +### Customize the DropDown Selected Item Background Color + +The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of the selected item in the dropdown. The default value is `new SolidColorBrush(Color.FromArgb("#1C1B1F14"))`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + SelectedDropDownItemBackground = Colors.LightSeaGreen +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) + +### Customize the Selected DropDown Item Text Style + +The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the `SfAutocomplete` control is used to customize the appearance of the selected item in the dropdown list. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight C# %} + +SfAutocomplete autoComplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + SelectedDropDownItemTextStyle = new DropDownTextStyle + { + TextColor = Colors.Orange, + FontSize = 16, + FontAttributes = FontAttributes.Bold + } +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Customize the DropDown Border Color + +The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownStroke = Colors.DarkOrange +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Stroke](Images/UICustomization/DropDownStroke.png) + +### Customize the DropDown Border Thickness + +The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownStroke = Colors.DarkOrange, + DropDownStrokeThickness = 5 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Stroke Thickness](Images/UICustomization/DropDownStrokeThickness.png) + +### Customize the Dropdown Shadow Visibility + +The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. The default value of the `IsDropDownShadowVisible` property is `true`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + IsDropDownShadowVisible = False +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) + +### Customize the DropDown Item Height + +The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + DropDownItemHeight = 80 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) + +### Customize the DropDown Placement + +The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. The default value of the `DropDownPlacement` property is `Auto`. + +* `Top` - Drop-down will be placed above the text box. + +* `Bottom` - Drop-down will be placed below the text box. + +* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. + +* `None` - Drop-down will not be shown with the filtered items. + + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownPlacement = AutocompleteDropDownPlacement.Top +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Dropdownplacement.](Images/UICustomization/placementauto.png) + +### Customize the DropDown Item Padding + +The autocomplete enables the user to provide padding for the items inside dropdown using the [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. The default value of the `ItemPadding` property is `new Thickness(10, 0, 10, 0)`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemPadding = new Thickness(10, 20, 0, 0) +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete Itempadding.](Images/UICustomization/Itempadding.png) + +### Customize the DropDown Width + +The [DropDownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the width of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownWidth = 400 +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete DropDownWidth.](Images/UICustomization/DropDownWidth.png) + + +### Show Suggestion Box on Focus + +Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. The default value of the `ShowSuggestionsOnFocus` property is `false`. + +{% tabs %} + +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ShowSuggestionsOnFocus = true +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI Autocomplete OnFocus.](Images/UICustomization/OnFocus.png) + +## Customize DropDown (suggestion) items based on condition + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Emilio Alvaro", + ProfilePicture = "people_circle7.png", + Designation = "Product Manager", + ID = "E003" + }); + Employees.Add(new Employee + { + Name = "Janet Leverling", + ProfilePicture = "people_circle2.png", + Designation = "HR", + ID = "E004", + }); + Employees.Add(new Employee + { + Name = "Laura Callahan", + ProfilePicture = "people_circle10.png", + Designation = "Product Manager", + ID = "E005", + }); + } + } + + //Template selector + public class EmployeeTemplateSelector : DataTemplateSelector + { + public DataTemplate EmployeeTemplate1 { get; set; } + public DataTemplate EmployeeTemplate2 { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var employeeName = ((Employee)item).Name; + { + if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || + employeeName.ToString() == "Laura Callahan") + { + return EmployeeTemplate1; + } + else + { + return EmployeeTemplate2; + } + } + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + DataTemplate employeeTemplate1 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Blue; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Coral; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + DataTemplate employeeTemplate2 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, "ProfilePicture"); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0, 0, 0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Red; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Green; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); + employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; + employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; + + SfAutocomplete autocomplete = new() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + ItemTemplate = employeeTemplateSelector, + }; + + this.Content = autocomplete; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) + +## Customize Dropdown corner radius + +The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the `SfAutocomplete` control. The default value of the `DropDownCornerRadius` property is `0`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfAutocomplete autocomplete = new SfAutocomplete() +{ + WidthRequest = 250, + HeightRequest = 50, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias, + DropDownCornerRadius = 25 +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius_ac.png) + ## Styling token items -The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property. +The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property. + +{% tabs %} + +{% highlight xaml %} + + ... + xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" + xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs" + ... + + + + + + + +{% endhighlight %} + +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete with tokenitemstyle](Images/UICustomization/TokenItemStyle.png) + +## Completed Event + +The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) by pressing the return key on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`: + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +private async void Autocomplete_Completed(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Text entering Completed", "close"); +} + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +Completed event can be subscribed in C# also: + +{% tabs %} +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +autocomplete.Completed+=Autocomplete_Completed; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI Autocomplete completed event](Images/UICustomization/CompletedEvent.png) + +N> The `Completed` event is not supported in the Android platform. + +## DropDownOpening Event + +The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event is raised when the dropdown menu is about to open in the `SfAutocomplete`. The event uses `CancelEventArgs`, which exposes the following property: + + * Cancel: Dropdown opening is based on this value. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + autocomplete.DropdownOpening += Autocomplete_DropdownOpening; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% tabs %} + +{% highlight c# %} + + private void Autocomplete_DropdownOpening(object sender, CancelEventArgs e) + { + e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. + } + +{% endhighlight %} + +{% endtabs %} + + +## DropDownOpened Event + +The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the SfAutocomplete drop-down is opened. {% tabs %} + {% highlight xaml %} - ... - xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" - xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs" - ... + + + +{% endhighlight %} - SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% tabs %} + +{% highlight c# %} + + private void Autocomplete_DropdownOpened(object sender, EventArgs e) + { + // Trigger when the dropdown is opened + } + +{% endhighlight %} + +{% endtabs %} + +## DropDownClosed Event + +The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the SfAutocomplete drop-down is closed. + +{% tabs %} +{% highlight xaml %} + + + - - - + TextMemberPath="Name" + DropDownClosed="Autocomplete_DropDownClosed"> +{% endhighlight %} +{% highlight c# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + autocomplete.DropDownClosed += Autocomplete_DropDownClosed; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} {% endhighlight %} {% endtabs %} -The following image illustrates the result of the above code: +{% tabs %} +{% highlight c# %} + + private void Autocomplete_DropDownClosed(object sender, EventArgs e) + { + await DisplayAlert("Message", "DropDown Closed", "close"); + } -![.NET MAUI Autocomplete with tokenitemstyle](Images/UICustomization/TokenItemStyle.png) +{% endhighlight %} +{% endtabs %} + +## ValueChanged Event +When the value of Autocomplete changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html#Syncfusion_Maui_Inputs_SfAutocomplete_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: + +* `OldValue` - Contains the previous text value before the change. +* `NewValue` - Contains the new text value after the change. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfAutocomplete autocomplete = new SfAutocomplete +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +autocomplete.ValueChanged += OnValueChanged; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The ValueChanged event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e) +{ + await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); +} + +{% endhighlight %} + +{% endtabs %} + +## ClearButtonClicked Event + +The [ClearButtonClicked]() event is raised when the user activates the clear button in the `SfAutocomplete` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + + SfAutocomplete autocomplete = new SfAutocomplete + { + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name" + }; +autocomplete.ClearButtonClicked += Autocomplete_ClearButtonClicked; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `ClearButtonClicked` event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void Autocomplete_ClearButtonClicked(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Clear Button Clicked", "ok"); +} + +{% endhighlight %} +{% endtabs %} ## CursorPosition @@ -667,7 +2529,7 @@ public SocialMediaViewModel private async void OnAlertCommandExecuted(string parameter) { - await DisplayAlertAsync("Alert", parameter, "OK"); + await Application.Current.MainPage.DisplayAlert("Alert", parameter, "OK"); } } diff --git a/MAUI/Autocomplete/properties.md b/MAUI/Autocomplete/properties.md index 1c1f90fbc5..ed0eba5544 100644 --- a/MAUI/Autocomplete/properties.md +++ b/MAUI/Autocomplete/properties.md @@ -20,37 +20,37 @@ documentation: ug DelimiterText -string +string Specifies the text placed between selected values when SelectionMode is Multiple and MultiSelectionDisplayMode is Delimiter. DisplayMemberPath -string +string Identifies the item property displayed in the suggestion list. It also supplies the search and selected-item text when TextMemberPath is empty. DropDownCornerRadius -CornerRadius +CornerRadius Controls the corner radius of the suggestion dropdown. DropdownFooterView -View +View Provides custom content for the bottom of the suggestion dropdown. Set ShowDropdownFooterView to true to display it. DropdownHeaderView -View +View Provides custom content for the top of the suggestion dropdown. Set ShowDropdownHeaderView to true to display it. DropDownItemFontSize -double +double Controls the font size of suggestion text in the dropdown. @@ -62,13 +62,13 @@ documentation: ug EnableAutoSize -bool +bool Allows the Autocomplete input area to expand as its content requires more space, such as when selected tokens wrap onto additional lines. EnableLiquidGlassEffect -bool +bool Applies the Liquid Glass effect to the suggestion dropdown when the Autocomplete is hosted inside an SfGlassEffectView. Supported on iOS 26 or later and macOS 26 or later with .NET 10 or later; unsupported configurations use the standard background. @@ -80,43 +80,43 @@ documentation: ug IsDropDownShadowVisible -bool +bool Shows or hides the shadow around the suggestion dropdown. ItemsSource -IEnumerable +IEnumerable Supplies the items that can be searched and displayed as Autocomplete suggestions. ItemTemplate -DataTemplate +DataTemplate Defines the content and layout of each suggestion in the dropdown. LoadMoreTemplate -DataTemplate +DataTemplate Defines the content and layout of the load-more button shown at the bottom of the suggestion list. LoadMoreText -string +string Specifies the label displayed by the load-more button; it is not a loading-status message. MaximumSuggestion -int +int Controls how many suggestions are loaded initially and added each time the load-more button is used. MinimumPrefixCharacters -int +int Controls how many characters the user must enter before the suggestion dropdown opens and filtering begins. @@ -128,31 +128,31 @@ documentation: ug NoResultsFoundTemplate -DataTemplate +DataTemplate Defines the content shown in the suggestion dropdown when filtering produces no matches. NoResultsFoundText -string +string Specifies the message shown in the suggestion dropdown when filtering produces no matches. ReturnCommand -ICommand +ICommand Runs when the user presses the keyboard's Return or Enter key in the editable input field. ReturnCommandParameter -object +object Supplies the value passed to ReturnCommand when the user presses Return or Enter. ReturnType -ReturnType +ReturnType Changes the action label or icon shown on the software keyboard's Return key. Supported values are Default, Done, Go, Next, Search, and Send. @@ -164,37 +164,37 @@ documentation: ug SelectedDropDownItem -object +object Verification required: this API is not present in the current DropDownListBase or SfAutocomplete API reference; use SelectedItem for the selected data item. SelectedDropDownItems -IList +IList Verification required: this API is not present in the current DropDownListBase or SfAutocomplete API reference; use SelectedItems for multiple selected data items. SelectedItem -object +object Represents the item selected from the suggestion list in Single selection mode and can also be assigned to select an item programmatically. SelectedItems -IList +IList Contains the items selected from the suggestion list when SelectionMode is Multiple and can be updated to change the selection programmatically. SelectedValue -object +object Exposes the value read from the selected item through SelectedValuePath; when that path is empty, the control uses the item's text representation. SelectedValuePath -string +string Identifies the selected item property exposed through SelectedValue. @@ -206,49 +206,49 @@ documentation: ug SelectionTextHighlightColor -Color +Color Controls the background color applied by the platform when text is selected in the Autocomplete input field; it does not style matching text in suggestions. ShowBorder -bool +bool Shows or hides the border around the Autocomplete input field. ShowDropdownFooterView -bool +bool Shows or hides the custom footer supplied through DropdownFooterView. ShowDropdownHeaderView -bool +bool Shows or hides the custom header supplied through DropdownHeaderView. ShowSuggestionsOnFocus -bool +bool Opens the complete suggestion list when the empty Autocomplete input receives focus, without waiting for typed characters. Text -string +string Contains the text entered or displayed in the editable Autocomplete input. Changes to this property have no effect in a non-editable dropdown control derived from the same base class. TextHighlightMode -TextHighlightMode +OccurrenceMode Controls whether matching text in suggestions is highlighted using None, FirstOccurrence, or MultipleOccurrence. TextMemberPath -string +string Identifies the item property used to search from the entered text and display the selected value in the input area. When empty, DisplayMemberPath is used instead. @@ -260,7 +260,7 @@ documentation: ug TokenItemStyle -TokenItemStyle +Style Styles selected-item tokens when SelectionMode is Multiple and MultiSelectionDisplayMode is Token. @@ -283,7 +283,7 @@ documentation: ug Clear() -void +void Clears the input text and current selection, returning the Autocomplete to an empty state. @@ -300,55 +300,55 @@ documentation: ug ClearButtonClicked -EventHandler +EventHandler Triggered when the user activates the clear button after the control clears its current input. Completed -EventHandler +EventHandler Triggered when the user presses Return or Enter after entering text. Applies only to an editable input. DropDownClosed -EventHandler +EventHandler Triggered after the suggestion dropdown closes, whether or not the selection changed. Focused -EventHandler<FocusEventArgs> +EventHandler<FocusEventArgs> Triggered when the Autocomplete input receives keyboard focus. LoadMoreButtonTapped -EventHandler +EventHandler Triggered when the user taps the load-more button, allowing the application to provide additional suggestions. SelectionChanged -EventHandler<SelectionChangedEventArgs> +EventHandler<SelectionChangedEventArgs> Triggered after the selected item or selected-items collection changes and provides the previous and current selections. SelectionChanging -EventHandler<SelectionChangingEventArgs> +EventHandler<SelectionChangingEventArgs> Triggered before the selection changes and provides the previous and proposed selections; the pending change can be canceled. Unfocused -EventHandler<FocusEventArgs> +EventHandler<FocusEventArgs> Triggered when the Autocomplete input loses keyboard focus. ValueChanged -EventHandler<AutocompleteValueChangedEventArgs> +EventHandler<AutocompleteValueChangedEventArgs> Triggered when the text in the Autocomplete input changes and provides both the previous and new text values. diff --git a/MAUI/ComboBox/DropDown-Customization.md b/MAUI/ComboBox/DropDown-Customization.md deleted file mode 100644 index 665c57ab58..0000000000 --- a/MAUI/ComboBox/DropDown-Customization.md +++ /dev/null @@ -1,1487 +0,0 @@ ---- -layout: post -title: DropDown Customization in .NET MAUI ComboBox | Syncfusion® -description: Learn all about DropDown customization support in Syncfusion® .NET MAUI ComboBox control into .NET MAUI application and its basic features here. -platform: maui -control: SfComboBox -documentation: ug -keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobox maui, .net maui dropdown list, .net maui select menu. ---- - -# DropDown Customization in .NET MAUI ComboBox - -This section explains the different DropDown customizations available in [.NET MAUI ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html). - -To get started quickly with customizing the appearance of the .NET MAUI ComboBox, you can watch this video: - -{% youtube "https://www.youtube.com/watch?v=_yk7El0Seu8" %} - -## Prerequisites - -Before using the [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html), ensure the following NuGet package is installed in your .NET MAUI project: - -- `Syncfusion.Maui.Inputs` - -For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/combobox/getting-started) documentation. - - -## Maximum DropDown Height - -The maximum height of the drop-down can be changed by using the [MaxDropDownHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_MaxDropDownHeight) property of the ComboBox control. The default value of `MaxDropDownHeight` property is `400d`. - - N> If the `MaxDropDownHeight` is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - IsEditable = true, - MaxDropDownHeight = 150, - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) - -## Customize the DropDown (suggestion) item - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. The sample assumes a binding context with an `Employees` collection and image assets added to the project. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - -EmployeeViewModel employee = new EmployeeViewModel(); - -SfComboBox comboBox = new SfComboBox() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - }; - -DataTemplate itemTemplate = new DataTemplate(() => -{ - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; -}); -comboBox.ItemTemplate = itemTemplate; - -this.Content = comboBox; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox ItemTemplate](Images/UICustomization/ItemTemplate.png) - -### Customize the DropDown item text - -DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - Placeholder="Enter Media", - TextMemberPath = "Name", - DisplayMemberPath = "Name", - DropDownItemFontAttributes = FontAttributes.Italic, - DropDownItemFontFamily = "OpenSansSemibold", - DropDownItemTextColor = Colors.DarkViolet, - DropDownItemFontSize = 16, - ItemsSource = socialMediaViewModel.SocialMedias -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Item Text](Images/UICustomization/DropDownItemText.png) - -### Customize the DropDown background color - -The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - DropDownBackground = Colors.YellowGreen, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Background](Images/UICustomization/DropDownBackground.png) - -### Customize the DropDown selected item background color - -The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of selected item in the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - SelectedDropDownItemBackground = Colors.LightSeaGreen, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) - -### Customize the Selected DropDown Item Text Style - -The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the ComboBox control allows developers to customize the appearance of the selected item in the dropdown list. This feature is useful for highlighting user selections and improving the overall UI experience. - -{% tabs %} -{% highlight xaml %} - - - - - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - Placeholder="Enter Media", - SelectedDropDownItemTextStyle = new DropDownTextStyle - { - TextColor = Colors.Orange, - FontSize = 16, - FontAttributes = FontAttributes.Bold - } -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -### Customize the DropDown Border Color - -The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownStroke = Colors.DarkOrange, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Stroke](Images/UICustomization/DropDownStroke.png) - -### Customize the DropDown Border Thickness - -The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownStroke = Colors.DarkOrange, - DropDownStrokeThickness = 5, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown StrokeThickness](Images/UICustomization/DropDownStrokeThickness.png) - -### Customize the dropdown shadow visibility - -The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder = "Enter Media", - IsDropDownShadowVisible = false -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) - -### Customize the DropDown Item Height - -The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - Placeholder="Enter Media", - DropDownItemHeight = 25, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) - -### Customize the DropDownPlacement - -The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. - -* `Top` - Drop-down will be placed above the text box. - -* `Bottom` - Drop-down will be placed below the text box. - -* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. - -* `None` - Drop-down will not be shown with the filtered items. - - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropDownPlacement = DropDownPlacement.Top, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox Dropdownplacement.](Images/UICustomization/placementcombo.png) - -### Customize the DropDown ItemPadding - -The comboBox enables the user to provide padding for the items inside dropdown using [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemPadding = new Thickness(10,20,0,0), -}; - -{% endhighlight %} - -{% endtabs %} - -![.NET MAUI ComboBox Itempadding.](Images/UICustomization/Itempadding.png) - -### Customize the DropDown Width - -The [DropdownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the Width of the dropdown. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - DropdownWidth = 500, -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDownWidth.](Images/UICustomization/DropDownWidth.png) - - -### Show suggestion box on focus - -Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. - -{% tabs %} -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox() -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ShowSuggestionsOnFocus = true -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox OnFocus.](Images/UICustomization/OnFocus.png) - -## Customize the DropDown (suggestion) item based on condition - -The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. - -{% tabs %} -{% highlight C# %} - - //Model.cs - public class Employee - { - public string Name { get; set; } - public string ProfilePicture { get; set; } - public string Designation { get; set; } - public string ID { get; set; } - } - - //ViewModel.cs - public class EmployeeViewModel - { - public ObservableCollection Employees { get; set; } - public EmployeeViewModel() - { - this.Employees = new ObservableCollection(); - Employees.Add(new Employee - { - Name = "Anne Dodsworth", - ProfilePicture = "people_circle1.png", - Designation = "Developer", - ID = "E001", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture = "people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Andrew Fuller", - ProfilePicture ="people_circle8.png", - Designation = "Team Lead", - ID = "E002", - }); - Employees.Add(new Employee - { - Name = "Emilio Alvaro", - ProfilePicture = "people_circle7.png", - Designation = "Product Manager", - ID = "E003" - }); - Employees.Add(new Employee - { - Name = "Janet Leverling", - ProfilePicture = "people_circle2.png", - Designation = "HR", - ID = "E004", - }); - Employees.Add(new Employee - { - Name = "Laura Callahan", - ProfilePicture = "people_circle10.png", - Designation = "Product Manager", - ID = "E005", - }); - } - } - - //Template selector - public class EmployeeTemplateSelector : DataTemplateSelector - { - public DataTemplate EmployeeTemplate1 { get; set; } - public DataTemplate EmployeeTemplate2 { get; set; } - - protected override DataTemplate OnSelectTemplate(object item, BindableObject container) - { - var employeeName = ((Employee)item).Name; - { - if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || - employeeName.ToString() == "Laura Callahan") - { - return EmployeeTemplate1; - } - else - { - return EmployeeTemplate2; - } - } - } - } - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight C# %} - - EmployeeViewModel employee = new EmployeeViewModel(); - - DataTemplate employeeTemplate1 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0,0,0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Blue; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Coral; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - DataTemplate employeeTemplate2 = new DataTemplate(() => - { - Grid grid = new(); - grid.Margin = new Thickness(0, 5); - grid.HorizontalOptions = LayoutOptions.Center; - grid.VerticalOptions = LayoutOptions.Center; - ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; - ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; - RowDefinition rowDef = new RowDefinition() { Height = 50 }; - grid.ColumnDefinitions.Add(colDef1); - grid.ColumnDefinitions.Add(colDef2); - grid.RowDefinitions.Add(rowDef); - - Image image = new(); - image.HorizontalOptions = LayoutOptions.Center; - image.VerticalOptions = LayoutOptions.Center; - image.Aspect = Aspect.AspectFit; - image.SetBinding(Image.SourceProperty, ("ProfilePicture")); - Grid.SetColumn(image, 0); - - StackLayout stack = new(); - stack.Orientation = StackOrientation.Vertical; - stack.Margin = new Thickness(15, 0, 0, 0); - stack.HorizontalOptions = LayoutOptions.Start; - stack.VerticalOptions = LayoutOptions.Center; - Grid.SetColumn(stack, 1); - - Label label = new(); - label.SetBinding(Label.TextProperty, "Name"); - label.FontSize = 14; - label.TextColor = Colors.Red; - label.VerticalOptions = LayoutOptions.Center; - label.HorizontalTextAlignment = TextAlignment.Start; - label.Opacity = .87; - - Label label1 = new(); - label1.SetBinding(Label.TextProperty, "Designation"); - label1.FontSize = 12; - label1.TextColor = Colors.Green; - label1.VerticalOptions = LayoutOptions.Center; - label1.HorizontalTextAlignment = TextAlignment.Start; - label1.Opacity = .54; - - stack.Children.Add(label); - stack.Children.Add(label1); - - grid.Children.Add(image); - grid.Children.Add(stack); - - return new ViewCell { View = grid }; - }); - - EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); - employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; - employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; - - SfComboBox comboBox = new SfComboBox() - { - BindingContext = employee, - ItemsSource = employee.Employees, - DisplayMemberPath = "Name", - Placeholder = "Enter an employee", - TextMemberPath = "Name", - ItemTemplate = employeeTemplateSelector, - }; - - this.Content = comboBox; - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) - - -## Customize Dropdown corner radius - -The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the ComboBox control. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); -SfComboBox comboBox = new SfComboBox() -{ - WidthRequest = 250, - HeightRequest = 50, - DisplayMemberPath = "Name", - TextMemberPath = "Name", - ItemsSource = socialMediaViewModel.SocialMedias, - DropDownCornerRadius = 25 -}; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius.png) - -### View for DropDown button - -We can set `View` to the drop down button in ComboBox using [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings) property. -{% tabs %} - -{% highlight xaml %} - - - - - - - - - - - - - -{% endhighlight %} - -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - Placeholder = "Enter Social Media", - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", - DropDownButtonSettings = new DropDownButtonSettings - { - Width = 80, - Height = 40, - View = new Grid - { - BackgroundColor = Color.GreenYellow, - Children = - { - new Label - { - Text = "Click", - FontSize = 12, - TextColor = Color.Blue, - HorizontalTextAlignment = TextAlignment.Center, - VerticalOptions = LayoutOptions.Center - } - } - } - } -}; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -![.NET MAUI ComboBox DropDown Button CustomView](images/UICustomization/DropDownButtonSettings_View.png) - -## See Also - -* [Header and footer](https://help.syncfusion.com/maui/combobox/header-and-footer) -* [No results found](https://help.syncfusion.com/maui/combobox/no-results-found) -* [Liquid Glass support](https://help.syncfusion.com/maui/combobox/liquidglasssupport) \ No newline at end of file diff --git a/MAUI/ComboBox/Editing.md b/MAUI/ComboBox/Editing.md index 56ca7c6ece..4400372ebc 100644 --- a/MAUI/ComboBox/Editing.md +++ b/MAUI/ComboBox/Editing.md @@ -235,6 +235,80 @@ The following image illustrates the result of the above code: ![.NET MAUI ComboBox clear button visibility](Images/Editing/IsClearButtonVisible.png) +## Keyboard + +The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) control provides support for customizing the keyboard type through the `Keyboard` property. By default, the `Keyboard` property is set to `Keyboard.Default`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +var viewModel = new EmployeeViewModel(); + +var employeeId = new SfComboBox +{ + IsEditable = true, + Placeholder = "Enter an employee ID", + Keyboard = Keyboard.Text, + DisplayMemberPath = "Name", + TextMemberPath = "ID", + ItemsSource = viewModel.Employees +}; + +Content = employeeId; + +{% endhighlight %} +{% highlight C# tabtitle="ViewModel" %} + +using System.Collections.ObjectModel; + +public class Employee +{ + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } +} + +public class EmployeeViewModel +{ + public ObservableCollection Employees { get; set; } + + public EmployeeViewModel() + { + Employees = new ObservableCollection + { + new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001" + }, + new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002" + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + ## See Also * [Getting Started](https://help.syncfusion.com/maui/combobox/getting-started) diff --git a/MAUI/ComboBox/Events.md b/MAUI/ComboBox/Events.md deleted file mode 100644 index 935e4d9073..0000000000 --- a/MAUI/ComboBox/Events.md +++ /dev/null @@ -1,487 +0,0 @@ ---- -layout: post -title: Events in .NET MAUI ComboBox | Syncfusion® -description: Learn about all events in the Syncfusion® .NET MAUI ComboBox control and how to handle user interactions and state changes. -platform: maui -control: SfComboBox -documentation: ug -keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobox maui, .net maui dropdown list, .net maui select menu. ---- - -# Events in .NET MAUI ComboBox - -This section explains the Events available in [.NET MAUI ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html). - -To get started quickly with customizing the appearance of the .NET MAUI ComboBox, you can watch this video: - -{% youtube "https://www.youtube.com/watch?v=_yk7El0Seu8" %} - -## Prerequisites - -Before using the [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html), ensure the following NuGet package is installed in your .NET MAUI project: - -- `Syncfusion.Maui.Inputs` - -For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/combobox/getting-started) documentation. - - -## Completed Event - -The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the ComboBox editable mode by pressing return key on the keyboard.The handler for the event is a generic event handler, taking the `sender` and `EventArgs`(the `EventArgs` value is `string.Empty`): - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox combobox = new SfComboBox() -{ - IsEditable = true, - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name", -}; -combobox.Completed += combobox_Completed; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `Completed` event can be handled in C# as follows: - -{% tabs %} -{% highlight C# %} - -private async void combobox_Completed(object sender, EventArgs e) -{ - await DisplayAlertAsyncAsync("Message", "Text entering Completed", "close"); -} - -{% endhighlight %} -{% endtabs %} - -The following image illustrates the result of the above code: - -![.NET MAUI ComboBox completed event](Images/UICustomization/CompletedEvent.png) - -N> The `Completed` event is not supported in the Android platform. - -## DropDownOpening Event - -The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event will be fired whenever opening the dropdown menu in the ComboBox. It can cancel dropdown opening with `CancelEventArgs` that contains the following property: - - * Cancel: Dropdown opening is based on this value. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - - SfComboBox comboBox = new SfComboBox - { - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" - }; - comboBox.DropdownOpening += comboBox_DropdownOpening; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `DropdownOpening` event can be handled in C# as follows: - -{% tabs %} - -{% highlight c# %} - - private void comboBox_DropdownOpening(object sender, CancelEventArgs e) - { - e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. - } - -{% endhighlight %} - -{% endtabs %} - -## DropDownOpened Event - -The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the ComboBox drop-down is opened. - -{% tabs %} - -{% highlight xaml %} - - - - -{% endhighlight %} - -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -comboBox.DropdownOpened += comboBox_DropdownOpened; - - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `DropdownOpened` event can be handled in C# as follows: - -{% tabs %} - -{% highlight c# %} - -private void comboBox_DropdownOpened(object sender, EventArgs e) -{ - // Triggered when dropdown is opened -} - -{% endhighlight %} - -{% endtabs %} - -## DropDownClosed Event - -The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the ComboBox drop-down is closed. - -{% tabs %} -{% highlight xaml %} - - -{% endhighlight %} -{% highlight c# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -comboBox.DropDownClosed += SfComboBox_DropDownClosed; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `DropDownClosed` event can be handled in C# as follows: - -{% tabs %} -{% highlight c# %} - -private void SfComboBox_DropDownClosed(object sender, EventArgs e) -{ - DisplayAlertAsync("Message", "DropDown Closed", "close"); -} - -{% endhighlight %} -{% endtabs %} - -N> When `WindowSoftInputModeAdjust.Resize` is set in the sample and `ComboBox` is placed inside a `ScrollView`, the dropdown may close unexpectedly due to layout resizing. To prevent this, override `OnSizeAllocated` and handle the `DropDownClosing`. For more details, refer to the [KB article](https://support.syncfusion.com/agent/kb/19349). - -## ValueChanged Event -When the value of comboBox changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: - -* `OldValue` - Contains the previous text value before the change. -* `NewValue` - Contains the new text value after the change. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - DisplayMemberPath = "Name", - TextMemberPath = "Name" -}; -comboBox.ValueChanged += OnValueChanged; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `ValueChanged` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e) -{ - await DisplayAlertAsync("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); -} - -{% endhighlight %} - -{% endtabs %} - - -## ClearButtonClicked Event - -The [ClearButtonClicked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ClearButtonClicked) event is raised when the user activates the clear button in the `ComboBox` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. - -{% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} -{% highlight C# %} - -SfComboBox comboBox = new SfComboBox -{ - ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", - DisplayMemberPath = "Name" -}; -comboBox.ClearButtonClicked += comboBox_ClearButtonClicked; - -{% endhighlight %} -{% highlight c# tabtitle="ViewModel" %} - -// ViewModel -public class SocialMediaViewModel -{ - public ObservableCollection SocialMedias { get; set; } - - public SocialMediaViewModel() - { - this.SocialMedias = new ObservableCollection - { - 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 = "Twitter", ID = 6 }, - new SocialMedia { Name = "WhatsApp", ID = 7 }, - new SocialMedia { Name = "YouTube", ID = 8 } - }; - } -} - -public class SocialMedia -{ - public string Name { get; set; } - public int ID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -The `ClearButtonClicked` event can be handled as follows: - -{% tabs %} -{% highlight C# %} - -private async void comboBox_ClearButtonClicked(object sender, EventArgs e) -{ - await DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); -} - -{% endhighlight %} -{% endtabs %} - -## See Also - -* [Header and footer](https://help.syncfusion.com/maui/combobox/header-and-footer) -* [No results found](https://help.syncfusion.com/maui/combobox/no-results-found) -* [Liquid Glass support](https://help.syncfusion.com/maui/combobox/liquidglasssupport) \ No newline at end of file diff --git a/MAUI/ComboBox/Getting-Started.md b/MAUI/ComboBox/Getting-Started.md index a7233536ab..081ae277ff 100644 --- a/MAUI/ComboBox/Getting-Started.md +++ b/MAUI/ComboBox/Getting-Started.md @@ -158,7 +158,7 @@ using Syncfusion.Maui.Inputs; ## Step 6: Add the ComboBox component -Create an instance and set it as the ComboBox's [ItemsSource]((https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemsSource)) property. +Create an instance and set it as the ComboBox's [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemsSource) property. The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) control is populated with a list of social media. But the SocialMedia model contains two properties, ID and Name, so it is necessary to intimate by which property it should display the value in the selection box portion of the `[ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) control when an item is selected. diff --git a/MAUI/ComboBox/Selection.md b/MAUI/ComboBox/Selection.md index 29d6c3b261..ef3b8ed257 100644 --- a/MAUI/ComboBox/Selection.md +++ b/MAUI/ComboBox/Selection.md @@ -562,7 +562,7 @@ The `SelectionChanging` event can be handled in C# as follows: private void OnSelectionChanging(object sender, SelectionChangingEventArgs e) { - await DisplayAlertAsync("Alert", "Selecting Item has changing", "Ok"); + await DisplayAlert("Alert", "Selecting Item has changing", "Ok"); } {% endhighlight %} @@ -650,7 +650,7 @@ The `SelectionChanged` event can be handled in C# as follows: private void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { - await DisplayAlertAsync("Alert", $"Selected Item has changed", "Ok"); + await DisplayAlert("Alert", $"Selected Item has changed", "Ok"); } {% endhighlight %} diff --git a/MAUI/ComboBox/Smart-Filtering.md b/MAUI/ComboBox/Smart-Filtering.md index 826f8d8024..220ade8dbd 100644 --- a/MAUI/ComboBox/Smart-Filtering.md +++ b/MAUI/ComboBox/Smart-Filtering.md @@ -271,4 +271,4 @@ The following image demonstrates the output of the above AI-based filter using a You can find the complete sample from this [link.](https://github.com/syncfusion/maui-demos/tree/master/MAUI/SmartDemos/SampleBrowser.Maui.SmartDemos/Samples/SmartDemos/ComboBoxGettingStarted) -By combining a powerful AI-driven online filter with a robust you can create a truly smart and reliable filter experience in your .NET MAUI applications. \ No newline at end of file +By combining a powerful AI-driven online filter with a robust you can create a truly smart and reliable filter experience in your .NET MAUI applications. diff --git a/MAUI/ComboBox/UI-Customization.md b/MAUI/ComboBox/UI-Customization.md index 61aaf74665..400b22c68e 100644 --- a/MAUI/ComboBox/UI-Customization.md +++ b/MAUI/ComboBox/UI-Customization.md @@ -510,41 +510,1790 @@ The following image illustrates the result of the above code: ![.NET MAUI ComboBox maximum drop-down height](Images/UICustomization/MaxDropDownHeight.png) +## Customize the DropDown (suggestion) item + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items using custom templates. The default value of the `ItemTemplate` is `null`. The following example shows how to customize drop-down items using templates. The sample assumes a binding context with an `Employees` collection and image assets added to the project. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +EmployeeViewModel employee = new EmployeeViewModel(); + +SfComboBox comboBox = new SfComboBox() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + }; + +DataTemplate itemTemplate = new DataTemplate(() => +{ + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; +}); +comboBox.ItemTemplate = itemTemplate; + +this.Content = comboBox; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox ItemTemplate](Images/UICustomization/ItemTemplate.png) + +### Customize the DropDown item text + +DropDown items can be customized using the [DropDownItemFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontAttributes), [DropDownItemFontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontFamily), [DropDownItemFontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemFontSize), and [DropDownItemTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemTextColor) properties. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + Placeholder="Enter Media", + TextMemberPath = "Name", + DisplayMemberPath = "Name", + DropDownItemFontAttributes = FontAttributes.Italic, + DropDownItemFontFamily = "OpenSansSemibold", + DropDownItemTextColor = Colors.DarkViolet, + DropDownItemFontSize = 16, + ItemsSource = socialMediaViewModel.SocialMedias +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Item Text](Images/UICustomization/DropDownItemText.png) + +### Customize the DropDown background color + +The [DropDownBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownBackground) property is used to modify the background color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + DropDownBackground = Colors.YellowGreen, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Background](Images/UICustomization/DropDownBackground.png) + +### Customize the DropDown selected item background color + +The [SelectedDropDownItemBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemBackground) property is used to modify the background color of selected item in the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + SelectedDropDownItemBackground = Colors.LightSeaGreen, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Selected DropDown Item Background](Images/UICustomization/SelectedDropDownItemBackground.png) + +### Customize the Selected DropDown Item Text Style + +The [SelectedDropDownItemTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectedDropDownItemTextStyle) property in the ComboBox control allows developers to customize the appearance of the selected item in the dropdown list. This feature is useful for highlighting user selections and improving the overall UI experience. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + Placeholder="Enter Media", + SelectedDropDownItemTextStyle = new DropDownTextStyle + { + TextColor = Colors.Orange, + FontSize = 16, + FontAttributes = FontAttributes.Bold + } +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Customize the DropDown Border Color + +The [DropDownStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStroke) property is used to modify the border color of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownStroke = Colors.DarkOrange, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Stroke](Images/UICustomization/DropDownStroke.png) + +### Customize the DropDown Border Thickness + +The [DropDownStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownStrokeThickness) property is used to modify the thickness of the dropdown border. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownStroke = Colors.DarkOrange, + DropDownStrokeThickness = 5, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown StrokeThickness](Images/UICustomization/DropDownStrokeThickness.png) + +### Customize the dropdown shadow visibility + +The [IsDropDownShadowVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_IsDropDownShadowVisible) property is used to customize the visibility of the dropdown shadow. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder = "Enter Media", + IsDropDownShadowVisible = false +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png) + +### Customize the DropDown Item Height + +The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + Placeholder="Enter Media", + DropDownItemHeight = 25, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Item Height](Images/UICustomization/DropDownItemHeight.png) + +### Customize the DropDownPlacement + +The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the [DropDownPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownPlacement) property. + +* `Top` - Drop-down will be placed above the text box. + +* `Bottom` - Drop-down will be placed below the text box. + +* `Auto` - Drop-down will be placed based on the available space either top or bottom of the text box. + +* `None` - Drop-down will not be shown with the filtered items. + + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropDownPlacement = DropDownPlacement.Top, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox Dropdownplacement.](Images/UICustomization/placementcombo.png) + +### Customize the DropDown ItemPadding + +The comboBox enables the user to provide padding for the items inside dropdown using [ItemPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemPadding) property. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemPadding = new Thickness(10,20,0,0), +}; + +{% endhighlight %} + +{% endtabs %} + +![.NET MAUI ComboBox Itempadding.](Images/UICustomization/Itempadding.png) + +### Customize the DropDown Width + +The [DropdownWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropdownWidth) property is used to modify the Width of the dropdown. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + DropdownWidth = 500, +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDownWidth.](Images/UICustomization/DropDownWidth.png) + + +### Show suggestion box on focus + +Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ShowSuggestionsOnFocus) property. At this time, suggestion list is the complete list of data source. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox() +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ShowSuggestionsOnFocus = true +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox OnFocus.](Images/UICustomization/OnFocus.png) + +## Customize the DropDown (suggestion) item based on condition + +The [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_ItemTemplate) property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the `ItemTemplate` is `null`. + +{% tabs %} +{% highlight C# %} + + //Model.cs + public class Employee + { + public string Name { get; set; } + public string ProfilePicture { get; set; } + public string Designation { get; set; } + public string ID { get; set; } + } + + //ViewModel.cs + public class EmployeeViewModel + { + public ObservableCollection Employees { get; set; } + public EmployeeViewModel() + { + this.Employees = new ObservableCollection(); + Employees.Add(new Employee + { + Name = "Anne Dodsworth", + ProfilePicture = "people_circle1.png", + Designation = "Developer", + ID = "E001", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture = "people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Andrew Fuller", + ProfilePicture ="people_circle8.png", + Designation = "Team Lead", + ID = "E002", + }); + Employees.Add(new Employee + { + Name = "Emilio Alvaro", + ProfilePicture = "people_circle7.png", + Designation = "Product Manager", + ID = "E003" + }); + Employees.Add(new Employee + { + Name = "Janet Leverling", + ProfilePicture = "people_circle2.png", + Designation = "HR", + ID = "E004", + }); + Employees.Add(new Employee + { + Name = "Laura Callahan", + ProfilePicture = "people_circle10.png", + Designation = "Product Manager", + ID = "E005", + }); + } + } + + //Template selector + public class EmployeeTemplateSelector : DataTemplateSelector + { + public DataTemplate EmployeeTemplate1 { get; set; } + public DataTemplate EmployeeTemplate2 { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var employeeName = ((Employee)item).Name; + { + if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" || + employeeName.ToString() == "Laura Callahan") + { + return EmployeeTemplate1; + } + else + { + return EmployeeTemplate2; + } + } + } + } + +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + EmployeeViewModel employee = new EmployeeViewModel(); + + DataTemplate employeeTemplate1 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0,0,0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Blue; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Coral; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + DataTemplate employeeTemplate2 = new DataTemplate(() => + { + Grid grid = new(); + grid.Margin = new Thickness(0, 5); + grid.HorizontalOptions = LayoutOptions.Center; + grid.VerticalOptions = LayoutOptions.Center; + ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 }; + ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 }; + RowDefinition rowDef = new RowDefinition() { Height = 50 }; + grid.ColumnDefinitions.Add(colDef1); + grid.ColumnDefinitions.Add(colDef2); + grid.RowDefinitions.Add(rowDef); + + Image image = new(); + image.HorizontalOptions = LayoutOptions.Center; + image.VerticalOptions = LayoutOptions.Center; + image.Aspect = Aspect.AspectFit; + image.SetBinding(Image.SourceProperty, ("ProfilePicture")); + Grid.SetColumn(image, 0); + + StackLayout stack = new(); + stack.Orientation = StackOrientation.Vertical; + stack.Margin = new Thickness(15, 0, 0, 0); + stack.HorizontalOptions = LayoutOptions.Start; + stack.VerticalOptions = LayoutOptions.Center; + Grid.SetColumn(stack, 1); + + Label label = new(); + label.SetBinding(Label.TextProperty, "Name"); + label.FontSize = 14; + label.TextColor = Colors.Red; + label.VerticalOptions = LayoutOptions.Center; + label.HorizontalTextAlignment = TextAlignment.Start; + label.Opacity = .87; + + Label label1 = new(); + label1.SetBinding(Label.TextProperty, "Designation"); + label1.FontSize = 12; + label1.TextColor = Colors.Green; + label1.VerticalOptions = LayoutOptions.Center; + label1.HorizontalTextAlignment = TextAlignment.Start; + label1.Opacity = .54; + + stack.Children.Add(label); + stack.Children.Add(label1); + + grid.Children.Add(image); + grid.Children.Add(stack); + + return new ViewCell { View = grid }; + }); + + EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector(); + employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1; + employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2; + + SfComboBox comboBox = new SfComboBox() + { + BindingContext = employee, + ItemsSource = employee.Employees, + DisplayMemberPath = "Name", + Placeholder = "Enter an employee", + TextMemberPath = "Name", + ItemTemplate = employeeTemplateSelector, + }; + + this.Content = comboBox; + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox ItemTemplateSelector](Images/UICustomization/TemplateSelector.png) + ## DropDown button customization -We can customize the size of the drop down button in [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) by using the `Width` and `Height` properties in [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings). +We can customize the size of the drop down button in [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) by using the `Width` and `Height` properties in [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings). + +{% tabs %} + +{% highlight xaml %} + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + Placeholder = "Enter Social Media", + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + DropDownButtonSettings = new DropDownButtonSettings + { + Width = 50, + Height = 40 + } +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Button Size Customization](images/UICustomization/DropDownButtonSize.png) + +## Customize Dropdown corner radius + +The [DropDownCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownCornerRadius) property is used to modify the corner radius of the dropdown container for the ComboBox control. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox() +{ + WidthRequest = 250, + HeightRequest = 50, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias, + DropDownCornerRadius = 25 +}; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox with Dropdown corner radius](Images/UICustomization/dropdonw_corner_radius.png) + +### View for DropDown button + +We can set `View` to the drop down button in ComboBox using [DropDownButtonSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_DropDownButtonSettings) property. +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + Placeholder = "Enter Social Media", + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + DropDownButtonSettings = new DropDownButtonSettings + { + Width = 80, + Height = 40, + View = new Grid + { + BackgroundColor = Color.GreenYellow, + Children = + { + new Label + { + Text = "Click", + FontSize = 12, + TextColor = Color.Blue, + HorizontalTextAlignment = TextAlignment.Center, + VerticalOptions = LayoutOptions.Center + } + } + } + } +}; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +![.NET MAUI ComboBox DropDown Button CustomView](images/UICustomization/DropDownButtonSettings_View.png) + +## Styling token items + +The ComboBox control allows you to customize the style of TokenItem generated in the selection area by using the [TokenItemStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_TokenItemStyle) property. + +{% tabs %} + +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code. + +![.NET MAUI ComboBox token item style](Images/UICustomization/Tokenitemstyle.png) + + +## Completed Event + +The [Completed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Completed) event is raised when the user finalizes the text in the ComboBox editable mode by pressing return key on the keyboard.The handler for the event is a generic event handler, taking the `sender` and `EventArgs`(the `EventArgs` value is `string.Empty`): + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox combobox = new SfComboBox() +{ + IsEditable = true, + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name", +}; +combobox.Completed += combobox_Completed; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `Completed` event can be handled in C# as follows: + +{% tabs %} +{% highlight C# %} + +private async void combobox_Completed(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Text entering Completed", "close"); +} + +{% endhighlight %} +{% endtabs %} + +The following image illustrates the result of the above code: + +![.NET MAUI ComboBox completed event](Images/UICustomization/CompletedEvent.png) + +N> The `Completed` event is not supported in the Android platform. + +## DropDownOpening Event + +The [DropDownOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpening) event will be fired whenever opening the dropdown menu in the ComboBox. It can cancel dropdown opening with `CancelEventArgs` that contains the following property: + + * Cancel: Dropdown opening is based on this value. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + + SfComboBox comboBox = new SfComboBox + { + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + comboBox.DropdownOpening += comboBox_DropdownOpening; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `DropdownOpening` event can be handled in C# as follows: + +{% tabs %} + +{% highlight c# %} + + private void comboBox_DropdownOpening(object sender, CancelEventArgs e) + { + e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. + } + +{% endhighlight %} + +{% endtabs %} + +## DropDownOpened Event + +The [DropDownOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_DropdownOpened) event occurs when the ComboBox drop-down is opened. {% tabs %} {% highlight xaml %} - - - - + DisplayMemberPath="Name" + TextMemberPath="Name"> - + {% endhighlight %} {% highlight c# %} SfComboBox comboBox = new SfComboBox { - Placeholder = "Enter Social Media", ItemsSource = socialMediaViewModel.SocialMedias, - TextMemberPath = "Name", DisplayMemberPath = "Name", - DropDownButtonSettings = new DropDownButtonSettings + TextMemberPath = "Name" +}; +comboBox.DropdownOpened += comboBox_DropdownOpened; + + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() { - Width = 50, - Height = 40 + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `DropdownOpened` event can be handled in C# as follows: + +{% tabs %} + +{% highlight c# %} + +private void comboBox_DropdownOpened(object sender, EventArgs e) +{ + // Triggered when dropdown is opened +} + +{% endhighlight %} + +{% endtabs %} + +## DropDownClosed Event + +The [DropDownClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownClosed) event occurs when the ComboBox drop-down is closed. + +{% tabs %} +{% highlight xaml %} + + +{% endhighlight %} +{% highlight c# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" }; +comboBox.DropDownClosed += SfComboBox_DropDownClosed; {% endhighlight %} {% highlight c# tabtitle="ViewModel" %} @@ -580,34 +2329,47 @@ public class SocialMedia {% endhighlight %} {% endtabs %} -![.NET MAUI ComboBox DropDown Button Size Customization](images/UICustomization/DropDownButtonSize.png) +The `DropDownClosed` event can be handled in C# as follows: -## Styling token items +{% tabs %} +{% highlight c# %} + +private void SfComboBox_DropDownClosed(object sender, EventArgs e) +{ + DisplayAlert("Message", "DropDown Closed", "close"); +} -The ComboBox control allows you to customize the style of TokenItem generated in the selection area by using the [TokenItemStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_TokenItemStyle) property. +{% endhighlight %} +{% endtabs %} -{% tabs %} +N> When `WindowSoftInputModeAdjust.Resize` is set in the sample and `ComboBox` is placed inside a `ScrollView`, the dropdown may close unexpectedly due to layout resizing. To prevent this, override `OnSizeAllocated` and handle the `DropDownClosing`. For more details, refer to the [KB article](https://support.syncfusion.com/agent/kb/19349). + +## ValueChanged Event +When the value of comboBox changes, the [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ValueChanged) event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties: +* `OldValue` - Contains the previous text value before the change. +* `NewValue` - Contains the new text value after the change. + +{% tabs %} {% highlight xaml %} - - - - - + + +{% endhighlight %} + +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; +comboBox.ValueChanged += OnValueChanged; {% endhighlight %} {% highlight c# tabtitle="ViewModel" %} @@ -643,10 +2405,20 @@ public class SocialMedia {% endhighlight %} {% endtabs %} -The following image illustrates the result of the above code. +The `ValueChanged` event can be handled as follows: -![.NET MAUI ComboBox token item style](Images/UICustomization/Tokenitemstyle.png) +{% tabs %} +{% highlight C# %} + +private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e) +{ + await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok"); +} +{% endhighlight %} + +{% endtabs %} + ## CursorPosition The cursor position in the input view can be obtained or updated using the [CursorPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfDropdownEntry.html#Syncfusion_Maui_Core_SfDropdownEntry_CursorPosition) property in the ComboBox. @@ -864,6 +2636,76 @@ The following image illustrates the result of the above code: ![.NET MAUI ComboBox ClearButtonPath](Images/UICustomization/clearbuttoncustomization.png) +## ClearButtonClicked Event + +The [ClearButtonClicked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html#Syncfusion_Maui_Inputs_SfComboBox_ClearButtonClicked) event is raised when the user activates the clear button in the `ComboBox` editable mode by tapping or pressing the clear button on the keyboard. The handler for the event is a generic event handler, taking the `sender` and `EventArgs`. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfComboBox comboBox = new SfComboBox +{ + ItemsSource = socialMediaViewModel.SocialMedias, + TextMemberPath = "Name", + DisplayMemberPath = "Name" +}; +comboBox.ClearButtonClicked += comboBox_ClearButtonClicked; + +{% endhighlight %} +{% highlight c# tabtitle="ViewModel" %} + +// ViewModel +public class SocialMediaViewModel +{ + public ObservableCollection SocialMedias { get; set; } + + public SocialMediaViewModel() + { + this.SocialMedias = new ObservableCollection + { + 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 = "Twitter", ID = 6 }, + new SocialMedia { Name = "WhatsApp", ID = 7 }, + new SocialMedia { Name = "YouTube", ID = 8 } + }; + } +} + +public class SocialMedia +{ + public string Name { get; set; } + public int ID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +The `ClearButtonClicked` event can be handled as follows: + +{% tabs %} +{% highlight C# %} + +private async void comboBox_ClearButtonClicked(object sender, EventArgs e) +{ + await DisplayAlert("Message", "Clear Button Clicked", "ok"); +} + +{% endhighlight %} +{% endtabs %} ## Return Command and Return Command Parameter @@ -935,7 +2777,7 @@ public SocialMediaViewModel private async void OnAlertCommandExecuted(string parameter) { - await Application.Current.MainPage.DisplayAlertAsync("Alert", parameter, "OK"); + await Application.Current.MainPage.DisplayAlert("Alert", parameter, "OK"); } } diff --git a/MAUI/ComboBox/properties.md b/MAUI/ComboBox/properties.md index 3f16c8bf43..e723b6e162 100644 --- a/MAUI/ComboBox/properties.md +++ b/MAUI/ComboBox/properties.md @@ -21,7 +21,7 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo CustomView - View + View Displays custom content inside the ComboBox in place of the default input area. @@ -33,13 +33,13 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo DropDownIconColor - Color + Color Applies a color to the drop-down button icon. EnableAutoSize - bool + bool Adjusts the control size to fit its content when the displayed text or selection changes. @@ -51,25 +51,25 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo HorizontalTextAlignment - TextAlignment + TextAlignment Aligns the displayed text horizontally within the ComboBox. IsDropdownButtonVisible - bool + bool Shows or hides the drop-down button used to open the suggestion list. IsEditable - bool + bool Allows users to enter text directly into the ComboBox instead of selecting only from the drop-down list. IsFilteringEnabled - bool + bool Filters the available items as the user types in an editable ComboBox. @@ -81,7 +81,7 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo SelectedIndex - int + int Identifies the currently selected item by its position in the items source. @@ -93,7 +93,7 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo ShowBorder - bool + bool Shows or hides the border around the ComboBox. @@ -111,7 +111,7 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo VerticalTextAlignment - TextAlignment + TextAlignment Controls the vertical alignment of the text inside the control and controls how the text is positioned within the available height. @@ -127,13 +127,13 @@ keywords: .net maui combobox, .net maui sfcombobox, syncfusion combobox, combobo ClearButtonClicked - EventHandler + EventHandler Triggered when the clear button removes the current text or selection from the ComboBox. ValueChanged - EventHandler<ComboBoxValueChangedEventArgs> + EventHandler<ComboBoxValueChangedEventArgs> Triggered when the selected value or displayed text changes. diff --git a/MAUI/Masked-Entry/Basic-Features.md b/MAUI/Masked-Entry/Basic-Features.md index c734ecc89d..28d3e68210 100644 --- a/MAUI/Masked-Entry/Basic-Features.md +++ b/MAUI/Masked-Entry/Basic-Features.md @@ -604,7 +604,7 @@ public class CommandDemoViewModel var page = Application.Current?.Windows[0]?.Page; if (page is not null) { - await page.DisplayAlertAsync("Alert", parameter, "OK"); + await page.DisplayAlert("Alert", parameter, "OK"); } } } diff --git a/MAUI/Masked-Entry/Culture.md b/MAUI/Masked-Entry/Culture.md index f5841e6e51..f31e3c46ab 100644 --- a/MAUI/Masked-Entry/Culture.md +++ b/MAUI/Masked-Entry/Culture.md @@ -74,8 +74,6 @@ The following example shows how to set the France culture for the currency symbo {% tabs %} {% highlight C# %} -using System.Globalization; - SfMaskedEntry maskedEntry = new SfMaskedEntry(); maskedEntry.WidthRequest = 200; maskedEntry.MaskType = MaskedEntryMaskType.Simple; diff --git a/MAUI/Masked-Entry/Events.md b/MAUI/Masked-Entry/Events.md index 9e56b7783c..42474b97e6 100644 --- a/MAUI/Masked-Entry/Events.md +++ b/MAUI/Masked-Entry/Events.md @@ -169,7 +169,7 @@ private void MaskedEntry_Completed(object sender, EventArgs e) // Place this handler in the code-behind of a ContentPage, // or resolve the current page via Application.Current?.Windows[0]?.Page. var page = Application.Current?.Windows[0]?.Page; - page?.DisplayAlertAsync("Message", "Text entering Completed", "ok"); + page?.DisplayAlert("Message", "Text entering Completed", "ok"); } {% endhighlight %} @@ -215,7 +215,7 @@ private void MaskedEntry_ClearButtonClicked(object sender, EventArgs e) // Place this handler in the code-behind of a ContentPage, // or resolve the current page via Application.Current?.Windows[0]?.Page. var page = Application.Current?.Windows[0]?.Page; - page?.DisplayAlertAsync("Message", "Clear Button Clicked", "ok"); + page?.DisplayAlert("Message", "Clear Button Clicked", "ok"); } {% endhighlight %} diff --git a/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png b/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_disable_state.png deleted file mode 100644 index ed12e165dc693ae7ffe888f4ac15046aad49e1e9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2076 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 diff --git a/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png b/MAUI/Masked-Entry/MaskedEntry_Images/maui_masked_entry_normal_state.png deleted file mode 100644 index 5694e6dd2487206a90c844ebb58b74c733797d0a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2058 zcmd6o{a4b59>>3k4>J{QIyHmD+iIuf!@M*O@2$rVIREL%Ef zV(L9TY=8@9bxaw}Br-vV^mS=+1r-97#FPwt0DM9WFZ~hQ*$=PJ=kq?FbKXCEet3Vr zk3SaWw9RW9002%g(GiIN0AX6@>mS%!YHjTx-O?cV#HhnS`w)E2BCOA0Mbg!kwGKowO&DAn}m> zgm9aKfYTY!ihboH2df06&oBxRYd1ku)}jM<@Uu*7jqSXEKl*5aVxu|)`Uw@|Fb}=;?&FFW+BQz@2 zNv&237L|NIO~x1t$M@AVClAiulm>FL%0amDyCaqV!Q%~Ucl-kaOaajNlY{f)U-hAI z@;lh))M0;r>xwQ9Ln!fR>?z-9-6Vs$y~jL26^r>vslL$(5^qfTGTk=AS*ReyE;hJ3 zByJ}9x&x+sj{_IkNa3pg!WfXTB}7rUypOR~8N0Do&DMVkURS5)6&yjOo%7Yk#>UZ- z$4YkqYZT{bXgL!Cr9_~~I263^zusO0mbA6_nG8(nd zwmcG9_rr8n_AJQRPC*EWIWxfGZdaw0{w2-OMO-v%WQX+J4K-yHM-KSCK`pMDo*B47 zX6TpaB%@M=CWqm+MaQ_jrVIE_JA2AQ-XeuxzYbhd-Ca+1RKdk} zUimT%`kDK{{WNgzg#}%)qFzMhU`Z_zh!v@qoNQ@#~8kY{h{*; z*38%1ZbyYIeljxh4&^KDK^1AE_gz5dtFm zGF=n}wGg7XySWd_8k22k zd%D_k)$>=PE+`eY=J|U!VF@gtm8QJfYxLymhdRTm?>kSoAcg8Ip-v}b&(d-yBMPNm zhnrg%FtKbRZF{BXWp3$PyS&H;-YWdJ*C)?R)cFzjka+V5f=-u5Kd~4BH`Hu(ic-trYi)6 z%h=luP&AnsShT;m|7J(NpHMBIh-$x&Jin0^V=m-VB5GKVIQgJqS%ktf|V&7*pJA#{)uqdlH#y<7XF#mwfG0gVMRyd7og?7VR>1P#u zl$Y|0Rrkp}^Fz(ZkY75B4bn>5^f1(`Vnk8BzK!A86Bw`P8hlosC{pG}G(9t4>|{TF zaUCM-=*nK)HrS=rmx2p5r#>NKlcY+!tmnt;^{D9!s@!>QU3aq4X!h$RK&s~NRW=c2 zGcH3A`C@n~JJ-wP@c<-1@iPXI{qvEuOL!i~Lp_coUpX_evet6hje@u|@Y&3J2d-(n zqe4I!v4jllPY9YT-7vAyXv~59xw$x2SKP9b2UH- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -SfMaskedEntry maskedEntry = new SfMaskedEntry -{ - WidthRequest = 250, - HeightRequest = 50, - Placeholder = "Enter a value", -}; -VisualStateGroupList visualStateGroupList = new VisualStateGroupList(); -VisualStateGroup commonStateGroup = new VisualStateGroup { Name = "CommonStates" }; - -VisualState normalState = new VisualState { Name = "Normal" }; -normalState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#707070") }); -normalState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); -normalState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#707070") }); - -VisualState focusedState = new VisualState { Name = "Focused" }; -focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#f903e9") }); -focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); -focusedState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#f903e9") }); - -VisualState pointerOverState = new VisualState { Name = "PointerOver" }; -pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#c372bd") }); -pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); -pointerOverState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#c372bd") }); - -VisualState disabledState = new VisualState { Name = "Disabled" }; -disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.StrokeProperty, Value = Color.FromArgb("#BDBDBD") }); -disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.TextColorProperty, Value = Colors.Black }); -disabledState.Setters.Add(new Setter { Property = SfMaskedEntry.ClearButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); - -commonStateGroup.States.Add(normalState); -commonStateGroup.States.Add(focusedState); -commonStateGroup.States.Add(pointerOverState); -commonStateGroup.States.Add(disabledState); - -visualStateGroupList.Add(commonStateGroup); -VisualStateManager.SetVisualStateGroups(maskedEntry, visualStateGroupList); -Content = maskedEntry; - -{% endhighlight %} -{% endtabs %} - - -### Normal visual state - -![.NET MAUI Masked Entry in the Normal visual state](MaskedEntry_Images/maui_masked_entry_normal_state.png) - -### Hover visual state - -![.NET MAUI Masked Entry in the Hover visual state](MaskedEntry_Images/maui_masked_entry_hover_state.png) - -### Focused visual state - -![.NET MAUI Masked Entry in the Focused visual state](MaskedEntry_Images/maui_masked_entry_focused_state.png) - -### Disabled visual state - -![.NET MAUI Masked Entry in the Disabled visual state](MaskedEntry_Images/maui_masked_entry_disable_state.png) - - -## See Also - -* [Getting Started](https://help.syncfusion.com/maui/masked-entry/getting-started) -* [Basic Features](https://help.syncfusion.com/maui/masked-entry/basic-features) -* [Mask Types](https://help.syncfusion.com/maui/masked-entry/mask-types) -* [Formatting Value](https://help.syncfusion.com/maui/masked-entry/formatting-value) diff --git a/MAUI/Masked-Entry/properties.md b/MAUI/Masked-Entry/properties.md index 12d1190e0f..8be8444a58 100644 --- a/MAUI/Masked-Entry/properties.md +++ b/MAUI/Masked-Entry/properties.md @@ -19,82 +19,82 @@ documentation: ug ClearButtonColor - Color + Color Controls the color of the clear button shown by ClearButtonVisibility. ClearButtonPath - Path + Path Replaces the default clear-button icon with a custom Path. ClearButtonVisibility - ClearButtonVisibility + ClearButtonVisibility Shows the clear button with WhileEditing or keeps it hidden with Never. Activating the button clears the current input. Culture - CultureInfo + CultureInfo Supplies the culture used when the mask interprets culture-sensitive characters and formats the input. CursorPosition - int + int Controls the insertion cursor's zero-based position within the displayed masked text. Font - Font + Font Provides the effective font assembled from the Masked Entry's font family, size, and attributes. This property is read-only. FontAttributes - FontAttributes + FontAttributes Applies None, Bold, or Italic styling to the displayed masked text. FontAutoScalingEnabled - bool + bool Allows the displayed text to follow the user's operating-system text-size preference. FontFamily - string + string Controls the font family used for the displayed masked text. FontSize - double + double Controls the font size of the displayed masked text. HasError - bool + bool Reports the result of the most recent mask validation: true when the input is invalid and false when it satisfies the mask. The value is read-only and is updated after ValueChanged. HidePromptOnLeave - bool + bool Hides unfilled prompt characters when the Masked Entry loses focus and displays them again when editing resumes. HorizontalTextAlignment - TextAlignment + TextAlignment Aligns the masked text horizontally at the Start, Center, or End of the input field. IsReadOnly - bool + bool Prevents typing, cutting, pasting, and other user edits while keeping the masked value focusable, selectable, and available for copying. Keyboard - Keyboard + Keyboard Selects the software keyboard presented for input, such as the default, numeric, telephone, email, or URL keyboard. The keyboard does not replace validation performed by the mask. Mask - string + string Defines the input pattern that accepted characters must follow. Its syntax is interpreted according to MaskType. @@ -104,67 +104,67 @@ documentation: ug PasswordChar - char + char Replaces entered characters with the specified masking character. When no password character is configured, the entered characters remain visible. PasswordDelayDuration - int + int Controls how long the most recently entered character remains visible before it is replaced by PasswordChar, in milliseconds. Placeholder - string + string Displays supporting text only when both the mask and value are empty; mask prompts take precedence once a mask is displayed. PlaceholderColor - Color + Color Controls the color of the placeholder shown when both the mask and value are empty. PromptChar - char + char Specifies the character displayed for each unfilled editable position in a Simple mask. ReturnCommand - ICommand + ICommand Runs when the user presses the physical or software keyboard's Return key. ReturnCommandParameter - object + object Supplies the value passed to ReturnCommand when Return is pressed. ReturnType - ReturnType + ReturnType Changes the action label or icon on the software keyboard's Return key. Supported values are Default, Done, Go, Next, Search, and Send. SelectAllOnFocus - bool + bool Selects all displayed text when the Masked Entry receives focus, making the complete value ready to be replaced. ShowBorder - bool + bool Shows or hides the border around the Masked Entry. Stroke - Brush + Brush Controls the border brush when ShowBorder is enabled. Text - string + string Provides the read-only text currently displayed by the control, including mask formatting, literals, and visible prompt characters. Use Value to supply or retrieve the input value. TextColor - Color + Color Controls the color of the displayed masked text. @@ -174,7 +174,7 @@ documentation: ug Value - object + object Contains the Masked Entry's input value and can be assigned to populate the control programmatically. Its treatment of prompt characters and literals is controlled by ValueMaskFormat for a Simple mask. @@ -184,7 +184,7 @@ documentation: ug VerticalTextAlignment - TextAlignment + TextAlignment Aligns the masked text vertically at the Start, Center, or End of the input field. @@ -199,12 +199,12 @@ documentation: ug Focus() - void + void Moves keyboard focus to the Masked Entry and opens the applicable software keyboard. If the control cannot receive focus, its focus state remains unchanged. Unfocus() - void + void Removes keyboard focus from the Masked Entry, which can initiate LostFocus validation and hide prompt characters when configured. @@ -219,22 +219,22 @@ documentation: ug ClearButtonClicked - EventHandler + EventHandler Triggered when the user activates the clear button after it clears the Masked Entry's input. Completed - EventHandler + EventHandler Triggered when the user presses the physical or software keyboard's Return key to finish entering a value. ValueChanged - EventHandler<MaskedEntryValueChangedEventArgs> + EventHandler<MaskedEntryValueChangedEventArgs> Triggered after the Masked Entry's value changes and provides the previous value, new value, and whether all required mask positions are filled. ValueChanging - EventHandler<MaskedEntryValueChangingEventArgs> + EventHandler<MaskedEntryValueChangingEventArgs> Triggered before the value changes and provides the previous and proposed values. The pending change can be canceled, and its validation result can be supplied through IsValid. diff --git a/MAUI/NumericEntry/Basic-Features.md b/MAUI/NumericEntry/Basic-Features.md index e877ce3cd0..bfde4c4426 100644 --- a/MAUI/NumericEntry/Basic-Features.md +++ b/MAUI/NumericEntry/Basic-Features.md @@ -232,7 +232,7 @@ The `Completed` event can be handled in C# as follows: private async void numericEntry_Completed(object sender, EventArgs e) { - await DisplayAlertAsync("Message", "Text entering Completed", "OK"); + await DisplayAlert("Message", "Text entering Completed", "OK"); } {% endhighlight %} @@ -272,7 +272,7 @@ The `ClearButtonClicked` event can be handled in C# as follows: private async void numericEntry_ClearButtonClicked(object sender, EventArgs e) { - await DisplayAlertAsync("Message", "Clear Button Clicked", "OK"); + await DisplayAlert("Message", "Clear Button Clicked", "OK"); } {% endhighlight %} @@ -497,7 +497,7 @@ public class CommandDemoViewModel private async void OnAlertCommandExecuted(string parameter) { - await Shell.Current.DisplayAlertAsync("Alert", parameter, "OK"); + await Shell.Current.DisplayAlert("Alert", parameter, "OK"); } } diff --git a/MAUI/NumericEntry/VisualStates.md b/MAUI/NumericEntry/VisualStates.md deleted file mode 100644 index 5d5b20fd40..0000000000 --- a/MAUI/NumericEntry/VisualStates.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -layout: post -title: Visual states in .NET MAUI Numeric Entry | Syncfusion® -description: Learn about visual states support in the Syncfusion® .NET MAUI Numeric Entry control and how to customize each state -platform: maui -control: SfNumericEntry -documentation: ug ---- - -# Visual States in .NET MAUI Numeric Entry - -Visual states let you change the appearance of [.NET MAUI Numeric Entry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfNumericEntry.html) in response to user interaction. Use them to apply different colors, borders, or other properties for each state without writing code-behind handlers. - -`Numeric Entry` supports the following visual states through the [`VisualStateManager`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-10.0): - -* `Normal` - The default resting state of the Numeric Entry. -* `Focused` - The Numeric Entry has keyboard or input focus. -* `Disabled` - The Numeric Entry is disabled (`IsEnabled` is `false`). -* `Hover` - The pointer is over the Numeric Entry (desktop platforms). - -## Prerequisites - -Before using the [SfNumericEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfNumericEntry.html), ensure the following NuGet package is installed in your .NET MAUI project: - -- `Syncfusion.Maui.Inputs` - -For a step-by-step setup, refer to the [Getting Started](https://help.syncfusion.com/maui/numericentry/getting-started) documentation. - -## Defining visual states - -`SfNumericEntry` exposes its visual states through a single `VisualStateGroup` named `CommonStates`. Each `VisualState` contains a collection of `Setter` objects that target bindable properties on the Numeric Entry. Commonly customized properties include `Stroke`, `TextColor`, `ClearButtonColor`, and `UpDownButtonColor`. - -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -SfNumericEntry numericEntry = new SfNumericEntry -{ - WidthRequest = 250, - HeightRequest = 50, - UpDownPlacementMode = UpDownPlacementMode.Inline, - Placeholder = "Enter a value", -}; -VisualStateGroupList visualStateGroupList = new VisualStateGroupList(); -VisualStateGroup commonStateGroup = new VisualStateGroup { Name = "CommonStates" }; - -VisualState normalState = new VisualState { Name = "Normal" }; -normalState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#707070") }); -normalState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); -normalState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#707070") }); -normalState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#707070") }); - -VisualState focusedState = new VisualState { Name = "Focused" }; -focusedState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#f903e9") }); -focusedState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); -focusedState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#f903e9") }); -focusedState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#f903e9") }); - -VisualState pointerOverState = new VisualState { Name = "PointerOver" }; -pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#c372bd") }); -pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); -pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#c372bd") }); -pointerOverState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#c372bd") }); - -VisualState disabledState = new VisualState { Name = "Disabled" }; -disabledState.Setters.Add(new Setter { Property = SfNumericEntry.StrokeProperty, Value = Color.FromArgb("#BDBDBD") }); -disabledState.Setters.Add(new Setter { Property = SfNumericEntry.TextColorProperty, Value = Colors.Black }); -disabledState.Setters.Add(new Setter { Property = SfNumericEntry.ClearButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); -disabledState.Setters.Add(new Setter { Property = SfNumericEntry.UpDownButtonColorProperty, Value = Color.FromArgb("#BDBDBD") }); - -commonStateGroup.States.Add(normalState); -commonStateGroup.States.Add(focusedState); -commonStateGroup.States.Add(pointerOverState); -commonStateGroup.States.Add(disabledState); - -visualStateGroupList.Add(commonStateGroup); - -VisualStateManager.SetVisualStateGroups(numericEntry, visualStateGroupList); - -Content = numericEntry; - -{% endhighlight %} -{% endtabs %} - - -### Normal visual state - -![.NET MAUI Numeric Entry in the Normal visual state](VisualStates_images/normal-visual-state-numericentry.png) - -### Hover visual state - -![.NET MAUI Numeric Entry in the Hover visual state](VisualStates_images/hovered-visual-state-numericentry.png) - -### Focused visual state - -![.NET MAUI Numeric Entry in the Focused visual state](VisualStates_images/focused-visual-state-numericentry.png) - -### Disabled visual state - -![.NET MAUI Numeric Entry in the Disabled visual state](VisualStates_images/disabled-visual-state-numericentry.png) - - -## See Also - -* [Basic Features](https://help.syncfusion.com/maui/numericentry/basic-features) -* [Formatting](https://help.syncfusion.com/maui/numericentry/formatting) -* [Restriction](https://help.syncfusion.com/maui/numericentry/restriction) diff --git a/MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/disabled-visual-state-numericentry.png deleted file mode 100644 index eee221418269d90f9f32b3b2263e51ae83fac77a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1759 zcmd5-`BTyf6#t@jkYhQ~I=YsTi&j?VQRYeFnxf_riW`|%lcIRwhHD;(o26}*E3TFY zDQ!cGmZGMqgRWXsqedc}MJwG3Joju>~ z0RTY91L=wa01!=`-`%}a?J=6C4AcQcK)JgBjNXF_>Ou>P@J0YYU7ofwe22OQCm=Bd z0NBgg28fNXxDEh26FpoJ0m>c252o#Whf&ok0V zOH1p{-)c`?ea`!7VO7ZOmZz?Kem$u2Eq64SY|r3{n5ebCVrx%3O{DmdGsQu+^Hqiyk<$xk&cufi`Y_*x#V9Crl&``!B2?9D^o0iFtj!K zlc>!xJGL9XDZaPA)@wPA{Qd|Iq6#3ttfmgLKh2xiW6-%Kuv0j0r=`rYQ}K#p*nTq& z&bB4N*%qtmfLTiuqAQxAWn3VSGhIpYj4MF<#!6IiSr5_Z(3~jo z+S*_$tAfO?84pq(^YZ>^5W$ds941(0Zn|a{%P+3)(4`q_9as1Shgl50>2ovU!H_Rx z?BVl95LiX@#9I;_%yPx|ZKuwdcM4(yGv9Xl+Dxj^@}~JbeyUF*iRSWov6Y zoP2#NXO?N@M`nOgE+5UqiZ@sT-meA+ner&b#bD*fUoG3c&I$tqgp=A&j1f#z@WcjA&A+R3M43yDXys!$(Tk)>Lc=m9>b-88{O}pwA#=%q5+)v)uJ_Bk(4Z*%?;Pjz7%_%)azKbzA-aHqjq8IR-vGd0|<>LTK^;5 a*#h1^C@6BeqS919CBWl?k1N9^Ec0*b3mTmO diff --git a/MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/focused-visual-state-numericentry.png deleted file mode 100644 index aa679b0b48704cb1caca3a1d736f61015df3ae3b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1936 zcmcIleN@s{82&j4v7z>%SW^01_A$4<*hEX6_A4!HiNz7EO!FgBm*PrI!H=LX zz-YO}asU8~+;Of10MKLV)+q?MZY(6`Ht8n4D8hlgKuOCwnU26hAP)!t%IKfZ2QJfb z!yj?Sq5#0SdI@@Uk%gxKz+jWRE94dDKicCN>3eMLi+&u*M2qyB2x(gu&VZx*zD2~i zgrdy84oJSW0hLWkM|`1Py#kI(aq|H$z1s0|{Z4{Ci1{H4FYodQnsYGV-6Ypmp1&tl zaZVPrTCdNqoPJwwFD(ep?IxQ6xPT%G0CYkO0QY|*kOWyE;e&mB_oKNzABLLI)jN^a zvJ{HLkRqeP=aCvD60u3as?Cnsc$u0yI6nSzC$bvn5R`Ls)?sKgLlA6v@+a@hwiao4 zv6ny`nF9yQGAa}`u1(U2GgzFuA=E4qc5yIumg{fBDdvDRA$0HkKvt=aX|oAupzE1q zN~OJtKKqg+nERWLd+{T-QZlUMV;nSbV+?9zo^ydfUgm9=kae*lF=ugYKKnCD+mxXCVP2Y2CAQS)=f=A@Yk zE#YPseS*j)n?%iHnOV_46$*6*m3h26aP*mbwosFYhgb8L64kJn7fW-7^I zej-(?ottia64Htndf}Ie z_Y*A!VId(>Tgzt9%~c+?@(!Y7YHCVW78gFD*<~rUK6o~9{&BTwnXY87%`p}Ub1}OY z=I&GEHwG>s8~Pke>yDHY8b-5?+E1m7byr4_8Itbz@?V`T>1l1IZP$n*W*yxscmFoT zsuQi_>2m{jTHP=#x7!kp+}!WT!I5kuLc)90rId@p3^OK0QucFEPU<0N0rAh~81~kZ>S$yl02!`PUx8!cKv<9O;tj%r}0rS);%YNBp8bo)x^d z)Q^Ee5Uy-0p}%ZeCH54d!3`%=ejV@OOF|+mtLEzseeqi`*S~Cba8Z^O*+$Y%)(U%* ziO)|%RY45NTk5`QN>N^1P8^>qRO&9ZQfwCSVR=}ukUwIW^yV~gip2MZs`fI1M5|vn zzoo?H#Ent)U3m{zZ9LjN{3I_;YaG^jC8_u5kgLFJTat1UE*(L5d__+56b?SW)8?ce zus%hDrE(j#bLAbSCH3q^@??4*K^rabvN}P&vGAN9*CJ|f*#lL9xRtq7{eAP_wLO%J zh)!3*-_@@wKChCCzo<+*Or}Lc3_1N>W-RF$t3E=adpc6Qkv$!3Hf*1ewzeirN8LK= z(X8Pz>m411*rl-l`M<-2L?=6pu=1F-w=;)oW@@FX5h&u{V3mnmaBL@a#Fg4Cz0=*J z??!2MS9M~9M3X8?@CQtp=33n=^qL^o8**P$5zO#zNPx)yNE diff --git a/MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png b/MAUI/NumericEntry/VisualStates_images/hovered-visual-state-numericentry.png deleted file mode 100644 index 8eaf28470dfbe405be9d1848e1fe55a7bf2e01ec..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1806 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 AllowNull - bool + bool Allows the Numeric Entry to hold null after its input is cleared. When disabled, clearing restores 0, or Minimum when the minimum is greater than zero. AutoReverse - bool + bool Wraps incrementing from Maximum to Minimum and decrementing from Minimum to Maximum. Applies to changes made with the spin buttons, supported keys, or mouse wheel. ClearButtonColor - Color + Color Controls the color of the clear button shown when ShowClearButton is enabled. ClearButtonPath - Path + Path Replaces the default clear-button icon with a custom Path. Culture - CultureInfo + CultureInfo Controls how the value is parsed and formatted, including its decimal separator, group separator, currency symbol, and percent symbol. CursorPosition - int + int Controls the insertion cursor's zero-based position within the editable numeric text. CustomFormat - string + string Formats the displayed value with a standard or custom .NET numeric format string, such as C2, P2, N2, or #,0.00. DownButtonTemplate - DataTemplate + DataTemplate Defines the content and appearance of the decrement button when the up-down buttons are visible. Font - Font + Font Provides the effective font assembled from the Numeric Entry's font family, size, and attributes. This property is read-only. FontAttributes - FontAttributes + FontAttributes Applies None, Bold, or Italic styling to the displayed numeric text. FontAutoScalingEnabled - bool + bool Allows the displayed text to follow the user's operating-system text-size preference. FontFamily - string + string Controls the font family used for the displayed numeric text. FontSize - double + double Controls the font size of the displayed numeric text. HorizontalTextAlignment - TextAlignment + TextAlignment Aligns the numeric text horizontally at the Start, Center, or End of the input field. IsEditable - bool + bool Prevents direct text editing while still allowing the value to change through visible spin buttons, arrow keys, Page Up and Page Down, and the mouse wheel. LargeChange - double + double Controls the amount added or subtracted when the user presses Page Up or Page Down. Maximum - double + double Defines the largest accepted value. User-entered values outside the configured range are rejected and the previous value remains unchanged. MaximumNumberDecimalDigits - int + int Limits the number of displayed fractional digits when CustomFormat is not set. The setting must be a positive integer and is ignored when a custom format is applied. Minimum - double + double Defines the smallest accepted value. User-entered values outside the configured range are rejected and the previous value remains unchanged. @@ -119,67 +119,67 @@ documentation: ug Placeholder - string + string Displays supporting text when Value is null or NaN, or after the user clears the input while AllowNull is enabled. PlaceholderColor - Color + Color Controls the color of the placeholder shown when the Numeric Entry has no numeric value. ReturnCommand - ICommand + ICommand Runs when the user presses the physical or software keyboard's Return key. ReturnCommandParameter - object + object Supplies the value passed to ReturnCommand when Return is pressed. ReturnType - ReturnType + ReturnType Changes the action label or icon on the software keyboard's Return key. Supported values are Default, Done, Go, Next, Search, and Send. SelectAllOnFocus - bool + bool Selects all displayed numeric text when the control receives focus, making the complete value ready to be replaced. SelectionLength - int + int Controls how many characters are selected starting from CursorPosition. ShowBorder - bool + bool Shows or hides the border around the Numeric Entry. ShowClearButton - bool + bool Shows or hides the button that clears the current input. Clearing produces null only when AllowNull is enabled; otherwise, the control restores an allowed numeric value. SmallChange - double + double Controls the amount added or subtracted by the spin buttons, arrow keys, or mouse wheel. Stroke - Brush + Brush Controls the border brush when ShowBorder is enabled. TextColor - Color + Color Controls the color of the displayed numeric text. UpButtonTemplate - DataTemplate + DataTemplate Defines the content and appearance of the increment button when the up-down buttons are visible. @@ -189,7 +189,7 @@ documentation: ug UpDownButtonColor - Color + Color Controls the color of the default increment and decrement icons. Custom button templates can define their own colors. @@ -199,12 +199,12 @@ documentation: ug UpDownPlacementMode - UpDownPlacementMode + UpDownPlacementMode Hides the spin buttons with Hidden, displays them horizontally with Inline, or stacks them vertically with InlineVertical. Value - double? + double? Contains the nullable numeric value displayed and edited by the control. Changes trigger ValueChanged after the value is evaluated. @@ -214,7 +214,7 @@ documentation: ug VerticalTextAlignment - TextAlignment + TextAlignment Aligns the numeric text vertically at the Start, Center, or End of the input field. @@ -229,12 +229,12 @@ documentation: ug Focus() - void + void Moves keyboard focus to the Numeric Entry and opens the applicable software keyboard when direct editing is available. If the control cannot receive focus, its state remains unchanged. Unfocus() - void + void Removes keyboard focus from the Numeric Entry and commits pending text when ValueChangeMode is OnLostFocus. @@ -249,27 +249,27 @@ documentation: ug ClearButtonClicked - EventHandler + EventHandler Triggered when the user activates the clear button after the Numeric Entry processes the clear action. Completed - EventHandler + EventHandler Triggered when the user presses the physical or software keyboard's Return key to finish entering a value. Focused - EventHandler<FocusEventArgs> + EventHandler<FocusEventArgs> Triggered when the Numeric Entry receives keyboard focus. Unfocused - EventHandler<FocusEventArgs> + EventHandler<FocusEventArgs> Triggered when the Numeric Entry loses keyboard focus, after any applicable focus-loss value evaluation. ValueChanged - EventHandler<NumericEntryValueChangedEventArgs> + EventHandler<NumericEntryValueChangedEventArgs> Triggered after the numeric value changes and provides the previous and new values. User input is evaluated according to ValueChangeMode; Enter, spin-button actions, and focus changes can also commit a value. \ No newline at end of file From 092fe72cb2fd719281d378dd73ef8a1198875e02 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 23 Sep 2026 12:29:36 +0530 Subject: [PATCH 09/12] Reverted editors file path changes --- maui-toc.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/maui-toc.html b/maui-toc.html index 908c8c3e1c..4c3df63e08 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -359,8 +359,6 @@
  • Searching and Filtering
  • No Results Found
  • Maximum display item with Expander
    • -
  • Events
    • -
  • DropDown Customization
  • UI Customization
  • Visual States
  • Liquid Glass support
    • @@ -794,8 +792,6 @@
  • Filtering
  • No Results Found
  • Maximum display item with Expander
    • -
  • Events
    • -
  • DropDown Customization
  • UI Customization
  • Visual States
  • Liquid Glass support
    • @@ -1269,7 +1265,6 @@
  • Validation
  • Events
  • Show Password Character
    • -
  • Visual States
  • Liquid Glass Support
    • @@ -1304,7 +1299,6 @@
  • Formatting
  • Restriction
  • UpDown Button
    • -
  • Visual States
  • Liquid Glass Supoort
    • From 33e495241faa18ddaa838f8c7ca74bebef2b200b Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 23 Sep 2026 18:33:23 +0530 Subject: [PATCH 10/12] Resolved conflict --- maui-toc.html | 3515 +++++++++++++++++++++++++------------------------ 1 file changed, 1786 insertions(+), 1729 deletions(-) diff --git a/maui-toc.html b/maui-toc.html index 4c3df63e08..b52e95b130 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1,77 +1,129 @@ + \ No newline at end of file From 9f5b3d02499c780d23f4227a32d08e71a96dc67d Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Wed, 23 Sep 2026 18:42:04 +0530 Subject: [PATCH 11/12] Commit the changes --- maui-toc.html | 1515 ------------------------------------------------- 1 file changed, 1515 deletions(-) diff --git a/maui-toc.html b/maui-toc.html index 9e88aef68b..b52e95b130 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -196,7 +196,6 @@
  • All Components
    • From 7d1a1f9c902215dcd6c1bcf3b3c8de0cbc70d977 Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Thu, 24 Sep 2026 11:10:20 +0530 Subject: [PATCH 12/12] Updated the changes --- MAUI/Carousel-View/LoadMore.md | 5 ----- MAUI/Rotator/Adding-Looping-and-Delays.md | 12 ++++++++++ MAUI/Rotator/DataTemplateSelector.md | 6 ++++- MAUI/Rotator/Events.md | 6 +++++ MAUI/Rotator/Header-Visibility.md | 3 +++ MAUI/Rotator/Loading-Online-Images.md | 3 +++ MAUI/Rotator/Navigation-Customization.md | 27 +++++++++++++++++++++++ MAUI/Rotator/Navigation-Modes.md | 9 ++++++++ MAUI/Rotator/Placement-Modes.md | 3 +++ MAUI/Rotator/Sliding-Direction.md | 3 +++ 10 files changed, 71 insertions(+), 6 deletions(-) diff --git a/MAUI/Carousel-View/LoadMore.md b/MAUI/Carousel-View/LoadMore.md index 502d380cbd..48b4a865e0 100644 --- a/MAUI/Carousel-View/LoadMore.md +++ b/MAUI/Carousel-View/LoadMore.md @@ -336,8 +336,6 @@ The following image shows the custom LoadMore view rendered after the last carou Call the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMore) method to load the next set of items programmatically. The number of items loaded is determined by `LoadMoreItemsCount`. -### XAML - {% tabs %} {% highlight xaml %} @@ -361,9 +359,6 @@ Call the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel {% endhighlight %} - -### C# - {% highlight C# %} CarouselViewModel carouselViewModel = new CarouselViewModel(); diff --git a/MAUI/Rotator/Adding-Looping-and-Delays.md b/MAUI/Rotator/Adding-Looping-and-Delays.md index f805f09b6b..1c846e5f68 100644 --- a/MAUI/Rotator/Adding-Looping-and-Delays.md +++ b/MAUI/Rotator/Adding-Looping-and-Delays.md @@ -51,6 +51,9 @@ N> By default, the `EnableAutoPlay` value is set to `false`. + + + {% endhighlight %} @@ -141,6 +144,9 @@ N> The property value should be in milliseconds. If `EnableAutoPlay` is `false`, + + + {% endhighlight %} @@ -234,6 +240,9 @@ N> By default, the `EnableLooping` is set to `false`. + + + {% endhighlight %} @@ -322,6 +331,9 @@ To restrict the user interaction, the [`EnableSwiping`](https://help.syncfusion. + + + {% endhighlight %} diff --git a/MAUI/Rotator/DataTemplateSelector.md b/MAUI/Rotator/DataTemplateSelector.md index b9b5c4b13e..0612d8a775 100644 --- a/MAUI/Rotator/DataTemplateSelector.md +++ b/MAUI/Rotator/DataTemplateSelector.md @@ -76,8 +76,12 @@ The following examples show how to apply the `DataTemplateViewModel` selector to + + + - + diff --git a/MAUI/Rotator/Events.md b/MAUI/Rotator/Events.md index 946cf66c92..52fc08e2c2 100644 --- a/MAUI/Rotator/Events.md +++ b/MAUI/Rotator/Events.md @@ -38,6 +38,9 @@ The [`SelectedIndexChanged`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui + + + {% endhighlight %} @@ -132,6 +135,9 @@ The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.S + + + {% endhighlight %} diff --git a/MAUI/Rotator/Header-Visibility.md b/MAUI/Rotator/Header-Visibility.md index 6266426d84..5dcb8c09d9 100644 --- a/MAUI/Rotator/Header-Visibility.md +++ b/MAUI/Rotator/Header-Visibility.md @@ -40,6 +40,9 @@ To display the header text, set `IsTextVisible` to `true` and populate the `Item + + + {% endhighlight %} diff --git a/MAUI/Rotator/Loading-Online-Images.md b/MAUI/Rotator/Loading-Online-Images.md index f35029b804..991039b518 100644 --- a/MAUI/Rotator/Loading-Online-Images.md +++ b/MAUI/Rotator/Loading-Online-Images.md @@ -35,6 +35,9 @@ Bind the `RotatorViewModel.ImageCollection` to the [`ItemsSource`](https://help. + + + {% endhighlight %} diff --git a/MAUI/Rotator/Navigation-Customization.md b/MAUI/Rotator/Navigation-Customization.md index 9bb8e87800..310a027533 100644 --- a/MAUI/Rotator/Navigation-Customization.md +++ b/MAUI/Rotator/Navigation-Customization.md @@ -67,6 +67,9 @@ The [`DotsStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.S + + + {% endhighlight %} @@ -158,6 +161,9 @@ The [`SelectedDotColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rot + + + {% endhighlight %} @@ -251,6 +257,9 @@ The [`UnselectedDotColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.R + + + {% endhighlight %} @@ -349,6 +358,9 @@ The [`SelectedThumbnailStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.M + + + {% endhighlight %} @@ -443,6 +455,9 @@ The [`UnselectedThumbnailStroke`](https://help.syncfusion.com/cr/maui/Syncfusion + + + {% endhighlight %} @@ -536,6 +551,9 @@ The [`NavigationStripPosition`](https://help.syncfusion.com/cr/maui/Syncfusion.M + + + @@ -632,6 +650,9 @@ The [`NavigationButtonIconColor`](https://help.syncfusion.com/cr/maui/Syncfusion + + + {% endhighlight %} @@ -724,6 +745,9 @@ The [`NavigationButtonBackgroundColor`](https://help.syncfusion.com/cr/maui/Sync + + + @@ -817,6 +841,9 @@ Use the [`ShowNavigationButton`](https://help.syncfusion.com/cr/maui/Syncfusion. + + + {% endhighlight %} diff --git a/MAUI/Rotator/Navigation-Modes.md b/MAUI/Rotator/Navigation-Modes.md index a774ae04d5..8f628484d2 100644 --- a/MAUI/Rotator/Navigation-Modes.md +++ b/MAUI/Rotator/Navigation-Modes.md @@ -55,6 +55,9 @@ When the strip mode is `Thumbnail`, each slider item is loaded as a thumbnail pr + + + {% endhighlight %} @@ -142,6 +145,9 @@ When the strip mode is `Dots`, each slider item is represented by a small dot. W + + + {% endhighlight %} @@ -241,6 +247,9 @@ The following example sets the position to `Top`. + + + diff --git a/MAUI/Rotator/Placement-Modes.md b/MAUI/Rotator/Placement-Modes.md index 48538262e9..1c862ed502 100644 --- a/MAUI/Rotator/Placement-Modes.md +++ b/MAUI/Rotator/Placement-Modes.md @@ -47,6 +47,9 @@ The `DotPlacement` property controls where the dots are rendered for the rotator + + + {% endhighlight %} diff --git a/MAUI/Rotator/Sliding-Direction.md b/MAUI/Rotator/Sliding-Direction.md index 9f5ecea6fe..ad22d1e3da 100644 --- a/MAUI/Rotator/Sliding-Direction.md +++ b/MAUI/Rotator/Sliding-Direction.md @@ -45,6 +45,9 @@ Use the [`NavigationDirection`](https://help.syncfusion.com/cr/maui/Syncfusion.M + + + {% endhighlight %}