Skip to content
Merged
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
16 changes: 8 additions & 8 deletions uwp/Image-Editor/Crop.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Crop in UWP Image Editor control | Syncfusion
description: Learn here all about Crop with ratio support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Crop in UWP Image Editor | Syncfusion®
description: Discover how to crop images in Syncfusion® UWP Image Editor control with ratio support and advanced features.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Crop in UWP Image Editor (SfImageEditor)
# Crop in UWP Image Editor

The image editor control gives you an option to crop the image as desired. Cropping the image can be done in following two ways:

* From Toolbar
* Cropping programmatically

### From Toolbar
## From Toolbar

To enable cropping, in the `Transforms` submenu, click the `Crop` icon. When the `Crop` icon is tapped, a sub toolbar will appear on top of that toolbar. While the cropping is enabled, the crop sub toolbar, `Cancel` and `OK` buttons will be available. From that sub toolbar, you can able to crop the image with the following aspect ratios.

Expand All @@ -25,7 +25,7 @@ To enable cropping, in the `Transforms` submenu, click the `Crop` icon. When the

To disable cropping,click the `Cancel` button. To save the cropped area, after selected the desired area, Click the `OK` button, the toolbars will reappear after the cropping operation is completed.

### Cropping programmatically
## Cropping programmatically

Cropping operation can be done programmatically in following two ways:

Expand All @@ -34,7 +34,7 @@ Cropping operation can be done programmatically in following two ways:

N> You can enable the cropping in the zoomed area and crop the specific position from the zoomed area.

#### Handling the cropping tool
### Handling the cropping tool

The `ToggleCropping` method in the SfImageEditor control is used to enable and disable a cropping region placed over the image to visually choose the area for cropping.

Expand Down Expand Up @@ -154,7 +154,7 @@ imageEditor.Crop(new Rect(0, 0, 0, 0));

{% endtabs %}

### Circle cropping
## Circle cropping

An image can be cropped in circle or elliptical format, which could be perfect for using it as a profile picture.
Specify the [`ToggleCropping`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ToggleCropping_Windows_Foundation_Rect_System_Boolean_) parameter as shown in the below code sample.
Expand Down Expand Up @@ -195,7 +195,7 @@ The following image show cases the circularly cropped image.

{% endhighlight %}

### Circle cropping with a ratio
## Circle cropping with a ratio

To crop an image in a circle or an ellipse with a specific ratio, use [`ToggleCropping`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ToggleCropping_System_Single_System_Single_System_Boolean_) with a ratio argument and an optional parameter of true, which specifies whether the cropping panel should be added in an elliptical or rectangle shape. The default value is false.

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/CustomView.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Custom View in UWP Image Editor control | Syncfusion
description: Learn here all about Custom View support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Custom View in UWP Image Editor | Syncfusion®
description: Learn about adding custom views and shapes in Syncfusion® UWP Image Editor control with customization options.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Adding custom view in UWP Image Editor (SfImageEditor)
# Custom View in UWP Image Editor

You can add any custom shape or view to an image using the `AddCustomView` method in the image editor
control. To add a custom view, specify the view and its desired `CustomViewSettings` as demonstrated in the
Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: post
title: Getting Started with UWP Image Editor control | Syncfusion
description: Learn here about getting started with Syncfusion UWP Image Editor (SfImageEditor) control, its elements and more.
title: Getting Started with UWP Image Editor | Syncfusion®
description: Learn how to get started with the Syncfusion® UWP Image Editor control. Explore setup, features, examples, and customization options.
platform: uwp
control: SfImageEditor
documentation: ug
---
# Getting Started with UWP Image Editor (SfImageEditor)
# Getting Started with UWP Image Editor

This section explains the steps required to load an image to the image editor. Image editor has a built-in toolbar that has options to edit the image with shapes, path, text, crop, rotate and flip.

Expand Down
10 changes: 5 additions & 5 deletions uwp/Image-Editor/ImageFilter.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Image Filter in UWP Image Editor control | Syncfusion
description: Learn here all about Image Filter support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
platform: UWP
control: ImageEditor
title: Image Filter in UWP Image Editor | Syncfusion®
description: Explore image filters in Syncfusion® UWP Image Editor control including blur, sharpen, hue, and saturation effects.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Image Filter in UWP Image Editor (SfImageEditor)
# Image Filter in UWP Image Editor

