Skip to content

Changes in Getting-Started.md file #2333

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
SanjaySF4372 wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Changes in Getting-Started.md file #2333

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
118 changes: 70 additions & 48 deletions wpf/Image-Editor/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,150 @@
---
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
---

# 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"
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF">
<Grid>
<editor:SfImageEditor x:Name="editor" />
</Grid>
</Window>

{% 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 %}

<editor:SfImageEditor>
</editor:SfImageEditor>
<editor:SfImageEditor>
</editor:SfImageEditor>

{% 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 %}

<editor:SfImageEditor x:Name="editor" ImageSource="Assets/Buldingimage.jpeg">
</editor:SfImageEditor>

{% 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)