Skip to content

Commit 9b3c6db

Browse files
Choza-rajanChoza-rajan
authored
Merge pull request #3261 from syncfusion-content/Revamping-Autocomplete-hotfix3
[Hotfix] 930424 - Revamp the UG documentation of .NET MAUI SfAutocomplete
2 parents dcb79c1 + c8e52b9 commit 9b3c6db

12 files changed

+573
-291
lines changed

‎MAUI/Autocomplete/AutoSizing.md

+17-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ The [EnableAutoSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
1717
{% highlight xaml %}
1818

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

3029
{% endhighlight %}
30+
31+
{% highlight C# %}
32+
33+
SfAutocomplete autocomplete = new SfAutocomplete()
34+
{
35+
ItemsSource = socialMediaViewModel.SocialMedias,
36+
SelectionMode = AutocompleteSelectionMode.Multiple,
37+
MaxDropDownHeight = 250,
38+
DisplayMemberPath = "Name",
39+
TextMemberPath = "Name",
40+
Placeholder = "Enter Media",
41+
TokensWrapMode = AutocompleteTokensWrapMode.Wrap,
42+
EnableAutoSize = true
43+
};
44+
45+
{% endhighlight %}
46+
3147
{% endtabs %}
3248

3349
![.NET MAUI Autocomplete AutoSize.](Images/AutoSizing/net-maui-autocomplete-autosize.png)

‎MAUI/Autocomplete/Basic-Features.md

+7-4
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,19 @@ The [.NET MAUI Autocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui
1717
{% highlight xaml %}
1818

1919
<editors:SfAutocomplete x:Name="autocomplete"
20-
WidthRequest="250"
2120
DisplayMemberPath = "Name"
2221
TextMemberPath = "Name"
2322
ItemsSource="{Binding SocialMedias}" />
2423

2524
{% endhighlight %}
2625
{% highlight C# %}
2726

28-
autocomplete.DisplayMemberPath = "Name";
29-
autocomplete.TextMemberPath = "Name";
27+
SfAutocomplete autocomplete = new SfAutocomplete()
28+
{
29+
DisplayMemberPath = "Name",
30+
TextMemberPath = "Name",
31+
ItemsSource = socialMediaViewModel.SocialMedias,
32+
};
3033

3134
{% endhighlight %}
3235
{% endtabs %}
@@ -37,4 +40,4 @@ The following image illustrates the output:
3740

3841
## Text
3942

40-
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`.
43+
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`.

‎MAUI/Autocomplete/Getting-Started.md

+15-11
Original file line numberDiff line numberDiff line change
@@ -409,11 +409,12 @@ Now, populate this 'SocialMediaViewModel' data in the [Autocomplete](https://hel
409409

410410
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
411411
this.BindingContext = socialMediaViewModel;
412-
SfAutocomplete autocomplete = new SfAutocomplete();
413-
autocomplete.WidthRequest = 250;
414-
autocomplete.HeightRequest = 50;
415-
autocomplete.ItemsSource = socialMediaViewModel.SocialMedias;
416-
Content = autocomplete;
412+
SfAutocomplete autocomplete = new SfAutocomplete()
413+
{
414+
WidthRequest = 250,
415+
HeightRequest = 50,
416+
ItemsSource = socialMediaViewModel.SocialMedias,
417+
};
417418

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

444-
SfAutocomplete autocomplete = new SfAutocomplete();
445-
autocomplete.WidthRequest = 250;
446-
autocomplete.HeightRequest = 50;
447-
autocomplete.DisplayMemberPath = "Name";
448-
autocomplete.TextMemberPath = "Name";
449-
autocomplete.ItemsSource = socialMediaViewModel.SocialMedias;
445+
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
446+
SfAutocomplete autocomplete = new SfAutocomplete()
447+
{
448+
WidthRequest = 250,
449+
HeightRequest = 50,
450+
DisplayMemberPath = "Name",
451+
TextMemberPath = "Name",
452+
ItemsSource = socialMediaViewModel.SocialMedias,
453+
};
450454

451455
{% endhighlight %}
452456
{% endtabs %}

‎MAUI/Autocomplete/Header-and-Footer.md

+16-20
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,11 @@ We can provide Header Content at the top of the Autocomplete's dropdown.[DropDow
3333
<StackLayout VerticalOptions="Start"
3434
HorizontalOptions="Start"
3535
Padding="30">
36-
<autocomplete:SfAutocomplete HeightRequest="40"
37-
ShowDropdownHeaderView ="True"
38-
ItemsSource="{Binding SocialMedias}"
39-
DisplayMemberPath="Name"
40-
DropdownHeaderViewHeight="50">
41-
<autocomplete:SfAutocomplete.DropDownHeaderView>
36+
<editors:SfAutocomplete ShowDropdownHeaderView ="True"
37+
ItemsSource="{Binding SocialMedias}"
38+
DisplayMemberPath="Name"
39+
DropdownHeaderViewHeight="50">
40+
<editors:SfAutocomplete.DropdownHeaderView>
4241
<StackLayout BackgroundColor="#f0f0f0" >
4342
<Label x:Name="SearchLabel"
4443
FontSize="20"
@@ -47,8 +46,8 @@ We can provide Header Content at the top of the Autocomplete's dropdown.[DropDow
4746
VerticalOptions="Center"
4847
TextColor="#006bcd" />
4948
</StackLayout>
50-
</autocomplete:SfAutocomplete.DropDownHeaderView>
51-
</autocomplete:SfAutocomplete>
49+
</editors:SfAutocomplete.DropdownHeaderView>
50+
</editors:SfAutocomplete>
5251
</StackLayout>
5352
</ContentPage>
5453

@@ -76,7 +75,6 @@ namespace AutocompleteSample
7675

7776
SfAutocomplete autoComplete = new SfAutocomplete
7877
{
79-
HeightRequest = 40,
8078
ShowDropdownHeaderView = true,
8179
ItemsSource = new List<string> { "Facebook", "Twitter", "Instagram", "LinkedIn" },
8280
DropdownHeaderViewHeight = 50
@@ -96,7 +94,7 @@ namespace AutocompleteSample
9694
TextColor = Color.FromHex("#006bcd")
9795
};
9896
dropDownHeaderView.Children.Add(searchLabel);
99-
autoComplete.DropDownHeaderView = dropDownHeaderView;
97+
autoComplete.DropdownHeaderView = dropDownHeaderView;
10098
stackLayout.Children.Add(autoComplete);
10199
Content = stackLayout;
102100
}
@@ -133,12 +131,11 @@ The following code example illustrate how to set Footer content in [SfAutocomple
133131
<StackLayout VerticalOptions="Start"
134132
HorizontalOptions="Start"
135133
Padding="30">
136-
<autocomplete:SfAutocomplete HeightRequest="40"
137-
ShowDropdownFooterView ="True"
138-
ItemsSource = "{Binding SocialMedias}"
139-
DisplayMemberPath="Name"
140-
DropdownFooterViewHeight="50">
141-
<autocomplete:SfAutocomplete.DropDownFooterView>
134+
<editors:SfAutocomplete ShowDropdownFooterView ="True"
135+
ItemsSource = "{Binding SocialMedias}"
136+
DisplayMemberPath="Name"
137+
DropdownFooterViewHeight="50">
138+
<editors:SfAutocomplete.DropdownFooterView>
142139
<StackLayout BackgroundColor="#f0f0f0" >
143140
<Label Text="Add New"
144141
FontSize="20"
@@ -147,8 +144,8 @@ The following code example illustrate how to set Footer content in [SfAutocomple
147144
VerticalOptions="Center"
148145
TextColor="#006bcd" />
149146
</StackLayout>
150-
</autocomplete:SfAutocomplete.DropDownFooterView>
151-
</autocomplete:SfAutocomplete>
147+
</editors:SfAutocomplete.DropdownFooterView>
148+
</editors:SfAutocomplete>
152149
</StackLayout>
153150
</ContentPage>
154151

@@ -175,7 +172,6 @@ namespace AutocompleteSample
175172

176173
SfAutocomplete autoComplete = new SfAutocomplete()
177174
{
178-
HeightRequest = 40,
179175
ShowDropdownFooterView = true,
180176
ItemsSource = new List<string> { "Facebook", "Twitter", "Instagram", "LinkedIn" },
181177
DropdownFooterViewHeight = 50,
@@ -197,7 +193,7 @@ namespace AutocompleteSample
197193
};
198194

199195
layout.Children.Add(SearchLabel);
200-
autoComplete.DropDownFooterView = layout;
196+
autoComplete.DropdownFooterView = layout;
201197
stackLayout.Children.Add(autoComplete);
202198
this.Content = stackLayout;
203199
}

‎MAUI/Autocomplete/Highlighting-matched-text.md

+23-21
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ It highlights the first position of the matching characters in the suggestion li
3232
{% highlight xaml %}
3333

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

4444
{% highlight c# %}
4545

46-
SfAutocomplete autoComplete = new SfAutocomplete()
47-
{
48-
HeightRequest = 40,
49-
WidthRequest=300,
50-
TextHighlightMode = OccurrenceMode.FirstOccurrence,
51-
HighlightedTextColor = Colors.Red,
52-
HighlightedTextFontAttributes = FontAttributes.Bold,
53-
};
46+
SfAutocomplete autocomplete = new SfAutocomplete()
47+
{
48+
DisplayMemberPath = "Name",
49+
TextMemberPath = "Name",
50+
ItemsSource = socialMediaViewModel.SocialMedias,
51+
TextHighlightMode = OccurrenceMode.FirstOccurrence,
52+
HighlightedTextColor = Colors.Red,
53+
HighlightedTextFontAttributes = FontAttributes.Bold,
54+
};
5455

5556
{% endhighlight %}
5657

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

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

8081
{% highlight c# %}
8182

82-
SfAutocomplete autoComplete = new SfAutocomplete()
83-
{
84-
HeightRequest = 40,
85-
WidthRequest=300,
86-
TextSearchMode = AutocompleteTextSearchMode.Contains,
87-
TextHighlightMode = OccurrenceMode.MultipleOccurrence,
88-
HighlightedTextColor = Colors.Red,
89-
HighlightedTextFontAttributes = FontAttributes.Bold,
90-
};
83+
SfAutocomplete autocomplete = new SfAutocomplete()
84+
{
85+
DisplayMemberPath = "Name",
86+
TextMemberPath = "Name",
87+
ItemsSource = socialMediaViewModel.SocialMedias,
88+
TextHighlightMode = OccurrenceMode.MultipleOccurrence,
89+
HighlightedTextColor = Colors.Red,
90+
HighlightedTextFontAttributes = FontAttributes.Bold,
91+
TextSearchMode = AutocompleteTextSearchMode.Contains,
92+
};
9193

9294
{% endhighlight %}
9395

‎MAUI/Autocomplete/Images/UICustomization/TemplateSelector.png

4.55 KB
Loading

‎MAUI/Autocomplete/Maximum-display-item-with-Expander.md

+30-10
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ Restrict the number of suggestions displayed and have the remaining items loaded
1515
{% highlight xaml %}
1616

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

2625
{% highlight C# %}
2726

28-
autocomplete.MaximumSuggestion = 2;
27+
SfAutocomplete autocomplete = new SfAutocomplete()
28+
{
29+
ItemsSource = socialMediaViewModel.SocialMedias,
30+
MaximumSuggestion = 2,
31+
DisplayMemberPath = "Name",
32+
TextMemberPath = "Name"
33+
};
2934

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

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

5458
{% highlight C# %}
5559

56-
autocomplete.MaximumSuggestion = 2;
57-
autocomplete.LoadMoreText= "Load more items";
60+
SfAutocomplete autocomplete = new SfAutocomplete()
61+
{
62+
ItemsSource = socialMediaViewModel.SocialMedias,
63+
MaximumSuggestion = 2,
64+
LoadMoreText= "Load more items"
65+
DisplayMemberPath = "Name",
66+
TextMemberPath = "Name",
67+
};
5868

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

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

9099
{% highlight C# %}
91100

92-
autocomplete.MaximumSuggestion = 2;
101+
SfAutocomplete autocomplete = new SfAutocomplete()
102+
{
103+
DisplayMemberPath = "Name",
104+
TextMemberPath = "Name",
105+
MaximumSuggestion = 2,
106+
ItemsSource = socialMediaViewModel.SocialMedias
107+
};
93108
autocomplete.LoadMoreTemplate = new DataTemplate(() =>
94109
{
95110
var grid = new Grid();
@@ -119,7 +134,6 @@ The LoadMore support provides [LoadMoreButtonTapped](https://help.syncfusion.com
119134
{% highlight xaml %}
120135

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

132146
{% highlight C# %}
133147

134-
autocomplete.MaximumSuggestion = 2;
148+
SfAutocomplete autocomplete = new SfAutocomplete()
149+
{
150+
DisplayMemberPath = "Name",
151+
TextMemberPath = "Name",
152+
MaximumSuggestion = 2,
153+
ItemsSource = socialMediaViewModel.SocialMedias,
154+
};
135155
autocomplete.LoadMoreButtonTapped += Autocomplete_LoadMoreButtonTapped;
136156

137157
private void Autocomplete_LoadMoreButtonTapped(object? sender, EventArgs e)
138158
{
139-
159+
//Trigger when the Load More Button is Tapped
140160
}
141161

142162
{% endhighlight %}

0 commit comments

Comments
 (0)