By using the SfImageEditor control, you can add effects such as Hue, Saturation, Brightness, Contrast, Blur, and Sharpen to the image. These effects can be applied from toolbar or using the ApplyImageEffect method. The [`ApplyImageEffect`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ApplyImageEffect_Syncfusion_UI_Xaml_ImageEditor_Enums_ImageEffect_System_Single_) method contains two arguments: [`ImageEffect`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ImageEffect) and [`EffectValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_EffectValue). The ImageEffect is an Enum, which contains the following effects:

Expand Down
8 changes: 4 additions & 4 deletions uwp/Image-Editor/Overview.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: post
title: About UWP Image Editor control | Syncfusion
description: Learn here all about introduction of Syncfusion UWP Image Editor (SfImageEditor) control, its elements and more.
platform: UWP
title: About Syncfusion® UWP Image Editor Control | Syncfusion®
description: Learn about the introduction of Syncfusion® Essential Studio UWP Image Editor control and more details.
platform: uwp
control: SfImageEditor
documentation: ug
---
# UWP Image Editor (SfImageEditor) Overview
# About Syncfusion® UWP Image Editor Control

ImageEditor is a very handy tool; that is used to edit an image by annotating with free hand drawing paths, text and built-in shapes. It also allows you to crop, rotate and flip the image. The Image Editor control has an in-built toolbar which helps you to perform the editing operations.

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/SaveandResetEvents.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Save and Reset Events in UWP Image Editor control | Syncfusion
description: Learn here all about Save and Reset Events support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Save and Reset Events in UWP Image Editor | Syncfusion®
description: Learn about save and reset events in Syncfusion® UWP Image Editor control with event handling and examples.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Save and Reset Events in UWP Image Editor (SfImageEditor)
# Save and Reset Events in UWP Image Editor

The image can be saved along with the changes. Saving an image can be done in the following two ways:

Expand Down
10 changes: 5 additions & 5 deletions uwp/Image-Editor/Serialization.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout : post
title: Serialization in UWP Image Editor control | Syncfusion
description: Learn here all about Serialization support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
platform : UWP
control : ImageEditor
title: Serialization in UWP Image Editor | Syncfusion®
description: Discover serialization and deserialization features in Syncfusion® UWP Image Editor for saving and loading edits.
platform : uwp
control : SfImageEditor
documentation : ug
---

# Serialization in UWP Image Editor (SfImageEditor)
# Serialization in UWP Image Editor
ImageEditor provides support to serialize and deserialize the shapes(Circle, Arrow, Rectangle), free hand drawing, Text and Toolbar settings. Save the current state of the image editor and Load it back when its needed.

## Serialization
Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/Shapes.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: post
title: Shapes in UWP Image Editor control | Syncfusion
description: Learn here all about Shapes support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Shapes in UWP Image Editor | Syncfusion®
description: Explore shapes support in Syncfusion® UWP Image Editor control including rectangles, circles, and arrows.
platform: uwp
control: SfImageEditor
documentation: ug
---
# Shapes in UWP Image Editor (SfImageEditor)
# Shapes in UWP Image Editor

You can annotate any path on an image by using free hand drawing and adding texts and shapes.

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/Text.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: post
title: Text in UWP Image Editor control | Syncfusion
description: Learn here all about Text support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Text in UWP Image Editor | Syncfusion®
description: Learn about adding and editing text annotations in Syncfusion® UWP Image Editor control with styling options.
platform: uwp
control: SfImageEditor
documentation: ug
---
# Text in UWP Image Editor (SfImageEditor)
# Text in UWP Image Editor

To add the desired text elements over the image, use the following two ways:

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/ToolbarCustomization.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: ToolbarCustomization in UWP Image Editor control | Syncfusion
description: Learn here all about ToolbarCustomization support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Toolbar Customization in UWP Image Editor | Syncfusion®
description: Learn about toolbar customization in Syncfusion® UWP Image Editor control including colors and visibility settings.
platform: uwp
control: SfImageEditor
documentation: ug
---

# ToolbarCustomization in UWP Image Editor (SfImageEditor)
# Toolbar Customization in UWP Image Editor

You can change the default colors of the ColorPalette and visibility of the toolbar.

Expand Down
8 changes: 4 additions & 4 deletions uwp/Image-Editor/UndoRedo.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Undo and Redo in UWP Image Editor control | Syncfusion
description: Learn here all about Undo and Redo support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Undo and Redo in UWP Image Editor | Syncfusion®
description: Learn about undo and redo operations in Syncfusion® UWP Image Editor control for image editing operations.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Undo and Redo in UWP Image Editor (SfImageEditor)
# Undo and Redo in UWP Image Editor

One of the important features of the image editor control is to perform `Undo` and `Redo` operations of adding shapes, text and drawing paths. The undo and redo operations can be done in the following two ways:

Expand Down Expand Up @@ -56,4 +56,4 @@ The `Redo` method is used to redo the changes reverted in the undo operation.

{% endhighlight %}

![UndoRedo](undoRedo_images/UndoRedo.png)
![UndoRedo](undoRedo_images/UndoRedo.jpg)
10 changes: 5 additions & 5 deletions uwp/Image-Editor/Z-Ordering.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Z-Ordering in UWP Image Editor control | Syncfusion
description: Learn here all about Z-Ordering support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
platform: UWP
control: ImageEditor
title: Z-Ordering in UWP Image Editor | Syncfusion®
description: Explore z-ordering and shape layering in Syncfusion® UWP Image Editor control with bring to front and send to back.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Z-Ordering in UWP Image Editor (SfImageEditor)
# Z-Ordering in UWP Image Editor

The image editor control allows to change the position of shapes/edits that are arranged over the editor. This can be achieved using the following methods:

Expand Down
8 changes: 4 additions & 4 deletions uwp/Image-Editor/Zooming.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Zooming in UWP Image Editor control | Syncfusion
description: Learn here all about Zooming support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
platform: UWP
title: Zooming in UWP Image Editor | Syncfusion®
description: Learn about zoom and pan operations in Syncfusion® UWP Image Editor control for detailed image editing.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Zooming in UWP Image Editor (SfImageEditor)
# Zooming in UWP Image Editor

The image editor control provides support to zoom and pan actions over an image. You can zoom in and zoom out the image in image editor control.

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/how-to/Clear-all-annotations.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: How to clear all annotations programmatically | Syncfusion
description: Learn here about how to clear all the annotations (Text, Shapes, Paths, Custom views) alone added in the image editor.
title: How to clear all annotations in UWP Image Editor | Syncfusion®
description: Learn how to clear all annotations in Syncfusion® UWP Image Editor control including text, shapes, and paths.
platform: uwp
control: SfImageEditor
documentation : ug
---

# Clear all annotations (Text, Shapes, Paths, etc) from Image Editor
# How to clear all annotations in UWP Image Editor

By invoking the [`ClearAnnotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ClearAnnotations) method of SfImageEditor, you can clear all the annotations (Text, Shapes, Path, and CustomView) added in the image editor without resetting the other edits (Rotation, Flip, Crop, Effects, etc).

