diff --git a/Document-Processing/Word/Word-Processor/uwp/Automatic-Suggestion.md b/Document-Processing/Word/Word-Processor/uwp/Automatic-Suggestion.md index a1e242adad..70a22f661f 100644 --- a/Document-Processing/Word/Word-Processor/uwp/Automatic-Suggestion.md +++ b/Document-Processing/Word/Word-Processor/uwp/Automatic-Suggestion.md @@ -4,16 +4,20 @@ description: Learn here all about Automatic Suggestion support in Syncfusion UWP platform: document-processing control: SfRichTextBoxAdv documentation: ug -keywords: automatic-suggestion, @mentions +keywords: automatic-suggestion,@mentions,mention-character,suggestion-box,name-suggestion-provider --- # Automatic Suggestion in UWP RichTextBox (SfRichTextBoxAdv) -### 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. +## Using @mentions with automatic suggestion +The SfRichTextBoxAdv control shows an inline dropdown with a list of suggested names while typing the mention character (`@` symbol). The list of names filters as you type more letters. You can use the up or down arrow keys to move selection, and Tab or Enter to insert the selected item via keyboard, or use the mouse to click any option in the list. The selected item from the suggestion list inserts as a hyperlink with the display text and its corresponding link. + +The suggestion feature is configured through the [SuggestionSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SuggestionSettings.html), [ISuggestionProvider](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.ISuggestionProvider.html), and [NameSuggestionProvider](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.NameSuggestionProvider.html) classes, with suggestion items supplied via [NameSuggestionItem](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.NameSuggestionItem.html). + +N> The `suggestionItems` collection referenced by `{x:Bind suggestionItems}` in the XAML sample must be defined in your code-behind as a public property (for example, `public ObservableCollection SuggestionItems { get; }`) and populated with `NameSuggestionItem` instances, as shown in the C# sample below. ![Automatic Suggestion](Automatic-Suggestion_images/autosuggestion1.PNG) -The following sample code demonstrates how to use @mentions in RichTextBox. +The following sample code demonstrates how to use @mentions in SfRichTextBoxAdv. {% tabs %} {% highlight xaml %} @@ -38,21 +42,21 @@ List suggestionItems = new List(); 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)); +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)); +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)); +bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms-appx:..\..\Assets\People_Circle14.png").FullName)); suggestionItem.ImageSource = bitmapImage; suggestionItems.Add(suggestionItem); @@ -91,8 +95,8 @@ richTextBoxAdv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider) [View sample in GitHub](https://github.com/SyncfusionExamples/UWP-RichTextBox-Examples/tree/main/Samples/Automatic%20Suggestion/Automatic%20Suggestion) -### 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. +## Customize the suggestion box item template and style +By default, the drop-down window lists the filtered items as an image, display text, and link. To remove the image or link, write your own item template. ![Modify Suggestion Box Item](Automatic-Suggestion_images/autosuggestion2.PNG) @@ -134,8 +138,8 @@ The following sample code demonstrates how to modify the suggestion box item tem {% endtabs %} -### Custom mention character -Any character can be used as mention character, default value is **@**. +## Custom mention character +Any character can be used as the mention character; the default value is `@`. ![Mention Character](Automatic-Suggestion_images/autosuggestion3.PNG) @@ -167,12 +171,12 @@ richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProvider); {% endtabs %} -### 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. +## Multiple suggestion provider +Two or more suggestion providers can be used at a time, but each suggestion provider must use a different mention character. Each suggestion provider can have its own 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. +The following sample code demonstrates how to use two suggestion providers. Here, `@` and `#` are used as mention characters. {% tabs %} {% highlight xaml %} @@ -218,21 +222,21 @@ List suggestionItems = new List(); 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)); +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)); +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)); +bitmapImage = new BitmapImage(new Uri(new DirectoryInfo(@"ms-appx:..\..\Assets\People_Circle14.png").FullName)); suggestionItem.ImageSource = bitmapImage; suggestionItems.Add(suggestionItem); @@ -270,11 +274,11 @@ richTextboxadv.SuggestionSettings.SuggestionProviders.Add(suggestionProviderAppT [View sample in GitHub](https://github.com/SyncfusionExamples/UWP-RichTextBox-Examples/tree/main/Samples/Automatic%20Suggestion/Multiple%20Suggestion%20Provider) -### 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](https://github.com/syncfusion/uwp-controls-localization-resource-files/tree/master/Syncfusion.SfRichTextBoxAdv.UWP) of RichTextBox control into Resources folder. -• Modify the value of resource key SuggestionBoxErrorMessage in resource file. +## Display error message when suggestions are empty +When the entered item is not in the suggestion list, the suggestion box displays the message "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 the resource file (`.resx`). +* Right-click your project and add a new folder named `Resources`. +* Add the [default resource file](https://github.com/syncfusion/uwp-controls-localization-resource-files/tree/master/Syncfusion.SfRichTextBoxAdv.UWP) of the RichTextBox control into the `Resources` folder. +* Modify the value of the resource key `SuggestionBoxErrorMessage` in the resource file. ![Display message](Automatic-Suggestion_images/autosuggestion5.PNG) @@ -282,7 +286,7 @@ When the entered item is not in the suggestion list, suggestion box displays a t ### Custom suggestion provider -By default, we have implemented [NameSuggestionProvider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.RichTextBoxAdv.NameSuggestionProvider.html) as suggestion provider. And you can implement your own suggestion provider, inheriting from [ISuggestionProvider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.RichTextBoxAdv.ISuggestionProvider.html). Which helps you to customize the search and insert selected item functionalities. +By default, we have implemented [NameSuggestionProvider](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.NameSuggestionProvider.html) as suggestion provider. And you can implement your own suggestion provider, inheriting from [ISuggestionProvider](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.ISuggestionProvider.html). 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. {% tabs %} @@ -450,6 +454,9 @@ public void InsertSelectedItem(SfRichTextBoxAdv richTextBoxAdv, object selectedI N> This feature is supported from V18.4.0.30. [View Sample in GitHub](https://github.com/SyncfusionExamples/UWP-RichTextBox-Examples/tree/main/Samples/Automatic%20Suggestion/Custom%20Suggestion%20Provider) - +## See also +- [Commands in UWP RichTextBox](./Commands) +- [Document Structure in UWP RichTextBox](./Document-Structure) +- [Document Properties in UWP RichTextBox](./Document-Properties) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/uwp/Background.md b/Document-Processing/Word/Word-Processor/uwp/Background.md index 0244ab608f..fcf7553782 100644 --- a/Document-Processing/Word/Word-Processor/uwp/Background.md +++ b/Document-Processing/Word/Word-Processor/uwp/Background.md @@ -4,11 +4,11 @@ description: Learn here all about Background support in Syncfusion UWP RichTextB platform: document-processing control: SfRichTextBoxAdv documentation: ug -keywords: background +keywords: background,background-color,overrides-document-background,layout-type,document-background --- # Setting Background for RichTextBox -The RichTextBox control allows you to change background color of the control. A background of a control is represented by `Background` property of `SfRichTextBoxAdv` class. The default value of this property is black. +The RichTextBox control allows you to change the background color of the SfRichTextBoxAdv control. A background of a control is represented by the `Background` property of [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) class. The default value of this property is black, which is set by the control's default template. The following code illustrates how to apply color as background to the document. @@ -22,7 +22,7 @@ The following code illustrates how to apply color as background to the document. // Initializes a new instance of RichTextBoxAdv. SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv(); // Sets the control background color -richTextBoxAdv.Background = new SolidColorBrush(Color.FromRgb(102, 153, 204)); +richTextBoxAdv.Background = new SolidColorBrush(Color.FromArgb(255, 102, 153, 204)); {% endhighlight %} @@ -31,102 +31,124 @@ richTextBoxAdv.Background = new SolidColorBrush(Color.FromRgb(102, 153, 204)); Dim richTextBoxAdv As New SfRichTextBoxAdv() ' Sets the control background color. -richTextBoxAdv.Background = new SolidColorBrush(Color.FromRgb(102, 153, 204)) +richTextBoxAdv.Background = New SolidColorBrush(Color.FromArgb(255, 102, 153, 204)) {% endhighlight %} {% endtabs %} -Pages layout +**Pages layout** ![Pages layout](Image_images/control_page.PNG) -Continuous layout +**Continuous layout** ![Continuous layout](Image_images/continous_noBackground.PNG) -Block layout +**Block layout** The block layout always inherits the control background color. -![Bolck layout](Image_images/Control_background_block.PNG) +![Block layout](Image_images/Control_background_block.PNG) -## How to override the document background in continuous layout type? -By default, the document background properties will be applied when the `LayoutType` is continuous. You can suppress the document background and apply the control background by setting `OverridesDocumentBackground` property to true. The default value of this property is false. +## Setting background for document pages -N> This property is valid only when the `LayoutType` is continuous. +The RichTextBox control allows you to change the background color of the document pages. A background of a document is represented by the [`Background`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.DocumentAdv.html#Syncfusion_UI_Xaml_RichTextBoxAdv_DocumentAdv_Background) property of [`DocumentAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.DocumentAdv.html) class. The default value of this property is white. -The following code illustrates how to override the document background color. +The following code illustrates how to apply color as background to the document pages. {% tabs %} -{% highlight xaml %} - - - -{% endhighlight %} {% highlight c# %} // Initializes a new instance of RichTextBoxAdv. SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv(); -// Sets the control background color -richTextBoxAdv.Background = new SolidColorBrush(Colors.LightGreen); -// Sets the layout type as continous -richTextBoxAdv.LayoutType = LayoutType.Continuous; -//Enable the OverridesDocumentBackground property -richTextBoxAdv.OverridesDocumentBackground = true; +// Sets the document background color +richTextBoxAdv.Document.Background.Color = Color.FromArgb(255, 102, 153, 204); {% endhighlight %} {% highlight VB %} ' Initializes a new instance of RichTextBoxAdv. Dim richTextBoxAdv As New SfRichTextBoxAdv() -' Sets the control background color. -richTextBoxAdv.Background = new SolidColorBrush(Color.FromRgb(102, 153, 204)) -' Sets the layout type as continous -richTextBoxAdv.LayoutType = LayoutType.Continuous -' Enable the OverridesDocumentBackground property -richTextBoxAdv.OverridesDocumentBackground = true +' Sets the document background color. +richTextBoxAdv.Document.Background.Color = Color.FromArgb(255, 102, 153, 204) +{% endhighlight %} +{% endtabs %} + +## Maintain the same background for all documents +The document background property is independent for each document, so the background changes whenever the document changes. To keep the same background across all documents, subscribe to the `DocumentChanged` event and reset the background in the handler. +{% tabs %} +{% highlight c# %} +// Initializes a new instance of RichTextBoxAdv. +SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv(); + +// Subscribes to the DocumentChanged event to keep the same background for all documents. +richTextBoxAdv.DocumentChanged += (s, e) => +{ + richTextBoxAdv.Document.Background.Color = Color.FromArgb(255, 102, 153, 204); +}; {% endhighlight %} +{% highlight VB %} +' Initializes a new instance of RichTextBoxAdv. +Dim richTextBoxAdv As New SfRichTextBoxAdv() +' Subscribes to the DocumentChanged event to keep the same background for all documents. +AddHandler richTextBoxAdv.DocumentChanged, Sub(s, e) + richTextBoxAdv.Document.Background.Color = Color.FromArgb(255, 102, 153, 204) +End Sub +{% endhighlight %} {% endtabs %} +Pages layout: +![Page background](Image_images/Pages_background.PNG) + Continuous layout: ![Continuous layout](Image_images/continous_layout.PNG) +## How to override the document background in `Continuous` layout type? +By default, the document background property is applied when the [`LayoutType`](./Layout-Types) is continuous. You can suppress the document background and apply the control background by setting [`OverridesDocumentBackground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html#Syncfusion_UI_Xaml_RichTextBoxAdv_SfRichTextBoxAdv_OverridesDocumentBackground) property to true. The default value of this property is false. -### Setting Background for Document Pages +N> This property is valid only when the `LayoutType` is continuous. -The RichTextBox control allows you to change background color of the document pages. A background of a document is represented by `Background` property of `DocumentAdv` class. The default value of this property is white. +The following code illustrates how to override the document background color. -N> 1. This property is independent for a document. So the background will change when the document is changed. -N> 2. To maintain same background for all documents, you can reset this property in DocumentChanged event. +{% tabs %} +{% highlight xaml %} + -The following code illustrates how to apply color as background to the document pages. -{% tabs %} +{% endhighlight %} {% highlight c# %} // Initializes a new instance of RichTextBoxAdv. SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv(); -// Sets the document background color -richTextBoxAdv.Document.Background.Color = Color.FromRgb(102, 153, 204); +// Sets the control background color +richTextBoxAdv.Background = new SolidColorBrush(Colors.LightGreen); +// Sets the layout type as continuous +richTextBoxAdv.LayoutType = LayoutType.Continuous; +// Enable the OverridesDocumentBackground property. +richTextBoxAdv.OverridesDocumentBackground = true; {% endhighlight %} {% highlight VB %} ' Initializes a new instance of RichTextBoxAdv. Dim richTextBoxAdv As New SfRichTextBoxAdv() -' Sets the document background color. -richTextBoxAdv.Document.Background.Color = Color.FromRgb(102, 153, 204) - - +' Sets the control background color. +richTextBoxAdv.Background = New SolidColorBrush(Color.FromArgb(255, 102, 153, 204)) +' Sets the layout type as continous +richTextBoxAdv.LayoutType = LayoutType.Continuous +' Enable the OverridesDocumentBackground property +richTextBoxAdv.OverridesDocumentBackground = True {% endhighlight %} {% endtabs %} +Continuous layout (with `OverridesDocumentBackground="True"`): +![Continuous layout](Image_images/continous_layout.PNG) -Pages layout: -![Page background](Image_images/Pages_background.PNG) +N> This API is supported starting from release version v17.4.0.X. -Continuous layout: -![Continuos layout](Image_images/continous_layout.PNG) +## See also -N> This API is supported starting from release version v17.4.0.X. +- [Commands in UWP RichTextBox](./Commands) +- [Document Structure in UWP RichTextBox](./Document-Structure) +- [Document Properties in UWP RichTextBox](./Document-Properties) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/uwp/Clipboard.md b/Document-Processing/Word/Word-Processor/uwp/Clipboard.md index afff3f5f96..3d54bfa4ab 100644 --- a/Document-Processing/Word/Word-Processor/uwp/Clipboard.md +++ b/Document-Processing/Word/Word-Processor/uwp/Clipboard.md @@ -4,62 +4,108 @@ description: Learn here all about Clipboard support in Syncfusion UWP RichTextBo platform: document-processing control: SfRichTextBoxAdv documentation: ug -keywords: clipboard +keywords: clipboard,cut,copy,paste,cutcommand,copycommand,pastecommand,rich-text-format,clipboard-formats --- -# Clipboard in UWP RichTextBox (SfRichTextBoxAdv) +# Clipboard support in UWP RichTextBox (SfRichTextBoxAdv) -The SfRichTextBoxAdv takes advantage of the clipboard support and allows you to copy or paste contents to and from the clipboard in the following formats. +SfRichTextBoxAdv supports the clipboard through the [`CutCommand`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.CutCommand.html), [`CopyCommand`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.CopyCommand.html), and [`PasteCommand`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.PasteCommand.html), enabling you to copy and paste content in the following formats. -* Rich text format. +## Supported clipboard formats -* Text. +| Command | Rich text format | Text | Image | +| --- | --- | --- | --- | +| `CutCommand` | ✔ | ✔ | ✔ | +| `CopyCommand` | ✔ | ✔ | ✔ | +| `PasteCommand` | ✔ | ✔ | ✔ | -* Image. +## UI commands for clipboard operations -## UI Command to access clipboard operations +The following code example demonstrates how to bind commands for accessing clipboard operations. - -The following code example demonstrates how to bind commands for accessing clipboard operations. {% tabs %} {% highlight xaml %} - +