diff --git a/uwp/Image-Editor/Crop.md b/uwp/Image-Editor/Crop.md index 1500da3f5..5d6f17bfa 100644 --- a/uwp/Image-Editor/Crop.md +++ b/uwp/Image-Editor/Crop.md @@ -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. @@ -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: @@ -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. @@ -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. @@ -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. diff --git a/uwp/Image-Editor/CustomView.md b/uwp/Image-Editor/CustomView.md index 5f6ecd4f6..e8d60e798 100644 --- a/uwp/Image-Editor/CustomView.md +++ b/uwp/Image-Editor/CustomView.md @@ -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 diff --git a/uwp/Image-Editor/Getting-Started.md b/uwp/Image-Editor/Getting-Started.md index 31e067265..9b161425d 100644 --- a/uwp/Image-Editor/Getting-Started.md +++ b/uwp/Image-Editor/Getting-Started.md @@ -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. diff --git a/uwp/Image-Editor/ImageFilter.md b/uwp/Image-Editor/ImageFilter.md index eab387f95..5d63ac541 100644 --- a/uwp/Image-Editor/ImageFilter.md +++ b/uwp/Image-Editor/ImageFilter.md @@ -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: diff --git a/uwp/Image-Editor/Overview.md b/uwp/Image-Editor/Overview.md index 57c1f9fd0..372c1c58e 100644 --- a/uwp/Image-Editor/Overview.md +++ b/uwp/Image-Editor/Overview.md @@ -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. diff --git a/uwp/Image-Editor/SaveandResetEvents.md b/uwp/Image-Editor/SaveandResetEvents.md index 4873ce2a6..34335387d 100644 --- a/uwp/Image-Editor/SaveandResetEvents.md +++ b/uwp/Image-Editor/SaveandResetEvents.md @@ -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: diff --git a/uwp/Image-Editor/Serialization.md b/uwp/Image-Editor/Serialization.md index e2758dab1..6f687afd5 100644 --- a/uwp/Image-Editor/Serialization.md +++ b/uwp/Image-Editor/Serialization.md @@ -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 diff --git a/uwp/Image-Editor/Shapes.md b/uwp/Image-Editor/Shapes.md index d690e8b0f..aa7197e2c 100644 --- a/uwp/Image-Editor/Shapes.md +++ b/uwp/Image-Editor/Shapes.md @@ -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. diff --git a/uwp/Image-Editor/Text.md b/uwp/Image-Editor/Text.md index 00f917f26..85f1c0e4e 100644 --- a/uwp/Image-Editor/Text.md +++ b/uwp/Image-Editor/Text.md @@ -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: diff --git a/uwp/Image-Editor/ToolbarCustomization.md b/uwp/Image-Editor/ToolbarCustomization.md index 53c3fbace..88b7150d6 100644 --- a/uwp/Image-Editor/ToolbarCustomization.md +++ b/uwp/Image-Editor/ToolbarCustomization.md @@ -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. diff --git a/uwp/Image-Editor/UndoRedo.md b/uwp/Image-Editor/UndoRedo.md index c47e81743..69e5e6fbb 100644 --- a/uwp/Image-Editor/UndoRedo.md +++ b/uwp/Image-Editor/UndoRedo.md @@ -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: @@ -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) diff --git a/uwp/Image-Editor/Z-Ordering.md b/uwp/Image-Editor/Z-Ordering.md index 298ef0941..c624646b8 100644 --- a/uwp/Image-Editor/Z-Ordering.md +++ b/uwp/Image-Editor/Z-Ordering.md @@ -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: diff --git a/uwp/Image-Editor/Zooming.md b/uwp/Image-Editor/Zooming.md index c995275ce..3f53b631c 100644 --- a/uwp/Image-Editor/Zooming.md +++ b/uwp/Image-Editor/Zooming.md @@ -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. diff --git a/uwp/Image-Editor/how-to/Clear-all-annotations.md b/uwp/Image-Editor/how-to/Clear-all-annotations.md index 4f61f901e..071bd61a0 100644 --- a/uwp/Image-Editor/how-to/Clear-all-annotations.md +++ b/uwp/Image-Editor/how-to/Clear-all-annotations.md @@ -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). diff --git a/uwp/Image-Editor/how-to/Select-shapes-programmatically.md b/uwp/Image-Editor/how-to/Select-shapes-programmatically.md index 86b6ccd0c..348b69582 100644 --- a/uwp/Image-Editor/how-to/Select-shapes-programmatically.md +++ b/uwp/Image-Editor/how-to/Select-shapes-programmatically.md @@ -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. diff --git a/uwp/Image-Editor/transformation.md b/uwp/Image-Editor/transformation.md index 9a7224b43..20016d00e 100644 --- a/uwp/Image-Editor/transformation.md +++ b/uwp/Image-Editor/transformation.md @@ -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: @@ -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 @@ -55,4 +55,4 @@ N> By default, image flips horizontally. {% endhighlight %} -![FlipImage](transformation_images/FlipImage.png) +![FlipImage](transformation_images/FlipImage.jpg) diff --git a/uwp/Image-Editor/transformation_images/FlipImage.jpg b/uwp/Image-Editor/transformation_images/FlipImage.jpg new file mode 100644 index 000000000..370fb4dbd Binary files /dev/null and b/uwp/Image-Editor/transformation_images/FlipImage.jpg differ diff --git a/uwp/Image-Editor/transformation_images/FlipImage.png b/uwp/Image-Editor/transformation_images/FlipImage.png deleted file mode 100644 index f13b6fa1d..000000000 Binary files a/uwp/Image-Editor/transformation_images/FlipImage.png and /dev/null differ diff --git a/uwp/Image-Editor/transformation_images/rotate.jpg b/uwp/Image-Editor/transformation_images/rotate.jpg new file mode 100644 index 000000000..390837161 Binary files /dev/null and b/uwp/Image-Editor/transformation_images/rotate.jpg differ diff --git a/uwp/Image-Editor/transformation_images/rotate.png b/uwp/Image-Editor/transformation_images/rotate.png deleted file mode 100644 index 6aa90e530..000000000 Binary files a/uwp/Image-Editor/transformation_images/rotate.png and /dev/null differ diff --git a/uwp/Image-Editor/undoRedo_images/UndoRedo.jpg b/uwp/Image-Editor/undoRedo_images/UndoRedo.jpg new file mode 100644 index 000000000..fd8ace847 Binary files /dev/null and b/uwp/Image-Editor/undoRedo_images/UndoRedo.jpg differ diff --git a/uwp/Image-Editor/undoRedo_images/UndoRedo.png b/uwp/Image-Editor/undoRedo_images/UndoRedo.png deleted file mode 100644 index 0eded8bff..000000000 Binary files a/uwp/Image-Editor/undoRedo_images/UndoRedo.png and /dev/null differ