Expand Down
6 changes: 3 additions & 3 deletions uwp/Image-Editor/how-to/Select-shapes-programmatically.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: How to select annotations programmatically | Syncfusion
description: Learn here about how to select the annotations (Text, Shapes, Paths, Custom views) added in the image editor programmatically.
title: How to select shapes in UWP Image Editor | Syncfusion®
description: Learn how to select annotations programmatically in Syncfusion® UWP Image Editor control with code examples.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Select annotations programmatically in Image Editor (SfImageEditor)
# How to select shapes in UWP Image Editor

In ImageEditor, the Unique ID is generated for all annotations (Text, Shapes, Paths, and CustomViews) when they are added to the image editor and you can get this Unique ID from the ItemsSelected event arguments or from the serialized JSON. By passing this Unique ID to the [`SelectShape`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_SelectShape_System_Int32_) method of SfImageEditor, you can select the particular annotation programmatically.

Expand Down
10 changes: 5 additions & 5 deletions uwp/Image-Editor/transformation.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Transform in UWP Image Editor control | Syncfusion
description: Learn here all about Transform support in Syncfusion UWP Image Editor (SfImageEditor) control and more.
title: Transform in UWP Image Editor | Syncfusion®
description: Discover image transformation features in Syncfusion® UWP Image Editor control including rotation and flip.
platform: uwp
control: SfImageEditor
documentation: ug
---

# Transform in UWP Image Editor (SfImageEditor)
# Transform in UWP Image Editor

The image editor control can perform the image transformations namely, `rotation` and `flip`. The transformations can be achieved in the following two ways:

Expand All @@ -33,7 +33,7 @@ N> Angle cannot be specified in code to alter the rotation angle of the image

{% endhighlight %}

![rotate](transformation_images/rotate.png)
![rotate](transformation_images/rotate.jpg)


## Flip
Expand All @@ -55,4 +55,4 @@ N> By default, image flips horizontally.

{% endhighlight %}

![FlipImage](transformation_images/FlipImage.png)
![FlipImage](transformation_images/FlipImage.jpg)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file added uwp/Image-Editor/transformation_images/rotate.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed uwp/Image-Editor/transformation_images/rotate.png
Binary file not shown.
Binary file added uwp/Image-Editor/undoRedo_images/UndoRedo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed uwp/Image-Editor/undoRedo_images/UndoRedo.png
Binary file not shown.