Skip to content

[Hotfix] 930424 - Revamp the UG documentation of .NET MAUI SfComboBox #3077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: hotfix/hotfix-v28.2.3
Choose a base branch
from
Open

[Hotfix] 930424 - Revamp the UG documentation of .NET MAUI SfComboBox #3077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
920ea9d
Revamp SfComboBox
Hemalatha-SF4675 Feb 17, 2025
5f350b3
Revert unwanted changes
Hemalatha-SF4675 Feb 17, 2025
2c960e4
update trade mark symbol
Hemalatha-SF4675 Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions MAUI/ComboBox/AutoSizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.

<editors:SfComboBox x:Name="comboBox"
WidthRequest="350"
HeightRequest="40"
ItemsSource="{Binding SocialMedias}"
SelectionMode="Multiple"
MaxDropDownHeight="250"
Expand All @@ -29,6 +30,26 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
EnableAutoSize="True" />

{% endhighlight %}

{% highlight c# %}

SocialMediaViewModel socialMediaViewModel= new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox()
{
WidthRequest= 350,
HeightRequest=40,
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)
Expand Down
43 changes: 37 additions & 6 deletions MAUI/ComboBox/Editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ In the editable mode, the [ComboBox](https://help.syncfusion.com/cr/maui/Syncfus
{% highlight XAML %}

<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
WidthRequest="350"
HeightRequest = "40"
IsEditable="true"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
Expand All @@ -31,7 +32,16 @@ In the editable mode, the [ComboBox](https://help.syncfusion.com/cr/maui/Syncfus

{% highlight C# %}

comboBox.IsEditable = true;
SocialMediaViewModel socialMediaViewModel= new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 350,
HeightRequest = 40,
IsEditable = true,
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -48,7 +58,8 @@ Non-editable mode prevents users from editing and instead allows them to select
{% highlight XAML %}

<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
WidthRequest="350"
HeightRequest="40"
IsEditable="false"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
Expand All @@ -59,7 +70,16 @@ Non-editable mode prevents users from editing and instead allows them to select

{% highlight C# %}

comboBox.IsEditable = false;
SocialMediaViewModel socialMediaViewModel= new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 350,
HeightRequest = 40,
IsEditable = false,
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -76,7 +96,8 @@ By default, the clear button `X` will be displayed in the editor of the ComboBox
{% highlight XAML %}

<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
WidthRequest="350"
HeightRequest="40"
IsEditable="true"
IsClearButtonVisible="false"
ItemsSource="{Binding SocialMedias}"
Expand All @@ -88,7 +109,17 @@ By default, the clear button `X` will be displayed in the editor of the ComboBox

{% highlight C# %}

comboBox.IsClearButtonVisible = false;
SocialMediaViewModel socialMediaViewModel= new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 350,
HeightRequest = 40,
IsEditable = true,
IsClearButtonVisible = false,
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
};

{% endhighlight %}
{% endtabs %}
Expand Down
42 changes: 12 additions & 30 deletions MAUI/ComboBox/Filtering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,17 @@ public class CityViewModel
using Syncfusion.Maui.Inputs;

CityViewModel cityViewModel = new CityViewModel();
StackLayout stack = new StackLayout();
SfComboBox comboBox;
comboBox = new SfComboBox
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 200,
HeightRequest = 50,
WidthRequest = 350,
HeightRequest = 40,
IsEditable = true,
IsFilteringEnabled = true,
ItemsSource = cityViewModel.Cities,
TextMemberPath = "Name",
DisplayMemberPath = "Name",
BindingContext = cityViewModel
};
stack.Children.Add(comboBox);
this.Content = stack;

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -133,15 +129,11 @@ Filter the matching items based on the starting text and the first filtered item
{% endhighlight %}
{% highlight C# %}

using Syncfusion.Maui.Inputs;

CityViewModel cityViewModel = new CityViewModel();
StackLayout stack = new StackLayout();
SfComboBox comboBox;
comboBox = new SfComboBox
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 200,
HeightRequest = 50,
WidthRequest = 350,
HeightRequest = 40,
TextSearchMode = ComboBoxTextSearchMode.StartsWith,
IsEditable = true,
IsFilteringEnabled = true,
Expand All @@ -150,8 +142,6 @@ comboBox = new SfComboBox
DisplayMemberPath = "Name",
BindingContext = cityViewModel
};
stack.Children.Add(comboBox);
this.Content = stack;

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -181,12 +171,10 @@ Filter the matching items that contain specific text, and the first filtered ite
using Syncfusion.Maui.Inputs;

CityViewModel cityViewModel = new CityViewModel();
StackLayout stack = new StackLayout();
SfComboBox comboBox;
comboBox = new SfComboBox
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 200,
HeightRequest = 50,
WidthRequest = 350,
HeightRequest = 40,
TextSearchMode = ComboBoxTextSearchMode.Contains,
IsEditable = true,
IsFilteringEnabled = true,
Expand All @@ -195,8 +183,6 @@ comboBox = new SfComboBox
DisplayMemberPath = "Name",
BindingContext = cityViewModel
};
stack.Children.Add(comboBox);
this.Content = stack;

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -281,12 +267,10 @@ public class CityFilteringBehavior : IComboBoxFilterBehavior

CityViewModel cityViewModel = new CityViewModel();
CityFilteringBehavior cityFilteringBehavior = new CityFilteringBehavior();
StackLayout stack = new StackLayout();
SfComboBox comboBox;
comboBox = new SfComboBox
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 200,
HeightRequest = 50,
WidthRequest = 350,
HeightRequest = 40,
IsEditable = true,
FilterBehavior = cityFilteringBehavior,
IsFilteringEnabled = true,
Expand All @@ -295,8 +279,6 @@ comboBox = new SfComboBox
DisplayMemberPath = "CityName",
BindingContext = cityViewModel
};
stack.Children.Add(comboBox);
this.Content = stack;

{% endhighlight %}
{% endtabs %}
Expand Down
54 changes: 31 additions & 23 deletions MAUI/ComboBox/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,8 +410,8 @@ Now, populate this SocialMediaViewModel data in [ComboBox](https://help.syncfusi
<ContentPage.Content>
<!--Setting ItemsSource-->
<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
HeightRequest="50"
WidthRequest="350"
HeightRequest="40"
ItemsSource="{Binding SocialMedias}" />
</ContentPage.Content>
</ContentPage>
Expand All @@ -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 = 40,
ItemsSource = socialMediaViewModel.SocialMedias,
};
Content = comboBox;

{% endhighlight %}
Expand All @@ -446,21 +448,24 @@ The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComb
{% highlight xaml %}

<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
HeightRequest = "50"
WidthRequest="350"
HeightRequest = "40"
DisplayMemberPath = "Name"
TextMemberPath = "Name"
ItemsSource="{Binding SocialMedias}" />

{% endhighlight %}
{% highlight C# %}

SfComboBox comboBox = new SfComboBox();
comboBox.WidthRequest = 250;
comboBox.HeightRequest = 50;
comboBox.DisplayMemberPath = "Name";
comboBox.TextMemberPath = "Name";
comboBox.ItemsSource = socialMediaViewModel.SocialMedias;
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 350,
HeightRequest = 40,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
ItemsSource = socialMediaViewModel.SocialMedias,
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -477,8 +482,8 @@ The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComb
{% highlight XAML %}

<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
HeightRequest="50"
WidthRequest="350"
HeightRequest="40"
IsEditable="true"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
Expand All @@ -489,13 +494,16 @@ The [ComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComb

{% highlight C# %}

SfComboBox comboBox = new SfComboBox();
comboBox.WidthRequest = 250;
comboBox.HeightRequest = 50;
comboBox.IsEditable = true;
comboBox.ItemsSource = socialMediaViewModel.SocialMedias;
comboBox.DisplayMemberPath = "Name";
comboBox.TextMemberPath = "Name";
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
SfComboBox comboBox = new SfComboBox
{
WidthRequest = 350,
HeightRequest = 40,
IsEditable = true,
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
};

{% endhighlight %}
{% endtabs %}
Expand Down
Loading