Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
33 changes: 22 additions & 11 deletions Document-Processing/Word/Word-Processor/uwp/Image.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,41 @@ description: Learn here all about Image support in Syncfusion UWP RichTextBox (S
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: image
keywords: image,insert-picture,image-resizer,text-wrapping
---
# Image in UWP RichTextBox (SfRichTextBoxAdv)

The SfRichTextBoxAdv allows you to insert images of various formats such as bitmap images (.bmp), JPEG (.jpg, .jpeg), PNG (.png) except Metafile images.
The following code example illustrates how to insert picture into the SfRichTextBoxAdv document through UI Command.
The [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) allows you to insert images of various formats, including bitmap (`.bmp`), JPEG (`.jpg`, `.jpeg`), and PNG (`.png`). Metafile images (`.wmf`, `.emf`) are not supported.

## Inserting an image

The following code example illustrates how to insert a picture into the SfRichTextBoxAdv document using the `InsertPictureCommand` UI command.

{% tabs %}
{% highlight xaml %}
<Button Content="Insert Picture" Command="{Binding ElementName=richTextBoxAdv,Path=InsertPictureCommand}"/>

<Button Content="Insert Picture" Command="{Binding ElementName=richTextBoxAdv, Path=InsertPictureCommand}" />

{% endhighlight %}

{% endtabs %}

## Image Resizer
The SfRichTextBoxAdv also supports built-in image resizer to resize the images present in the document to your wish. The image resizer accepts both touch and mouse interactions.
![Image_img1](Image_images/Image_img1.jpeg)
## Image resizer

SfRichTextBoxAdv also supports a built-in image resizer that lets you resize images in the document as you wish. The image resizer accepts both touch and mouse interactions.

![SfRichTextBoxAdv image resizer with selection handles around an inserted image](Image_images/Image_img1.jpeg)

## Text wrapping style
Text wrapping refers to how images are 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.

Text wrapping refers to how images 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 image
Starting from v19.1.0.x, RichTextBox preserves the position properties of the image and displays the image based on position properties. It does not support modifying the position properties. Whereas the image will be automatically moved along with text edited if it is positioned relative to the line or paragraph.

Starting from v19.1.0.x, SfRichTextBoxAdv preserves the position properties of an image and displays the image based on those properties. It does not support modifying the position properties. An image positioned relative to the line or paragraph is automatically moved as the surrounding text is edited.

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

## See also

- [Getting started with UWP RichTextBox](./Getting-Started)
- [Text wrapping style in UWP RichTextBox](./Text-Wrapping-Style)
- [Commands in UWP RichTextBox](./Commands)
137 changes: 84 additions & 53 deletions Document-Processing/Word/Word-Processor/uwp/Import-and-Export.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ description: Learn here all about Import and Export support in Syncfusion UWP Ri
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: import, export, load, save
keywords: import,export,load,save,loadasync,saveasync,fileopenpicker,filesavepicker,storage-file,loadasyncsettings,showpagenumber,documentchanging,documentsaving
---
# Import and Export in UWP RichTextBox (SfRichTextBoxAdv)

The SfRichTextBoxAdv allows you to import/export word documents (.docx, .doc), rich text format documents (.rtf), HTML documents (.htm, .html) and text documents (.txt).
The following sample code demonstrates how to import contents from storage file into SfRichTextBoxAdv.
The [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) allows you to import and export Word documents (`.docx`, `.doc`), rich-text-format documents (`.rtf`), HTML documents (`.htm`, `.html`), and text documents (`.txt`).

## Importing a document

The following sample code demonstrates how to import content from a storage file into `SfRichTextBoxAdv`.

{% tabs %}
{% highlight c# %}
// Imports the document asynchronously.
Expand All @@ -24,20 +28,43 @@ async void ImportDocumentAsync()
fileOpenPicker.FileTypeFilter.Add(".html");
fileOpenPicker.FileTypeFilter.Add(".txt");

// Picks single storage file using file open picker.
// Picks a single storage file using the file open picker.
StorageFile storageFile = await fileOpenPicker.PickSingleFileAsync();

if (storageFile != null)
// Loads the storage file into RichTextBoxAdv asynchronously.
await richTextBoxAdv.LoadAsync(storageFile);
}


{% endhighlight %}
{% highlight VB %}
' Imports the document asynchronously.
Private Async Sub ImportDocumentAsync()
' Initializes the file open picker.
Dim fileOpenPicker As New FileOpenPicker()
fileOpenPicker.FileTypeFilter.Add(".docx")
fileOpenPicker.FileTypeFilter.Add(".doc")
fileOpenPicker.FileTypeFilter.Add(".rtf")
fileOpenPicker.FileTypeFilter.Add(".htm")
fileOpenPicker.FileTypeFilter.Add(".html")
fileOpenPicker.FileTypeFilter.Add(".txt")

' Picks a single storage file using the file open picker.
Dim storageFile As StorageFile = Await fileOpenPicker.PickSingleFileAsync()

If storageFile IsNot Nothing Then
' Loads the storage file into RichTextBoxAdv asynchronously.
Await richTextBoxAdv.LoadAsync(storageFile)
End If
End Sub

{% endhighlight %}
{% endtabs %}

The following code example demonstrates how to export SfRichTextBoxAdv contents as storage file.
## Exporting a document

The following code example demonstrates how to export the `SfRichTextBoxAdv` content as a storage file.

{% tabs %}
{% highlight c# %}
// Exports the document asynchronously.
Expand All @@ -59,81 +86,85 @@ async void ExportDocumentAsync()
await richTextBoxAdv.SaveAsync(storageFile);
}


{% endhighlight %}
{% highlight VB %}
' Exports the document asynchronously.
Private Async Sub ExportDocumentAsync()
' Initializes the file save picker.
Dim fileSavePicker As New FileSavePicker()
fileSavePicker.FileTypeChoices.Add("Word Document", New List(Of String)() From {".docx"})
fileSavePicker.FileTypeChoices.Add("Word 97-2003 Document", New List(Of String)() From {".doc"})
fileSavePicker.FileTypeChoices.Add("Rich Text Format", New List(Of String)() From {".rtf"})
fileSavePicker.FileTypeChoices.Add("HTML Document", New List(Of String)() From {".html"})
fileSavePicker.FileTypeChoices.Add("Text Document", New List(Of String)() From {".txt"})

' Picks the storage file to save.
Dim storageFile As StorageFile = Await fileSavePicker.PickSaveFileAsync()

If storageFile IsNot Nothing Then
' Saves RichTextBoxAdv content into the storage file asynchronously.
Await richTextBoxAdv.SaveAsync(storageFile)
End If
End Sub

{% endhighlight %}
{% endtabs %}

N> When the SfRichTextBoxAdv control encounters an unsupported element, it does not render the element, instead, it continues to the next supported element and render it. Examples of unsupported elements are AutoShapes, watermarks, charts, SmartArt, WordArt, equations, document structure tags, styles, wrapping styles, fields other than hyperlinks, absolutely positioned tables, and absolutely positioned images.
N> When the `SfRichTextBoxAdv` control encounters an unsupported element, it does not render the element. Instead, it continues to the next supported element and renders that.
N> Examples of unsupported elements are AutoShapes, watermarks, charts, SmartArt, WordArt, equations, document structure tags, styles, wrapping styles, fields other than hyperlinks, absolutely positioned tables, and absolutely positioned images.

## Asynchronous import settings
## Asynchronous loading settings

### Show or hide the loading page number

The SfRichTextBoxAdv control shows the current loading page number by default at the bottom right corner of the control while loading the document asynchronously. You can hide this loading page number by using the ShowPageNumber property of LoadAsyncSettings class.
The `SfRichTextBoxAdv` control shows the current loading page number by default in the bottom-right corner of the control while loading the document asynchronously. You can hide this loading page number by setting the [`ShowPageNumber`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.LoadAsyncSettings.html#Syncfusion_UI_Xaml_RichTextBoxAdv_LoadAsyncSettings_ShowPageNumberProperty) property of the [`LoadAsyncSettings`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.LoadAsyncSettings.html) class.

The following code example demonstrates how to hide the loading page number in SfRichTextBoxAdv control.
The following code example demonstrates how to hide the loading page number in the `SfRichTextBoxAdv` control.

{% tabs %}
{% highlight xaml %}
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv">
<RichTextBoxAdv:SfRichTextBoxAdv.LoadAsyncSettings>
<RichTextBoxAdv:LoadAsyncSettings ShowPageNumber="False"/>
</RichTextBoxAdv:SfRichTextBoxAdv.LoadAsyncSettings>
<RichTextBoxAdv:SfRichTextBoxAdv.LoadAsyncSettings>
<RichTextBoxAdv:LoadAsyncSettings ShowPageNumber="False" />
</RichTextBoxAdv:SfRichTextBoxAdv.LoadAsyncSettings>
</RichTextBoxAdv:SfRichTextBoxAdv>


{% endhighlight %}
{% highlight c# %}
// Initializes a new instance of RichTextBoxAdv.
// Initializes a new instance of SfRichTextBoxAdv.
SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
////Hides the loading page number.
// Hides the loading page number.
richTextBoxAdv.LoadAsyncSettings.ShowPageNumber = false;


{% endhighlight %}
{% highlight VB %}
' Initializes a new instance of RichTextBoxAdv.
' Initializes a new instance of SfRichTextBoxAdv.
Dim richTextBoxAdv As New SfRichTextBoxAdv()
' Hides the loading page number.
richTextBoxAdv.LoadAsyncSettings.ShowPageNumber = false

richTextBoxAdv.LoadAsyncSettings.ShowPageNumber = False

{% endhighlight %}

{% endtabs %}

N> This API is supported starting from release version v17.4.0.X.

## Events for document load and save notifications

`SfRichTextBoxAdv` also provides the following events to notify when a document starts and completes loading and saving.

### Events table

| Event | Description |
| --- | --- |
| `DocumentChanging` | Fires when the document starts loading. |
| `DocumentChanged` | Fires after the document is successfully loaded. |
| `DocumentSaving` | Fires when the document starts saving. |
| `DocumentSaved` | Fires after the document is successfully saved. |

N> These events are supported from Syncfusion UWP RichTextBox v18.2.0.X onwards.

## See also

## Events to notify document starts and completes loading and saving

SfRichTextBoxAdv control also provides below events to notify document starts and completes loading and saving.


### Events Table

<table>
<tr>
<th>
Event </th><th>
Description </th></tr>
<tr>
<td>
DocumentChanging</td><td>
This event is triggered when the document starts loading.</td></tr>
<tr>
<td>
DocumentChanged</td><td>
This event is triggered after the document is successfully loaded.</td></tr>
<tr>
<td>
DocumentSaving</td><td>
This event is triggered when the document starts saving.</td></tr>
<tr>
<td>
DocumentSaved</td><td>
This event is triggered after the document is successfully saved.</td></tr>
</table>

N> This API is supported starting from release version v18.2.0.X.
- [Commands in UWP RichTextBox](./Commands)
- [Document properties in UWP RichTextBox](./Document-Properties)
- [Getting started with UWP RichTextBox](./Getting-Started)
72 changes: 55 additions & 17 deletions Document-Processing/Word/Word-Processor/uwp/Layout-Types.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,24 @@ description: Learn here all about Layout Types support in Syncfusion UWP RichTex
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: layout-types
keywords: layout-types,pages,continuous,block,forum,blog
---
# Layout Types in UWP RichTextBox (SfRichTextBoxAdv)

The SfRichTextBoxAdv control allows you to choose between the following layout types.
The [`SfRichTextBoxAdv`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html) control allows you to choose between the following layout types via the [`LayoutType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.RichTextBoxAdv.SfRichTextBoxAdv.html#Syncfusion_UI_Xaml_RichTextBoxAdv_SfRichTextBoxAdv_LayoutType) property.

* Pages
| Layout type | Use case | Behavior |
| --- | --- | --- |
| `Pages` | Word-style paginated view | Content is rendered across multiple pages, similar to the Print Layout view of Microsoft Word. |
| `Continuous` | Forum, blog, or scrolling viewer | Content is rendered as a single scrolling page, similar to the Web Layout view of Microsoft Word. |
| `Block` | Read-only display of rich content | Content is rendered as a single read-only page; clipboard copy is supported. |

* Continuous

* Block
## Pages

When using the `Pages` layout type, the rich-text document content is rendered sequentially in several pages, similar to the Print Layout view of Microsoft Word. The size and margin of each page are defined by the section format properties.

## Pages
The following code example demonstrates how to define the layout type of the `SfRichTextBoxAdv` control as `Pages`.

When using Pages layout type, the rich text document content is rendered sequentially in several pages, similar to the Print layout view of Microsoft Word. The size and margin of each page are defined by Section format properties.
The following code example demonstrates how to define layout type of SfRichTextBoxAdv control as Pages.
{% tabs %}
{% highlight xaml %}
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All" LayoutType="Pages" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"/>
Expand All @@ -36,14 +37,25 @@ richTextBoxAdv.LayoutType = LayoutType.Pages;

{% endhighlight %}

{% highlight VB %}
' Initializes a new instance of SfRichTextBoxAdv.
Dim richTextBoxAdv As New SfRichTextBoxAdv()
richTextBoxAdv.ManipulationMode = ManipulationModes.All
' Defines the layout type as Pages.
richTextBoxAdv.LayoutType = LayoutType.Pages

{% endhighlight %}

{% endtabs %}

![Layout-Types_img1](Layout-Types_images/Layout-Types_img1.jpeg)
![SfRichTextBoxAdv with the Pages layout type](Layout-Types_images/Layout-Types_img1.jpeg)

## Continuous

When using Continuous layout type, the entire rich text document content is rendered continuously in a single page, similar to the Web layout view of Microsoft Word. This layout looks like a simple text box with rich-text content and can be used for applications such as forums and blogs.
The following code example demonstrates how to define layout type of SfRichTextBoxAdv control as Continuous.
When using the `Continuous` layout type, the entire rich-text document content is rendered continuously in a single page, similar to the Web Layout view of Microsoft Word. This layout looks like a simple text box with rich-text content and can be used for applications such as forums and blogs.

The following code example demonstrates how to define the layout type of the `SfRichTextBoxAdv` control as `Continuous`.

{% tabs %}
{% highlight xaml %}
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All" LayoutType="Continuous" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"/>
Expand All @@ -59,14 +71,25 @@ richTextBoxAdv.LayoutType = LayoutType.Continuous;

{% endhighlight %}

{% highlight VB %}
' Initializes a new instance of SfRichTextBoxAdv.
Dim richTextBoxAdv As New SfRichTextBoxAdv()
richTextBoxAdv.ManipulationMode = ManipulationModes.All
' Defines the layout type as Continuous.
richTextBoxAdv.LayoutType = LayoutType.Continuous

{% endhighlight %}

{% endtabs %}

![Layout-Types_img2](Layout-Types_images/Layout-Types_img2.jpeg)
![SfRichTextBoxAdv with the Continuous layout type](Layout-Types_images/Layout-Types_img2.jpeg)

## Block

When using Block layout type, the rich text content is rendered continuously in a single page as read only. This layout looks like a simple text block with rich text content such as texts, images, and tables. Block Layout also supports copying contents to the clipboard. This can be used for applications such as forums and blogs in order to display the rich-text contents with same look and feel as in the continuous layout type.
The following code example demonstrates how to define layout type of SfRichTextBoxAdv control as Block.
When using the `Block` layout type, the rich-text content is rendered continuously in a single page in read-only mode. This layout looks like a simple text block with rich-text content such as text, images, and tables. The `Block` layout also supports copying content to the clipboard. This can be used for applications such as forums and blogs in order to display the rich-text content with the same look and feel as the continuous layout type.

The following code example demonstrates how to define the layout type of the `SfRichTextBoxAdv` control as `Block`.

{% tabs %}
{% highlight xaml %}
<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All" LayoutType="Block" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"/>
Expand All @@ -82,8 +105,23 @@ richTextBoxAdv.LayoutType = LayoutType.Block;

{% endhighlight %}

{% highlight VB %}
' Initializes a new instance of SfRichTextBoxAdv.
Dim richTextBoxAdv As New SfRichTextBoxAdv()
richTextBoxAdv.ManipulationMode = ManipulationModes.All
' Defines the layout type as Block.
richTextBoxAdv.LayoutType = LayoutType.Block

{% endhighlight %}

{% endtabs %}

![Layout-Types_img3](Layout-Types_images/Layout-Types_img3.jpeg)
![SfRichTextBoxAdv with the Block layout type](Layout-Types_images/Layout-Types_img3.jpeg)

N> On Windows Phone devices, the entire rich-text content is rendered continuously in a single page as the continuous layout type, regardless of the `LayoutType` setting.

## See also

N> In Windows Phone device, the entire rich text content is rendered continuously in a single page as continuous layout type and there is no effect on setting other layout types.
- [Commands in UWP RichTextBox](./Commands)
- [Background in UWP RichTextBox](./Background)
- [Getting started with UWP RichTextBox](./Getting-Started)
Loading