Skip to content

Addressed Error reports of UWP DOCX Editor Feature - Phase 4 #4142

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
Kalaivannan-Ganesan wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Addressed Error reports of UWP DOCX Editor Feature - Phase 4 #4142

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
a833cba
Done UG correction from Selection.md to Virtualization.md
Kalaivannan-Ganesan Aug 5, 2026
61158b8
Merge branch 'development' of https://github.com/syncfusion-content/d…
Kalaivannan-Ganesan Aug 5, 2026
63b1b10
Resolved the Headings errors
Kalaivannan-Ganesan Aug 5, 2026
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
239 changes: 126 additions & 113 deletions Document-Processing/Word/Word-Processor/uwp/Selection.md
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 21 additions & 15 deletions Document-Processing/Word/Word-Processor/uwp/Shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,44 @@ description: Learn here all about Shapes support in Syncfusion UWP RichTextBox (
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: shapes, text-box
keywords: shapes,text-box,rectangle,text-wrapping,shape-resizer
---
# Shapes in UWP RichTextBox (SfRichTextBoxAdv)
Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, RichTextBox does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly.

N> Starting from v18.3.0.x, the shape preservation is supported.
Shapes are drawing objects such as text boxes, rectangles, lines, curves, and circles. Shapes follow a preset or custom geometry. [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) does not support inserting shapes. However, if the document contains a shape during import, the shape is preserved.

N> Shape preservation is supported starting from Syncfusion UWP RichTextBox v18.3.0.X.

## Supported shapes
The RichTextBox has preservation support for Text box and Rectangle shapes.

`SfRichTextBoxAdv` has preservation support for text box and rectangle shapes.

![List of supported shapes in RichTextBox](Shapes_images/Supported_Shapes.PNG)

## Text box Shape
A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor will display indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting.
## Text box shape

![Text box shape view in RichTextBox](Shapes_images/TextBox_Shape.PNG)
A text box is a rectangular area in the document where you can enter text. When you click in a text box, a flashing cursor displays, indicating that you can begin typing. You can enter multiple lines of text with the full range of text formatting.

## Shape Resizer
The RichTextBox also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions.
![Text box shape in SfRichTextBoxAdv, showing the border and cursor inside the text area](Shapes_images/TextBox_Shape.PNG)

![Shape resizer view in RichTextBox](Shapes_images/Shape_Resizer.PNG)
## Shape resizer

## Text wrapping style
Text wrapping refers to how shapes fit with surrounding text in a document. Please [refer to this page](/uwp/richtextbox/text-wrapping-style) for more information about text wrapping styles available in Word documents.
`SfRichTextBoxAdv` also supports a built-in shape resizer that lets you resize shapes in the document. The shape resizer accepts both touch and mouse interactions.

## Positioning the shape
Starting from v19.1.0.x, RichTextBox preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. Whereas the shape will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
![SfRichTextBoxAdv shape resizer with selection handles around a text box](Shapes_images/Shape_Resizer.PNG)

N> At present, the shape with text wrapping style `In-Line with Text` can only be dragged and dropped anywhere in the document.
## Text wrapping style

Text wrapping refers to how shapes are positioned relative to the surrounding text in a document. Refer to the [Text wrapping style](https://help.syncfusion.com/uwp/richtextbox/text-wrapping-style) page for more information about the text wrapping styles available in `SfRichTextBoxAdv`.

## Positioning the shape

Starting from Syncfusion UWP RichTextBox v19.1.0.X, `SfRichTextBoxAdv` preserves the position properties of the shape and displays the shape based on those properties. It does not support modifying the position properties. A shape positioned relative to the line or paragraph is automatically moved as the surrounding text is edited.

N> At present, a shape with the `Inline` text wrapping style can be dragged and dropped anywhere in the document.

## See also

- [Text wrapping style in UWP RichTextBox](./Text-Wrapping-Style)
- [Importing and exporting documents in UWP RichTextBox](./Import-and-Export)
- [Image support in UWP RichTextBox](./Image)
31 changes: 21 additions & 10 deletions Document-Processing/Word/Word-Processor/uwp/Styles-and-Templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ description: Learn here all about Styles and Templates support in Syncfusion UWP
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: styles-and-templates, custom-style
keywords: styles-and-templates,custom-style,styling
---
# Styles and Templates in UWP RichTextBox (SfRichTextBoxAdv)

This section describes the styles and templates for the SfRichTextBoxAdv control. The Template defines the structure of the SfRichTextBoxAdv control and the Style defines its visual appearance. You can modify the default Control template to define a unique appearance for the control.
This section describes the styles and templates for the [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) control. The control template defines the structure of the SfRichTextBoxAdv control and the style defines its visual appearance. You can modify the default control template to define a unique appearance for the control.

## Default style and template

The following XAML shows the default style and template for the SfRichTextBoxAdv control.
{% tabs %}
{% highlight xml %}
Expand Down Expand Up @@ -48,12 +51,13 @@ The following XAML shows the default style and template for the SfRichTextBoxAdv

{% endtabs %}

N> In the control template, you are allowed to reorder the template parts and to add your own elements. However, when changing the control template you should be careful to include all required parts. Usually required parts are marked with Name attribute. Omission of required parts may impact some of the functionality.
N> In the control template, you are allowed to reorder the template parts and to add your own elements. However, when changing the control template, you should be careful to include all required parts. Required template parts are marked with the `x:Name` attribute. Omission of required parts may impact some of the functionality.

## Styling SfRichTextBoxAdv

## Styling the SfRichTextBoxAdv
You can define a custom style for the SfRichTextBoxAdv control either by creating an empty style and setting it up yourself, or by copying the default style and modifying it.

You can define custom style for the SfRichTextBoxAdv control either by creating empty style and set it up on your own or by copying the default style and modifying it.
The following example demonstrates how to customize the style for SfRichTextBoxAdv control.
The following example demonstrates how to customize the style for the SfRichTextBoxAdv control.
{% tabs %}
{% highlight xml %}
<Style x:Key="RichTextBoxAdvCustomStyle" TargetType="RichTextBoxAdv:SfRichTextBoxAdv" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv">
Expand Down Expand Up @@ -101,16 +105,23 @@ The following example demonstrates how to customize the style for SfRichTextBoxA

{% endtabs %}

The following code example demonstrates how to apply the custom style for RichTextBoxAdv control.
The following XAML example demonstrates how to apply the custom style to the SfRichTextBoxAdv control.

{% tabs %}
{% highlight c# %}
{% highlight xaml %}
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All" Style="{StaticResource RichTextBoxAdvCustomStyle}" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"/>


{% endhighlight %}

{% endtabs %}

The following screenshot shows the SfRichTextBoxAdv control with customized style.
![Styles-and-Templates_img1](Styles-and-Templates_images/Styles-and-Templates_img1.jpeg)
The following screenshot shows the SfRichTextBoxAdv control with the customized style.

![SfRichTextBoxAdv control with the RichTextBoxAdvCustomStyle applied](Styles-and-Templates_images/Styles-and-Templates_img1.jpeg)

## See also

- [Commands in UWP RichTextBox](./Commands)
- [Background in UWP RichTextBox](./Background)
- [Getting started with UWP RichTextBox](./Getting-Started)
141 changes: 78 additions & 63 deletions Document-Processing/Word/Word-Processor/uwp/Table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@ description: Learn here all about Table support in Syncfusion UWP RichTextBox (S
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: table
keywords: table,tablecommands,mergecells,tableformat,rowformat,cellformat
---
# Table in UWP RichTextBox (SfRichTextBoxAdv)

The SfRichTextBoxAdv allows you to add tables into the rich text document. You can insert any rows or columns to the existing table and also can delete existing rows and columns. The SfRichTextBoxAdv also allows you to merge the selected cells into one (both vertically and horizontally).
The following code example illustrates how to add tables into the rich text document.
[`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) allows you to add tables to the rich-text document. You can insert rows or columns into an existing table and delete existing rows and columns. SfRichTextBoxAdv also lets you merge the selected cells into one (both vertically and horizontally).

## Adding a table programmatically

The following code example illustrates how to add a table to the rich-text document.
{% tabs %}
{% highlight xaml %}
<RichTextBoxAdv:DocumentAdv>
Expand Down Expand Up @@ -45,16 +48,16 @@ The following code example illustrates how to add tables into the rich text docu
// Initializes a document.
DocumentAdv document = new DocumentAdv();

// Initialize a section.
// Initializes a section.
SectionAdv section = new SectionAdv();

// Initialize a table.
// Initializes a table.
TableAdv tableAdv = new TableAdv();

// Initialize a row.
// Initializes a row.
TableRowAdv tableRowAdv = new TableRowAdv();

// Initialize a table cell.
// Initializes a table cell.
TableCellAdv tableCellAdv = new TableCellAdv();
tableCellAdv.CellFormat.CellWidth = 240;

Expand All @@ -65,124 +68,136 @@ spanAdv.Text = "Cell 1";
paragraphAdv.Inlines.Add(spanAdv);

tableCellAdv.Blocks.Add(paragraphAdv);
// Initialize and add any number of blocks to the cell here.
// Add any number of blocks to the cell here.

tableRowAdv.Cells.Add(tableCellAdv);
// Initialize and add any number of cells to the row here.
// Add any number of cells to the row here.

tableAdv.Rows.Add(tableRowAdv);
// Initialize and add any number of rows to the table here.
// Add any number of rows to the table here.

section.Blocks.Add(tableAdv);
// Initialize and add any number of blocks to the section here.
// Add any number of blocks to the section here.

document.Sections.Add(section);
// Initialize and add any number of sections to the document here.
// Add any number of sections to the document here.

// Assign the document to the RichTextBoxAdv instance.
// Assigns the document to the RichTextBoxAdv instance.
richTextBoxAdv.Document = document;


{% endhighlight %}

{% endtabs %}

## UI Commands for accessing table
## UI commands for accessing tables

The following XAML examples illustrate how to bind commands for table operations.

### Inserting a table

The following code example illustrates how to bind the Button UI Command for inserting a table.
{% tabs %}
{% highlight xaml %}
<!-- Inserts the table with default size of one row and two columns -->
<Button Content="Insert Table" Command="{Binding ElementName=richTextBoxAdv,Path=InsertTableCommand}"/>

<!-- Inserts the table with the size of two rows and three columns -->
<Button Content="Insert Table" Command="{Binding ElementName=richTextBoxAdv,Path=InsertTableCommand}" CommandParameter="2,3"/>
<!-- Inserts a table with the default size of one row and two columns. -->
<Button Content="Insert Table" Command="{Binding ElementName=richTextBoxAdv, Path=InsertTableCommand}" />

<!-- Inserts a table with the size of two rows and three columns. -->
<Button Content="Insert Table" Command="{Binding ElementName=richTextBoxAdv, Path=InsertTableCommand}" CommandParameter="2,3" />

{% endhighlight %}

{% highlight c# %}
// InsertTableCommand accepting string parameter.
// InsertTableCommand accepts a comma-separated string parameter.
richTextBoxAdv.InsertTableCommand.Execute("2,3");

// InsertTableCommand accepting int[] with row, column size as parameter
// InsertTableCommand accepts an int[] parameter specifying rows and columns.
richTextBoxAdv.InsertTableCommand.Execute(new int[] { 2, 3 });

{% endhighlight %}

{% endtabs %}

The following code example illustrates how to bind the Button UI Command for inserting rows and columns.
### Inserting rows and columns

The `InsertRowCommand` and `InsertColumnCommand` accept a string parameter specifying the placement relative to the current row or column.

| Command | Valid `CommandParameter` values |
| --- | --- |
| `InsertRowCommand` | `"Above"`, `"Below"` |
| `InsertColumnCommand` | `"Left"`, `"Right"` |

{% tabs %}
{% highlight xaml %}
<!-- Inserts one row above to the current row -->
<!-- Command parameter can be either Above or Below -->
<Button Content="Insert Row" Command="{Binding ElementName=richTextBoxAdv,Path=InsertRowCommand}" CommandParameter="Above"/>
<!-- Inserts one column to the right of current column -->
<!-- Command parameter can be either Left or Right -->
<Button Content="Insert Column" Command="{Binding ElementName=richTextBoxAdv,Path=InsertColumnCommand}" CommandParameter="Right"/>
<!-- Inserts one row above the current row. -->
<Button Content="Insert Row" Command="{Binding ElementName=richTextBoxAdv, Path=InsertRowCommand}" CommandParameter="Above" />

<!-- Inserts one column to the right of the current column. -->
<Button Content="Insert Column" Command="{Binding ElementName=richTextBoxAdv, Path=InsertColumnCommand}" CommandParameter="Right" />

{% endhighlight %}

{% endtabs %}

The following code example illustrates how to bind the Button UI Command for selecting cell, row, column and table.
### Selecting a cell, row, column, or table

{% tabs %}
{% highlight xml %}
<!--Selects the Cell-->
<Button Content="Select Cell" Command="{Binding ElementName=richTextBoxAdv,Path=SelectCellCommand}" />
<!--Selects the Column-->
<Button Content="Select Column" Command="{Binding ElementName=richTextBoxAdv,Path=SelectColumnCommand}" />
<!--Selects the Row-->
<Button Content="Select Row" Command="{Binding ElementName=richTextBoxAdv,Path=SelectRowCommand}" />
<!--Selects the Table-->
<Button Content="Select Table" Command="{Binding ElementName=richTextBoxAdv,Path=SelecttableCommand}" />
{% highlight xaml %}
<!-- Selects the cell. -->
<Button Content="Select Cell" Command="{Binding ElementName=richTextBoxAdv, Path=SelectCellCommand}" />

{% endhighlight %}
<!-- Selects the column. -->
<Button Content="Select Column" Command="{Binding ElementName=richTextBoxAdv, Path=SelectColumnCommand}" />

<!-- Selects the row. -->
<Button Content="Select Row" Command="{Binding ElementName=richTextBoxAdv, Path=SelectRowCommand}" />

<!-- Selects the table. -->
<Button Content="Select Table" Command="{Binding ElementName=richTextBoxAdv, Path=SelectTableCommand}" />

{% endhighlight %}
{% endtabs %}

The following code example illustrates how to bind the Button UI Command for merging selected cells.
### Merging selected cells

{% tabs %}
{% highlight xaml %}
<!-- Merges the selected cells -->
<Button Content="Merge Cells" Command="{Binding ElementName=richTextBoxAdv,Path=MergeSelectedCellsCommand}"/>

<!-- Merges the selected cells. -->
<Button Content="Merge Cells" Command="{Binding ElementName=richTextBoxAdv, Path=MergeSelectedCellsCommand}" />

{% endhighlight %}

{% endtabs %}

The following code example illustrates how to bind the Button UI Command to change content alignment of the selected cells.
### Changing cell content alignment

The `CellContentAlignmentCommand` accepts a string parameter that specifies the vertical and horizontal alignment. Use the comma-separated form (`"Top,Left"`) or the combined form (`"CenterRight"`).

{% tabs %}
{% highlight xml %}
<!--Change cell content alignment with command parameter as comma separated(vertical alignment and text alignment)-->
{% highlight xaml %}
<!-- Cell content alignment with a comma-separated parameter (vertical, horizontal). -->
<Button Content="Cell Content Alignment" Command="{Binding ElementName=richTextBoxAdv,Path=CellContentAlignmentCommand}" CommandTarget="{Binding ElementName=richTextBoxAdv}" CommandParameter="Top,Left" />

<!--or-->

<!--Change cell content alignment with command parameter single sting (vertical alignment and text alignment)-->
<!-- Cell content alignment with a combined string parameter (vertical + horizontal). -->
<Button Content="Cell Content Alignment" Command="{Binding ElementName=richTextBoxAdv,Path=CellContentAlignmentCommand}" CommandTarget="{Binding ElementName=richTextBoxAdv}" CommandParameter="CenterRight"/>


{% endhighlight %}

{% endtabs %}

The following code example illustrates how to Button UI Command for deleting a row, deleting a column and deleting an entire table.
### Deleting rows, columns, and tables

{% tabs %}
{% highlight xaml %}
<!-- Deletes the column -->
<Button Content="Delete Column" Command="{Binding ElementName=richTextBoxAdv,Path=DeleteColumnCommand}"/>
<!-- Deletes the row -->
<Button Content="Delete Row" Command="{Binding ElementName=richTextBoxAdv,Path=DeleteRowCommand}"/>
<!-- Deletes the table -->
<Button Content="Delete Table" Command="{Binding ElementName=richTextBoxAdv,Path=DeleteTableCommand}"/>
<!-- Deletes the column. -->
<Button Content="Delete Column" Command="{Binding ElementName=richTextBoxAdv, Path=DeleteColumnCommand}" />

<!-- Deletes the row. -->
<Button Content="Delete Row" Command="{Binding ElementName=richTextBoxAdv, Path=DeleteRowCommand}" />

{% endhighlight %}
<!-- Deletes the table. -->
<Button Content="Delete Table" Command="{Binding ElementName=richTextBoxAdv, Path=DeleteTableCommand}" />

{% endhighlight %}
{% endtabs %}

## See also

- [Commands in UWP RichTextBox](./Commands)
- [Importing and exporting documents in UWP RichTextBox](./Import-and-Export)
- [Getting started with UWP RichTextBox](./Getting-Started)
Loading