Automatic Suggestion in UWP RichTextBox (SfRichTextBoxAdv)
10 May 202113 minutes to read
Automatic Suggestion functionality for using @mentions
RichTextBox control shows an inline dropdown with a list of suggested names while type the mention character (@ symbol). The list of names will filter as you type more letters. You can use up or down arrow key to move selection and Tab or Enter key to insert selected item in keyboard or use mouse to click any option in the list. The selected item from the suggestion list will be inserted as hyperlink with the display text and its respective link.
The following sample code demonstrates how to use @mentions in RichTextBox.
<Grid>
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextboxadv"
LayoutType="Continuous">
<RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
<RichTextBoxAdv:NameSuggestionProvider ItemsSource="{x:Bind suggestionItems}">
</RichTextBoxAdv:NameSuggestionProvider>
</RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
</RichTextBoxAdv:SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv>
</Grid>SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
ISuggestionProvider suggestionProvider = new NameSuggestionProvider();
List<NameSuggestionItem> suggestionItems = new List<NameSuggestionItem>();
NameSuggestionItem suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Nancy Davolio";
suggestionItem.Link = "mailto:nancy.davolio@northwindtraders.com";
BitmapImage bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle0.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Andrew Fuller";
suggestionItem.Link = "mailto:andrew.fuller@northwindtraders.com";
bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle5.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Steven Buchanan";
suggestionItem.Link = "mailto:steven.buchanan@northwindtraders.com";
bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle14.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
(suggestionProvider as NameSuggestionProvider).ItemsSource = suggestionItems;
richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider);Dim richTextBoxAdv As SfRichTextBoxAdv = New SfRichTextBoxAdv()
Dim suggestionProvider As ISuggestionProvider = New NameSuggestionProvider()
Dim suggestionItems As List<NameSuggestionItem> = New List<NameSuggestionItem>()
Dim suggestionItem As NameSuggestionItem = New NameSuggestionItem()
suggestionItem.Name = "Nancy Davolio"
suggestionItem.Link = "mailto:nancy.davolio@northwindtraders.com"
suggestionItem.ImageSource = "images/nancy.png"
suggestionItems.Add(suggestionItem)
suggestionItem = New NameSuggestionItem()
suggestionItem.Name = "Andrew Fuller"
suggestionItem.Link = "mailto:andrew.fuller@northwindtraders.com"
suggestionItem.ImageSource = "images/andrew.png"
suggestionItems.Add(suggestionItem)
suggestionItem = New NameSuggestionItem()
suggestionItem.Name = "Steven Buchanan"
suggestionItem.Link = "mailto:steven.buchanan@northwindtraders.com"
suggestionItem.ImageSource = "images/steven.png"
suggestionItems.Add(suggestionItem)
TryCast(suggestionProvider, NameSuggestionProvider).ItemsSource = suggestionItems
richTextBoxAdv.SuggestionSettings = New SuggestionSettings()
richTextBoxAdv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider)Customize the SuggestionBox ItemTemplate and Style
By default, the drop-down window lists the filtered items as an image, display text and link. If you want to remove the image or link. You can write your own item Template.
The following sample code demonstrates how to modify the suggestion box item template and style.
<Page.Resources>
<Style x:Key="SuggestionBoxStyle" TargetType="ListBox">
<Setter Property="MinWidth" Value="300" />
<Setter Property="MinHeight" Value="250" />
<Setter Property="Background" Value="#FFDBF5FB"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="50" VerticalAlignment="Center" Margin="12,15,0,0">
<TextBlock Text="{Binding Name}" FontFamily="microsoft sans serif" FontSize="14" />
<TextBlock Text="{Binding Link}" FontFamily="microsoft sans serif" Foreground="Gray" FontSize="10" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextboxadv"
LayoutType="Continuous">
<RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
<RichTextBoxAdv:NameSuggestionProvider ItemsSource="{x:Bind suggestionItems}"
SuggestionBoxStyle="{StaticResource SuggestionBoxStyle}">
</RichTextBoxAdv:NameSuggestionProvider>
</RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
</RichTextBoxAdv:SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv>
</Grid>Custom mention character
Any character can be used as mention character, default value is @.
The following sample code demonstrates how to use ‘#’ as mention character.
<Grid>
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextboxadv"
LayoutType="Continuous">
<RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
<RichTextBoxAdv:NameSuggestionProvider MentionCharacter="#"
ItemsSource="{x:Bind suggestionItems}">
</RichTextBoxAdv:NameSuggestionProvider>
</RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
</RichTextBoxAdv:SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv>
</Grid>SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
ISuggestionProvider suggestionProvider = new NameSuggestionProvider();
suggestionProvider.MentionCharacter = '#';
richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider);Multiple Suggestion provider
Two or more suggestion providers can be used at a time but, each suggestion provider should have different mention character. And each suggestion provider can have different item source and suggestion box style.
|
|
|
The following sample code demonstrates how to use two suggestion providers. Here we have used ‘@’ and ‘#’ as mention characters.
<Page.Resources>
<Style x:Key="SuggestionBoxStyle" TargetType="ListBox">
<Setter Property="MinWidth" Value="300" />
<Setter Property="MinHeight" Value="250" />
<Setter Property="Background" Value="#FFDBF5FB"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="50" VerticalAlignment="Center" Margin="12,15,0,0">
<TextBlock Text="{Binding Name}" FontFamily="microsoft sans serif" FontSize="14" />
<TextBlock Text="{Binding Link}" FontFamily="microsoft sans serif" Foreground="Gray" FontSize="10" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextboxadv"
LayoutType="Continuous">
<RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings>
<RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
<RichTextBoxAdv:NameSuggestionProvider ItemsSource="{StaticResource suggestionItems}">
</RichTextBoxAdv:NameSuggestionProvider>
<RichTextBoxAdv:NameSuggestionProvider MentionCharacter="#"
ItemsSource="{StaticResource suggestionItems01}"
SuggestionBoxStyle="{StaticResource SuggestionBoxStyle}">
</RichTextBoxAdv:NameSuggestionProvider>
</RichTextBoxAdv:SuggestionSettings.SuggestionProviders>
</RichTextBoxAdv:SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv.SuggestionSettings>
</RichTextBoxAdv:SfRichTextBoxAdv>
</Grid>SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
ISuggestionProvider suggestionProvider = new NameSuggestionProvider();
List<NameSuggestionItem> suggestionItems = new List<NameSuggestionItem>();
NameSuggestionItem suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Nancy Davolio";
suggestionItem.Link = "mailto:nancy.davolio@northwindtraders.com";
BitmapImage bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle0.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Andrew Fuller";
suggestionItem.Link = "mailto:andrew.fuller@northwindtraders.com";
bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle5.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
suggestionItem = new NameSuggestionItem();
suggestionItem.Name = "Steven Buchanan";
suggestionItem.Link = "mailto:steven.buchanan@northwindtraders.com";
bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms - appx:..\..\Assets\People_Circle14.png").FullName));
suggestionItem.ImageSource = bitmapImage;
suggestionItems.Add(suggestionItem);
(suggestionProvider as NameSuggestionProvider).ItemsSource = suggestionItems;
richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider);
ISuggestionProvider suggestionProviderAppType = new NameSuggestionProvider();
suggestionProviderAppType.SuggestionBoxStyle = this.Resources["SuggestionBoxStyle"] as System.Windows.Style;
suggestionProviderAppType.MentionCharacter = '#';
List<NameSuggestionItem> suggestionItems01 = new List<NameSuggestionItem>();
NameSuggestionItem desktopApp = new NameSuggestionItem();
desktopApp.Name = "Desktop App";
desktopApp.Link = "10 queries";
desktopApp.ImageSource = bitmapImage;
suggestionItems01.Add(desktopApp);
NameSuggestionItem mobileApp = new NameSuggestionItem();
mobileApp.Name = "Mobile App";
mobileApp.Link = "13 queries";
mobileApp.ImageSource = bitmapImage;
suggestionItems01.Add(mobileApp);
NameSuggestionItem webApp = new NameSuggestionItem();
webApp.Name = "Web App";
webApp.Link = "15 queries";
webApp.ImageSource = bitmapImage;
suggestionItems01.Add(webApp);
(suggestionProviderAppType as NameSuggestionProvider).ItemsSource = suggestionItems01;
richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProviderAppType);Display error message when suggestions are empty
When the entered item is not in the suggestion list, suggestion box displays a text indicating that “We couldn’t find the person you were looking for.”. The text to be displayed for this can be customized using the SuggestionBoxErrorMessage property in resource file (.resx).
• Right click your project and add new folder named Resources.
• Add default resource file of RichTextBox control into Resources folder.
• Modify the value of resource key SuggestionBoxErrorMessage in resource file.
Custom suggestion provider
By default, we have implemented NameSuggestionProvider as suggestion provider. And you can implement your own suggestion provider, inheriting from ISuggestionProvider. Which helps you to customize the search and insert selected item functionalities.
The following sample code demonstrates how to create your own suggestion provider inherited from ISuggestionProvider.
internal class AppTypeSuggestionProvider : DependencyObject, ISuggestionProvider
{
#region Property
public char MentionCharacter
{
get
{
return (char)GetValue(MentionCharacterProperty);
}
set
{
SetValue(MentionCharacterProperty, value);
}
}
public Style SuggestionBoxStyle
{
get
{
return (Style)GetValue(SuggestionBoxStyleProperty);
}
set
{
SetValue(SuggestionBoxStyleProperty, value);
}
}
public IEnumerable ItemsSource
{
get
{
return (IEnumerable)GetValue(ItemsSourceProperty);
}
set
{
SetValue(ItemsSourceProperty, value);
}
}
public static DependencyProperty MentionCharacterProperty
{
get
{
return mentionCharacterProperty;
}
}
public static DependencyProperty ItemsSourceProperty
{
get
{
return itemsSourceProperty;
}
}
public static DependencyProperty SuggestionBoxStyleProperty
{
get
{
return suggestionBoxStyleProperty;
}
}
#endregion
#region Static Dependency Properties
/// <summary>
/// Identifies the MentionCharacter dependency property.
/// </summary>
private static DependencyProperty mentionCharacterProperty = DependencyProperty.Register("MentionCharacter", typeof(char), typeof(NameSuggestionProvider), new PropertyMetadata('@'));
/// <summary>
/// Identifies the ItemSource dependency property.
/// </summary>
private static DependencyProperty itemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(NameSuggestionProvider), new PropertyMetadata(null));
/// <summary>
/// Identifies the SuggestionBoxStyle dependency property.
/// </summary>
private static DependencyProperty suggestionBoxStyleProperty = DependencyProperty.Register("SuggestionBoxStyle", typeof(Style), typeof(NameSuggestionProvider), new PropertyMetadata(null));
#endregion
public void Dispose()
{
ClearValue(mentionCharacterProperty);
if (ItemsSource != null)
{
foreach (NameSuggestionItem itemSource in ItemsSource)
{
itemSource.Dispose();
}
ClearValue(itemsSourceProperty);
}
ClearValue(suggestionBoxStyleProperty);
}
public void InsertSelectedItem(SfRichTextBoxAdv richTextBoxAdv, object selectedItem)
{
NameSuggestionItem nameSuggestionItem = selectedItem as NameSuggestionItem;
richTextBoxAdv.Selection.InsertText(MentionCharacter + nameSuggestionItem.Name);
}
public List<object> Search(string searchText)
{
List<object> matchedItems = new List<object>();
foreach (NameSuggestionItem item in ItemsSource)
{
if (item.Name.ToUpperInvariant().StartsWith(searchText.ToUpperInvariant()))
{
matchedItems.Add(item);
}
}
return matchedItems;
}
}Customize search
In default searching, it list the items which contains the typed text. And you can modify the searching logic like list the items starts or ends with typed text, by implementing your own suggestion provider and overriding the Search method.
| Search – contains | Search – starts with |
|
 |
The following sample code demonstrates how to override search operation in your suggestion provider.
public List<object> Search(string searchText)
{
List<object> matchedItems = new List<object>();
foreach (NameSuggestionItem item in ItemsSource)
{
if (item.Name.ToUpperInvariant().StartsWith(searchText.ToUpperInvariant()))
{
matchedItems.Add(item);
}
}
return matchedItems;
}Customize insert item
By default, the selected item from the suggestions list is inserted as hyperlink. And you can insert it as plain text or without link, by implementing your own suggestion provider and overriding the “InsertSelectedItem” method.
The following sample code demonstrates how to override insert selected item operation in your suggestion provider.
public void InsertSelectedItem(SfRichTextBoxAdv richTextBoxAdv, object selectedItem)
{
NameSuggestionItem nameSuggestionItem = selectedItem as NameSuggestionItem;
richTextBoxAdv.Selection.InsertText(MentionCharacter + nameSuggestionItem.Name);
}NOTE
This feature is supported from V18.4.0.30.