From 920ea9db57002ef818a16a01513a1aef78fe232f Mon Sep 17 00:00:00 2001 From: Hemalatha-SF4675 Date: Mon, 17 Feb 2025 10:50:14 +0530 Subject: [PATCH 1/3] Revamp SfComboBox --- MAUI/ComboBox/AutoSizing.md | 25 +- MAUI/ComboBox/Editing.md | 47 +- MAUI/ComboBox/Filtering.md | 38 +- MAUI/ComboBox/Getting-Started.md | 48 +- MAUI/ComboBox/Header-and-Footer.md | 59 ++- MAUI/ComboBox/Highlighting-matched-text.md | 32 +- .../Maximum-display-item-with-Expander.md | 107 +++- MAUI/ComboBox/No-Results-Found.md | 57 +- MAUI/ComboBox/Searching.md | 64 ++- MAUI/ComboBox/Selection.md | 67 ++- MAUI/ComboBox/UI-Customization.md | 494 +++++++++++++----- 11 files changed, 760 insertions(+), 278 deletions(-) diff --git a/MAUI/ComboBox/AutoSizing.md b/MAUI/ComboBox/AutoSizing.md index 41f158ddf6..5586f2532e 100644 --- a/MAUI/ComboBox/AutoSizing.md +++ b/MAUI/ComboBox/AutoSizing.md @@ -1,7 +1,7 @@ --- layout: post -title: AutoSizing in .NET MAUI ComboBox control | Syncfusion® -description: Learn about auto sizing support in Syncfusion® .NET MAUI ComboBox (SfComboBox) control and more here. +title: AutoSizing in .NET MAUI ComboBox control | Syncfusion® +description: Learn about auto sizing support in Syncfusion® .NET MAUI ComboBox (SfComboBox) control and more here. platform: maui control: SfComboBox documentation: ug @@ -19,6 +19,7 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs. {% endhighlight %} + +{% highlight c# %} + +SocialMediaViewModel socialMediaViewModel= new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox() +{ + WidthRequest= 350, + HeightRequest=50, + ItemsSource = socialMediaViewModel.SocialMedias, + TokensWrapMode=ComboBoxTokensWrapMode.Wrap, + Placeholder="Enter Media", + SelectionMode=ComboBoxSelectionMode.Multiple, + EnableAutoSize = true, + MaxDropDownHeight = 250, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; + +{% endhighlight %} + {% endtabs %} ![.NET MAUI ComboBox AutoSize.](Images/AutoSizing/net-maui-combobox-autosize.png) diff --git a/MAUI/ComboBox/Editing.md b/MAUI/ComboBox/Editing.md index 6b6361402e..ab7146be67 100644 --- a/MAUI/ComboBox/Editing.md +++ b/MAUI/ComboBox/Editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Editing in .NET MAUI ComboBox control | Syncfusion® -description: Learn all about Editable modes support in Syncfusion® .NET MAUI ComboBox (SfComboBox) control and more here. +title: Editing in .NET MAUI ComboBox control | Syncfusion +description: Learn all about Editable modes support in Syncfusion .NET MAUI ComboBox (SfComboBox) control and more here. platform: maui control: SfComboBox documentation: ug @@ -20,7 +20,8 @@ In the editable mode, the [ComboBox](https://help.syncfusion.com/cr/maui/Syncfus {% highlight XAML %} @@ -423,10 +423,12 @@ Now, populate this SocialMediaViewModel data in [ComboBox](https://help.syncfusi SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); this.BindingContext = socialMediaViewModel; -SfComboBox comboBox = new SfComboBox(); -comboBox.WidthRequest = 250; -comboBox.HeightRequest = 50; -comboBox.ItemsSource = socialMediaViewModel.SocialMedias; +SfComboBox comboBox = new SfComboBox +{ + WidthRequest = 350, + HeightRequest = 50, + ItemsSource = socialMediaViewModel.SocialMedias, +}; Content = comboBox; {% endhighlight %} @@ -446,7 +448,7 @@ The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComb {% highlight xaml %} - - + + - - - + + @@ -44,23 +44,31 @@ You can provide content for header at the top of the ComboBox's dropdown. The [D SfComboBox comboBox = new SfComboBox() { - HeightRequest = 40, - ShowDropDownHeaderView = true, - ItemsSource = new List { "Facebook", "Twitter", "Instagram", "LinkedIn" }, - DropDownHeaderViewHeight = 50 + HeightRequest = 50, + WidthRequest = 350, + ShowDropdownHeaderView = true, + ItemsSource = socialMediaViewModel.SocialMedias, + IsEditable = true, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + IsFilteringEnabled = true, + DropdownHeaderViewHeight = 50 }; + StackLayout customHeaderView = new StackLayout(); Label label2 = new Label() { FontSize = 20, VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, HorizontalOptions = LayoutOptions.Center, + Text = "Header View", VerticalOptions = LayoutOptions.Center, - TextColor = Color.FromHex("#006bcd") + TextColor = Colors.FromHex("#006bcd") }; - comboBox.DropDownHeaderView = label2; + customHeaderView.Children.Add(label2); + comboBox.DropdownHeaderView = customHeaderView; layout.Children.Add(comboBox); this.Content = layout; @@ -81,13 +89,13 @@ The following code example shows how to set footer content in [SfComboBox](https {% highlight xaml %} - - + + - - + + {% endhighlight %} @@ -103,18 +111,23 @@ The following code example shows how to set footer content in [SfComboBox](https SfComboBox comboBox = new SfComboBox() { - HeightRequest = 40, - ShowDropDownFooterView = true, - ItemsSource = new List { "Facebook", "Twitter", "Instagram", "LinkedIn" }, + HeightRequest = 50, + ShowDropdownFooterView = true, + WidthRequest = 350, + ItemsSource = socialMediaViewModel.SocialMedias, + IsEditable = true, + DisplayMemberPath = "Name", + TextMemberPath = "Name", + IsFilteringEnabled = true, DropDownFooterViewHeight = 50 }; StackLayout customFooterView = new StackLayout(); Label label = new Label() { - Text = "Add New", - BackgroundColor = Color.FromHex("#f0f0f0"), - TextColor = Color.FromHex("#006bcd"), + Text = "Footer View", + BackgroundColor = Colors.FromHex("#f0f0f0"), + TextColor = Colors.FromHex("#006bcd"), VerticalOptions = LayoutOptions.Center, VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, diff --git a/MAUI/ComboBox/Highlighting-matched-text.md b/MAUI/ComboBox/Highlighting-matched-text.md index 78b39411d2..c2a6ae583b 100644 --- a/MAUI/ComboBox/Highlighting-matched-text.md +++ b/MAUI/ComboBox/Highlighting-matched-text.md @@ -1,6 +1,6 @@ --- layout: post -title: Highlighting matched text in .NET MAUI SfComboBox control | Syncfusion® +title: Highlighting matched text in .NET MAUI SfComboBox control | Syncfusion® description: Learn about Highlighting matched text in .NET MAUI SfComboBox (SfComboBox) control and more details. platform: maui control: SfComboBox @@ -32,9 +32,10 @@ It highlights the first position of the matching characters in the suggestion li {% highlight xaml %} + TextMemberPath="Name"/> {% endhighlight %} {% highlight C# %} -comboBox.MaximumSuggestion = 2; +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox() +{ + WidthRequest= 350, + HeightRequest = 50, + MaximumSuggestion = 2, + IsEditable = true, + IsFilteringEnabled = true, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias +}; {% endhighlight %} {% endtabs %} @@ -45,7 +57,8 @@ The LoadMore support provides [LoadMoreText](https://help.syncfusion.com/cr/maui {% highlight xaml %} -{ - var grid = new Grid(); - Label label = new Label(); - label.Text = "Load more items..."; - label.TextColor = Colors.Red; - grid.Background = Colors.LightGreen; - label.HorizontalOptions = LayoutOptions.Center; - label.VerticalOptions = LayoutOptions.Center; - label.FontAttributes = FontAttributes.Bold; - grid.Children.Add(label); - return grid; -}); + SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); + SfComboBox comboBox = new SfComboBox + { + WidthRequest = 350, + HeightRequest = 50, + IsFilteringEnabled = true, + IsEditable = false, + ItemsSource = socialMediaViewModel.SocialMedias, + MaximumSuggestion = 2, + DisplayMemberPath = "Name", + TextMemberPath = "Name" + }; + + comboBox.LoadMoreTemplate = new DataTemplate(() => + { + var grid = new Grid + { + BackgroundColor = Colors.LightGreen + }; + + var label = new Label + { + Text = "Load more items...", + TextColor = Colors.Red, + HorizontalOptions = LayoutOptions.Center, + VerticalOptions = LayoutOptions.Center, + FontAttributes = FontAttributes.Bold + }; + + grid.Children.Add(label); + return grid; + }); {% endhighlight %} {% endtabs %} @@ -127,12 +170,13 @@ The LoadMore support provides [LoadMoreButtonTapped](https://help.syncfusion.com {% highlight xaml %} @@ -141,7 +185,18 @@ The LoadMore support provides [LoadMoreButtonTapped](https://help.syncfusion.com {% highlight C# %} -comboBox.MaximumSuggestion = 2; +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox +{ + WidthRequest = 350, + HeightRequest=50, + IsFilteringEnabled = true, + IsEditable = true, + MaximumSuggestion = 2, + ItemsSource = socialMediaViewModel.SocialMedias, + DisplayMemberPath = "Name", + TextMemberPath = "Name" +}; comboBox.LoadMoreButtonTapped += ComboBox_LoadMoreButtonTapped; private void ComboBox_LoadMoreButtonTapped(object? sender, EventArgs e) diff --git a/MAUI/ComboBox/No-Results-Found.md b/MAUI/ComboBox/No-Results-Found.md index 4d4c3f3680..8336ce26b0 100644 --- a/MAUI/ComboBox/No-Results-Found.md +++ b/MAUI/ComboBox/No-Results-Found.md @@ -1,6 +1,6 @@ --- layout: post -title: No Results Found in ComboBox control | Syncfusion® +title: No Results Found in ComboBox control | Syncfusion description: Learn all about No Results Found support in .NET MAUI ComboBox (SfComboBox) control and more details. platform: maui control: SfComboBox @@ -21,18 +21,30 @@ We can customize the desire text to be displayed for indicating no results found + WidthRequest="350" /> {% endhighlight %} {% highlight c# %} -comboBox.NoResultsFoundText = "Not Found"; +SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel(); +SfComboBox comboBox = new SfComboBox() +{ + WidthRequest= 350, + HeightRequest = 50, + NoResultsFoundText="Not Found", + IsFilteringEnabled = true, + IsEditable = true, + TextMemberPath = "Name", + DisplayMemberPath = "Name", + ItemsSource = socialMediaViewModel.SocialMedias +}; {% endhighlight %} @@ -54,7 +66,8 @@ We can customize the appearance of the desire text to be displayed for indicatin IsFilteringEnabled="True" TextMemberPath="Name" DisplayMemberPath="Name" - WidthRequest="240"> + WidthRequest="350" + HeightRequest="50">