From a19fcc1ce4708a000f9e1bd98d6ff723ab2f7422 Mon Sep 17 00:00:00 2001 From: SanjayKumar Date: Wed, 8 Jul 2026 11:00:19 +0530 Subject: [PATCH] changes in Getting-Started.md file --- wpf/Image-Editor/Getting-Started.md | 118 +++++++++++++++++----------- 1 file changed, 70 insertions(+), 48 deletions(-) diff --git a/wpf/Image-Editor/Getting-Started.md b/wpf/Image-Editor/Getting-Started.md index 323b178377..8ed1b2216d 100644 --- a/wpf/Image-Editor/Getting-Started.md +++ b/wpf/Image-Editor/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started for the Syncfusion ImageEditor. -description: This section describes in step by step on how to get start with simple application using SfImageEditor in WPF in detail. +title: Getting Started with the Syncfusion SfImageEditor for WPF +description: This section explains, step by step, how to get started with a simple application using the SfImageEditor control in WPF. platform: wpf control: SfImageEditor documentation: ug @@ -9,120 +9,142 @@ documentation: ug # Getting Started with SfImageEditor -This section explains the steps required to load an image to the image editor control. It has a built-in toolbar that helps in performing various editing operations such as flip, crop, rotate, save, annotating with shapes, text, path (i.e. free hand drawing), zoom, and pan. +This section explains the steps required to load an image into the SfImageEditor control. It includes a built-in toolbar that helps perform various editing operations such as flip, crop, rotate, save, annotate with shapes, add text, draw free-hand paths, zoom, and pan. ## Adding ImageEditor reference -Refer to this [document](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls in Visual Studio projects through various ways. Refer to this [document](https://help.syncfusion.com/wpf/control-dependencies) to learn about the assemblies required for adding ImageEditor to your project. +Refer to the following documents to learn how to add Syncfusion controls in Visual Studio projects and the assemblies required for adding the ImageEditor to your project: + +* [Add Syncfusion controls](https://help.syncfusion.com/wpf/add-syncfusion-controls) to Visual Studio projects through various ways. +* [Control dependencies](https://help.syncfusion.com/wpf/control-dependencies) describes the assemblies required for adding the ImageEditor to your project. ## Initialize ImageEditor Import the Image editor namespace as demonstrated in the following code snippet. -{% tabs %} +{% tabs %} -{% highlight xaml %} +{% highlight xaml %} -xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF" + + + + + {% endhighlight %} -{% highlight C# %} +{% highlight C# %} using Syncfusion.UI.Xaml.ImageEditor; {% endhighlight %} -{% endtabs %} +{% endtabs %} -You can either use the below schemas or the above mentioned namespace to refer the ImageEditor control in xaml. +You can also use the following schema instead of the namespace shown above to refer to the ImageEditor control in XAML. -{% tabs %} +{% tabs %} -{% highlight xaml %} +{% highlight xaml %} xmlns:editor="http://schemas.syncfusion.com/wpf" {% endhighlight %} -{% endtabs %} +{% endtabs %} Then, initialize the image editor as demonstrated in the following code snippet. -{% tabs %} +{% tabs %} -{% highlight xaml %} +{% highlight xaml %} - - + + {% endhighlight %} -{% highlight C# %} +{% highlight C# %} - SfImageEditor editor = new SfImageEditor(); +using Syncfusion.UI.Xaml.ImageEditor; + +SfImageEditor editor = new SfImageEditor(); {% endhighlight %} -{% endtabs %} +{% endtabs %} ## Loading image in ImageEditor -Image can be loaded in the following two ways: +An image can be loaded into the ImageEditor in the following ways: -* Using image source -* Using stream +* Using an image source +* Using a stream You can load the [`ImageSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ImageSource) as demonstrated in the following code snippet. -{% tabs %} +{% tabs %} -{% highlight xaml %} +{% highlight xaml %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using System; +using System.Windows.Media.Imaging; +using Syncfusion.UI.Xaml.ImageEditor; - BitmapImage image = new BitmapImage(); - image.BeginInit(); - image.UriSource = new Uri(@"Assets/Buldingimage.jpeg", UriKind.Relative); - image.EndInit(); - editor.ImageSource = image; +BitmapImage image = new BitmapImage(); +image.BeginInit(); +image.UriSource = new Uri(@"Assets/Buldingimage.jpeg", UriKind.Relative); +image.EndInit(); +editor.ImageSource = image; {% endhighlight %} -{% endtabs %} +{% endtabs %} + +You can load the image as a stream using the [`Image`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_Image) property, as shown in the following code snippet. -You can load the image as stream using the [`Image`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_Image) property as in the following code snippet. +{% tabs %} -{% highlight C# %} +{% highlight C# %} - OpenFileDialog openFileDialog = new OpenFileDialog(); - openFileDialog.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.* "; +using System.Windows; +using Microsoft.Win32; +using Syncfusion.UI.Xaml.ImageEditor; - if (openFileDialog.ShowDialog() == true) - { - var stream = openFileDialog.OpenFile(); - editor.Image = stream; - } +OpenFileDialog openFileDialog = new OpenFileDialog(); +openFileDialog.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"; + +if (openFileDialog.ShowDialog() == true) +{ + var stream = openFileDialog.OpenFile(); + editor.Image = stream; +} {% endhighlight %} -![ImageEditor](Images/ImageEditor.png) +{% endtabs %} + +![SfImageEditor with a loaded image](Images/ImageEditor.png) ## Theme - Image editor control supports various built-in themes. Refer to the below links to apply themes for the Image editor control, +The ImageEditor control supports various built-in themes. Refer to the following links to apply themes to the ImageEditor control: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) +* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Setting theme to WPF ImageEditor](Images/Theme.jpg) +![Setting theme to WPF ImageEditor](Images/Theme.jpg) ## See also -[How to retrieve a edited image as a stream in an image editor](https://support.syncfusion.com/kb/article/9828/how-to-retrieve-a-edited-image-as-a-stream-in-wpf-image-editor) +[How to retrieve an edited image as a stream in the WPF ImageEditor](https://support.syncfusion.com/kb/article/9828/how-to-retrieve-a-edited-image-as-a-stream-in-wpf-image-editor)