Skip to content

[Hotfix] 930424 - Revamp the UG documentation of .NET MAUI SfAutocomplete #3261

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

Merged
merged 4 commits into from
May 10, 2025
Merged

[Hotfix] 930424 - Revamp the UG documentation of .NET MAUI SfAutocomplete #3261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d691396
Revamp the UG documentation of .NET MAUI SfAutocomplete
Hemalatha-SF4675 May 2, 2025
e9bd61f
Update the review changes
Hemalatha-SF4675 May 6, 2025
e10b5f7
Revert unwanted changes
Hemalatha-SF4675 May 6, 2025
c8e52b9
update the review changes
Hemalatha-SF4675 May 6, 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
18 changes: 17 additions & 1 deletion MAUI/Autocomplete/AutoSizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="350"
ItemsSource="{Binding SocialMedias}"
SelectionMode="Multiple"
MaxDropDownHeight="250"
Expand All @@ -28,6 +27,23 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
EnableAutoSize="True" />

{% endhighlight %}

{% highlight C# %}

SfAutocomplete autocomplete = new SfAutocomplete()
{
ItemsSource = socialMediaViewModel.SocialMedias,
SelectionMode = AutocompleteSelectionMode.Multiple,
MaxDropDownHeight = 250,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
Placeholder = "Enter Media",
TokensWrapMode = AutocompleteTokensWrapMode.Wrap,
EnableAutoSize = true
};

{% endhighlight %}

{% endtabs %}

![.NET MAUI Autocomplete AutoSize.](Images/AutoSizing/net-maui-autocomplete-autosize.png)
Expand Down
11 changes: 7 additions & 4 deletions MAUI/Autocomplete/Basic-Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,19 @@ The [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="250"
DisplayMemberPath = "Name"
TextMemberPath = "Name"
ItemsSource="{Binding SocialMedias}" />

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

autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";
SfAutocomplete autocomplete = new SfAutocomplete()
{
DisplayMemberPath = "Name",
TextMemberPath = "Name",
ItemsSource = socialMediaViewModel.SocialMedias,
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -37,4 +40,4 @@ The following image illustrates the output:

## Text

The [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Text) property is used to get the user-submitted text in the [SfAutoComplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html). The default value of the `Text` property is `string.Empty`.
The [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_Text) property is used to get the user-submitted text in the [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html). The default value of the `Text` property is `string.Empty`.
26 changes: 15 additions & 11 deletions MAUI/Autocomplete/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,11 +409,12 @@ Now, populate this 'SocialMediaViewModel' data in the [Autocomplete](https://hel

SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
this.BindingContext = socialMediaViewModel;
SfAutocomplete autocomplete = new SfAutocomplete();
autocomplete.WidthRequest = 250;
autocomplete.HeightRequest = 50;
autocomplete.ItemsSource = socialMediaViewModel.SocialMedias;
Content = autocomplete;
SfAutocomplete autocomplete = new SfAutocomplete()
{
WidthRequest = 250,
HeightRequest = 50,
ItemsSource = socialMediaViewModel.SocialMedias,
};

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -441,12 +442,15 @@ The [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui
{% endhighlight %}
{% highlight C# %}

SfAutocomplete autocomplete = new SfAutocomplete();
autocomplete.WidthRequest = 250;
autocomplete.HeightRequest = 50;
autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";
autocomplete.ItemsSource = socialMediaViewModel.SocialMedias;
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
SfAutocomplete autocomplete = new SfAutocomplete()
{
WidthRequest = 250,
HeightRequest = 50,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
ItemsSource = socialMediaViewModel.SocialMedias,
};

{% endhighlight %}
{% endtabs %}
Expand Down
36 changes: 16 additions & 20 deletions MAUI/Autocomplete/Header-and-Footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,11 @@ We can provide Header Content at the top of the Autocomplete's dropdown.[DropDow
<StackLayout VerticalOptions="Start"
HorizontalOptions="Start"
Padding="30">
<autocomplete:SfAutocomplete HeightRequest="40"
ShowDropdownHeaderView ="True"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
DropdownHeaderViewHeight="50">
<autocomplete:SfAutocomplete.DropDownHeaderView>
<editors:SfAutocomplete ShowDropdownHeaderView ="True"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
DropdownHeaderViewHeight="50">
<editors:SfAutocomplete.DropdownHeaderView>
<StackLayout BackgroundColor="#f0f0f0" >
<Label x:Name="SearchLabel"
FontSize="20"
Expand All @@ -47,8 +46,8 @@ We can provide Header Content at the top of the Autocomplete's dropdown.[DropDow
VerticalOptions="Center"
TextColor="#006bcd" />
</StackLayout>
</autocomplete:SfAutocomplete.DropDownHeaderView>
</autocomplete:SfAutocomplete>
</editors:SfAutocomplete.DropdownHeaderView>
</editors:SfAutocomplete>
</StackLayout>
</ContentPage>

Expand Down Expand Up @@ -76,7 +75,6 @@ namespace AutocompleteSample

SfAutocomplete autoComplete = new SfAutocomplete
{
HeightRequest = 40,
ShowDropdownHeaderView = true,
ItemsSource = new List<string> { "Facebook", "Twitter", "Instagram", "LinkedIn" },
DropdownHeaderViewHeight = 50
Expand All @@ -96,7 +94,7 @@ namespace AutocompleteSample
TextColor = Color.FromHex("#006bcd")
};
dropDownHeaderView.Children.Add(searchLabel);
autoComplete.DropDownHeaderView = dropDownHeaderView;
autoComplete.DropdownHeaderView = dropDownHeaderView;
stackLayout.Children.Add(autoComplete);
Content = stackLayout;
}
Expand Down Expand Up @@ -133,12 +131,11 @@ The following code example illustrate how to set Footer content in [SfAutocomple
<StackLayout VerticalOptions="Start"
HorizontalOptions="Start"
Padding="30">
<autocomplete:SfAutocomplete HeightRequest="40"
ShowDropdownFooterView ="True"
ItemsSource = "{Binding SocialMedias}"
DisplayMemberPath="Name"
DropdownFooterViewHeight="50">
<autocomplete:SfAutocomplete.DropDownFooterView>
<editors:SfAutocomplete ShowDropdownFooterView ="True"
ItemsSource = "{Binding SocialMedias}"
DisplayMemberPath="Name"
DropdownFooterViewHeight="50">
<editors:SfAutocomplete.DropdownFooterView>
<StackLayout BackgroundColor="#f0f0f0" >
<Label Text="Add New"
FontSize="20"
Expand All @@ -147,8 +144,8 @@ The following code example illustrate how to set Footer content in [SfAutocomple
VerticalOptions="Center"
TextColor="#006bcd" />
</StackLayout>
</autocomplete:SfAutocomplete.DropDownFooterView>
</autocomplete:SfAutocomplete>
</editors:SfAutocomplete.DropdownFooterView>
</editors:SfAutocomplete>
</StackLayout>
</ContentPage>

Expand All @@ -175,7 +172,6 @@ namespace AutocompleteSample

SfAutocomplete autoComplete = new SfAutocomplete()
{
HeightRequest = 40,
ShowDropdownFooterView = true,
ItemsSource = new List<string> { "Facebook", "Twitter", "Instagram", "LinkedIn" },
DropdownFooterViewHeight = 50,
Expand All @@ -197,7 +193,7 @@ namespace AutocompleteSample
};

layout.Children.Add(SearchLabel);
autoComplete.DropDownFooterView = layout;
autoComplete.DropdownFooterView = layout;
stackLayout.Children.Add(autoComplete);
this.Content = stackLayout;
}
Expand Down
44 changes: 23 additions & 21 deletions MAUI/Autocomplete/Highlighting-matched-text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ It highlights the first position of the matching characters in the suggestion li
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
HeightRequest = "40"
WidthRequest="300"
DisplayMemberPath = "Name"
TextMemberPath = "Name"
ItemsSource="{Binding SocialMedias}"
TextHighlightMode="FirstOccurrence"
HighlightedTextColor="Red"
Expand All @@ -43,14 +43,15 @@ It highlights the first position of the matching characters in the suggestion li

{% highlight c# %}

SfAutocomplete autoComplete = new SfAutocomplete()
{
HeightRequest = 40,
WidthRequest=300,
TextHighlightMode = OccurrenceMode.FirstOccurrence,
HighlightedTextColor = Colors.Red,
HighlightedTextFontAttributes = FontAttributes.Bold,
};
SfAutocomplete autocomplete = new SfAutocomplete()
{
DisplayMemberPath = "Name",
TextMemberPath = "Name",
ItemsSource = socialMediaViewModel.SocialMedias,
TextHighlightMode = OccurrenceMode.FirstOccurrence,
HighlightedTextColor = Colors.Red,
HighlightedTextFontAttributes = FontAttributes.Bold,
};

{% endhighlight %}

Expand All @@ -67,8 +68,8 @@ It highlights the matching character that are present everywhere in the suggesti
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
HeightRequest = "40"
WidthRequest="300"
DisplayMemberPath = "Name"
TextMemberPath = "Name"
ItemsSource="{Binding SocialMedias}"
TextHighlightMode="MultipleOccurrence"
HighlightedTextColor="Red"
Expand All @@ -79,15 +80,16 @@ It highlights the matching character that are present everywhere in the suggesti

{% highlight c# %}

SfAutocomplete autoComplete = new SfAutocomplete()
{
HeightRequest = 40,
WidthRequest=300,
TextSearchMode = AutocompleteTextSearchMode.Contains,
TextHighlightMode = OccurrenceMode.MultipleOccurrence,
HighlightedTextColor = Colors.Red,
HighlightedTextFontAttributes = FontAttributes.Bold,
};
SfAutocomplete autocomplete = new SfAutocomplete()
{
DisplayMemberPath = "Name",
TextMemberPath = "Name",
ItemsSource = socialMediaViewModel.SocialMedias,
TextHighlightMode = OccurrenceMode.MultipleOccurrence,
HighlightedTextColor = Colors.Red,
HighlightedTextFontAttributes = FontAttributes.Bold,
TextSearchMode = AutocompleteTextSearchMode.Contains,
};

{% endhighlight %}

Expand Down
Binary file modified MAUI/Autocomplete/Images/UICustomization/TemplateSelector.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 30 additions & 10 deletions MAUI/Autocomplete/Maximum-display-item-with-Expander.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ Restrict the number of suggestions displayed and have the remaining items loaded
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="250"
ItemsSource="{Binding SocialMedias}"
MaximumSuggestion="2"
DisplayMemberPath="Name"
Expand All @@ -25,7 +24,13 @@ Restrict the number of suggestions displayed and have the remaining items loaded

{% highlight C# %}

autocomplete.MaximumSuggestion = 2;
SfAutocomplete autocomplete = new SfAutocomplete()
{
ItemsSource = socialMediaViewModel.SocialMedias,
MaximumSuggestion = 2,
DisplayMemberPath = "Name",
TextMemberPath = "Name"
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -42,7 +47,6 @@ The LoadMore support provides [LoadMoreText](https://help.syncfusion.com/cr/maui
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="250"
ItemsSource="{Binding SocialMedias}"
MaximumSuggestion="2"
LoadMoreText="Load more items"
Expand All @@ -53,8 +57,14 @@ The LoadMore support provides [LoadMoreText](https://help.syncfusion.com/cr/maui

{% highlight C# %}

autocomplete.MaximumSuggestion = 2;
autocomplete.LoadMoreText= "Load more items";
SfAutocomplete autocomplete = new SfAutocomplete()
{
ItemsSource = socialMediaViewModel.SocialMedias,
MaximumSuggestion = 2,
LoadMoreText= "Load more items"
DisplayMemberPath = "Name",
TextMemberPath = "Name",
};

{% endhighlight %}
{% endtabs %}
Expand All @@ -71,7 +81,6 @@ SfAutocomplete allows customizing User Interface(UI) of Load More view. To custo
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="250"
ItemsSource="{Binding SocialMedias}"
MaximumSuggestion="2"
DisplayMemberPath="Name"
Expand All @@ -89,7 +98,13 @@ SfAutocomplete allows customizing User Interface(UI) of Load More view. To custo

{% highlight C# %}

autocomplete.MaximumSuggestion = 2;
SfAutocomplete autocomplete = new SfAutocomplete()
{
DisplayMemberPath = "Name",
TextMemberPath = "Name",
MaximumSuggestion = 2,
ItemsSource = socialMediaViewModel.SocialMedias
};
autocomplete.LoadMoreTemplate = new DataTemplate(() =>
{
var grid = new Grid();
Expand Down Expand Up @@ -119,7 +134,6 @@ The LoadMore support provides [LoadMoreButtonTapped](https://help.syncfusion.com
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
WidthRequest="250"
ItemsSource="{Binding SocialMedias}"
MaximumSuggestion="2"
LoadMoreButtonTapped="autocomplete_LoadMoreButtonTapped"
Expand All @@ -131,12 +145,18 @@ The LoadMore support provides [LoadMoreButtonTapped](https://help.syncfusion.com

{% highlight C# %}

autocomplete.MaximumSuggestion = 2;
SfAutocomplete autocomplete = new SfAutocomplete()
{
DisplayMemberPath = "Name",
TextMemberPath = "Name",
MaximumSuggestion = 2,
ItemsSource = socialMediaViewModel.SocialMedias,
};
autocomplete.LoadMoreButtonTapped += Autocomplete_LoadMoreButtonTapped;

private void Autocomplete_LoadMoreButtonTapped(object? sender, EventArgs e)
{

//Trigger when the Load More Button is Tapped
}

{% endhighlight %}
Expand Down
Loading