Skip to content

Changes in SaveandResetEvents.md file #993

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 SaveandResetEvents.md file #993

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: 73 additions & 45 deletions uwp/Image-Editor/SaveandResetEvents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ The image can be saved along with the changes. Saving an image can be done in th

## From Toolbar

To save an image from the toolbar, click the `Save` button in the top toolbar. The saved image will be added in default pictures library "C:\\Users\\your name\\Pictures\\Saved Pictures".
To save an image from the toolbar, click the `Save` button in the top toolbar. The saved image will be added to the default pictures library at `C:\\Users\\your name\\Pictures\\Saved Pictures`.

## Using Code

Programmatically, `Save` method can be used in the SfImageEditor control to save the image.
Programmatically, the `Save` method can be used in the SfImageEditor control to save the image.


{% highlight C# %}
Expand All @@ -32,27 +32,31 @@ Programmatically, `Save` method can be used in the SfImageEditor control to save

## Events

The SfImageEditor has Events namely, [`ImageSaving`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`ImageSaved`](https://help.syncfusion.com/cr/uwp/sfimageeditor).
The SfImageEditor has the following events: [`ImageSaving`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`ImageSaved`](https://help.syncfusion.com/cr/uwp/sfimageeditor).

## ImageSaving

This event occurs before saving the image. Described the ImageSaving event arguments below.
This event occurs before saving the image. The `ImageSaving` event arguments are described below.

`Cancel` : You can control the save functionality using the `Cancel` argument.

It restricts saving image to the default location when set `Cancel` value to `true`.
It restricts saving the image to the default location when the `Cancel` value is set to `true`.

{% tabs %}

{% highlight xaml %}
{% highlight XAML %}

xmlns:imageeditor="using:Syncfusion.UI.Xaml.ImageEditor"

<imageeditor:SfImageEditor ImageSaving="SfImageEditor_ImageSaving" />

{% endhighlight %}

{% highlight C# %}

private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.ImageSavingEventArgs args)
using Syncfusion.UI.Xaml.ImageEditor;

private void SfImageEditor_ImageSaving(object sender, ImageSavingEventArgs args)
{
args.Cancel = true;
}
Expand All @@ -61,22 +65,26 @@ It restricts saving image to the default location when set `Cancel` value to `tr

{% endtabs %}

`Stream` : You can get current image edits as stream using this argument.
`Stream` : You can get the current image edits as a stream using this argument.

{% highlight C# %}

private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.ImageSavingEventArgs args)
using Syncfusion.UI.Xaml.ImageEditor;

private void SfImageEditor_ImageSaving(object sender, ImageSavingEventArgs args)
{
var stream = args.Stream;
}

{% endhighlight %}

`FileName`: You can save the edited image in the specified name.
`FileName`: You can save the edited image using the specified file name.

{% highlight C# %}

{% highlight c# %}
using Syncfusion.UI.Xaml.ImageEditor;

private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.ImageSavingEventArgs args)
private void SfImageEditor_ImageSaving(object sender, ImageSavingEventArgs args)
{
args.FileName = "SavedImage";
}
Expand All @@ -95,14 +103,16 @@ This event occurs after the image has been saved. To get the location of the sav

## Saving image with custom size and format

The [`Save`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_Save_System_String_Windows_Foundation_Size_) method in the SfImageEditor control allows user to save an image in different format such as `png`, `jpg`, and `bmp`.
The [`Save`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_Save_System_String_Windows_Foundation_Size_) method in the SfImageEditor control allows the user to save an image in different formats such as `png`, `jpg`, and `bmp`.

You can choose the format while saving the image.

{% tabs %}

{% highlight C# %}

using Windows.Foundation;

imageEditor.Save(".png");

{% endhighlight %}
Expand All @@ -115,7 +125,9 @@ You can choose the format and size while saving the image as follows.

{% highlight C# %}

imageEditor.Save(".png",new Size(913,764));
using Windows.Foundation;

imageEditor.Save(".png", new Size(913, 764));

{% endhighlight %}

Expand All @@ -125,15 +137,15 @@ N> Supported formats are `.png`, `.jpg`, and `.bmp`.

## Reset

You can `reset` the changes which has been made in the image.
You can reset the changes that have been made in the image.

### From Toolbar

To reset the changes from the toolbar, click the `Reset` button in the top toolbar. The changes will be reset and the initial loaded image will appear.
To reset the changes from the toolbar, click the `Reset` button in the top toolbar. The changes will be reset, and the initially loaded image will appear.

### Using Code

The `Reset` method resets the all changes which has been made in the image and resets the original loaded image to the Image Editor control.
The `Reset` method resets all the changes that have been made in the image and restores the originally loaded image to the Image Editor control.


{% highlight C# %}
Expand All @@ -144,14 +156,16 @@ The `Reset` method resets the all changes which has been made in the image and r

## Events

The SfImageEditor has Events namely, [`BeginReset`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`EndReset`](https://help.syncfusion.com/cr/uwp/sfimageeditor).
The SfImageEditor has the following events: [`BeginReset`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`EndReset`](https://help.syncfusion.com/cr/uwp/sfimageeditor).

## BeginReset

This event occurs before resetting the changes in an image. You can control the reset functionality by using the `Cancel` argument.

{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;

public MainPage()
{
. . .
Expand All @@ -163,17 +177,19 @@ This event occurs before resetting the changes in an image. You can control the

private void editor_BeginReset(object sender, BeginResetEventArgs args)
{
args.Cancel = true; //It restricts resetting image to initial loaded image.
args.Cancel = true; //It restricts resetting the image to its initial loaded state.
}

{% endhighlight %}

## EndReset

This event occurs when reset has been completed.
This event occurs when the reset has been completed.

{% highlight C# %}

using Windows.UI.Xaml.Controls;

public MainPage()
{
. . .
Expand All @@ -186,17 +202,19 @@ This event occurs when reset has been completed.
private void editor_EndReset(object sender, EndResetEventArgs args)
{

this.Frame.Navigate(typeof(NewPage)); //Navigates to new page after completing the reset action.
this.Frame.Navigate(typeof(NewPage)); //Navigates to a new page after completing the reset action.
}

{% endhighlight %}

## ImageLoaded event

This event will be triggered after the image has been loaded. By this event you can add any shapes or text over an image or crop an image while initially loading the image.
This event will be triggered after the image has been loaded. Using this event, you can add any shapes or text over an image, or crop an image while initially loading the image.

{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;

public MainPage()
{
. . .
Expand All @@ -216,10 +234,14 @@ This event will be triggered after the image has been loaded. By this event you

## ItemSelected event

This event will be triggered whenever you tap the selected shapes (rectangle, circle, and arrow), text or custom view. You can get the settings of each selected shapes, text or custom view using the ItemSelected argument. You can also change the settings that will affect the selected shapes.
This event will be triggered whenever you tap the selected shapes (rectangle, circle, and arrow), text, or custom view. You can get the settings of each selected shape, text, or custom view using the `ItemSelected` argument. You can also change the settings that will affect the selected shapes.

{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;
using Windows.UI;
using Windows.UI.Xaml.Media;

public MainPage()
{
. . .
Expand All @@ -232,7 +254,7 @@ This event will be triggered whenever you tap the selected shapes (rectangle, ci

private void Editor_ImageLoaded(object sender, ImageLoadedEventArgs args)
{
imageEditor.AddShape(ShapeType.Circle, new PenSettings() {Mode = Mode.Stroke });
imageEditor.AddShape(ShapeType.Circle, new PenSettings() { Mode = Mode.Stroke });
}

private void Editor_ItemSelected(object sender, ItemSelectedEventArgs args)
Expand All @@ -254,17 +276,21 @@ This event will be triggered whenever you tap the selected shapes (rectangle, ci

## ItemUnselected event

This event will be triggered whenever you change the shape selections from one shape to another shape (rectangle, circle, arrow, and text). You can get the settings of previous selected shapes, text or custom view using the ItemUnselected event. You can also change the settings of previous selected shapes.
This event will be triggered whenever you change the shape selection from one shape to another shape (rectangle, circle, arrow, and text). You can get the settings of the previously selected shape, text, or custom view using the `ItemUnselected` event. You can also change the settings of the previously selected shapes.

{% highlight C# %}

public MainPage()
{
imageEditor.ItemUnselected += Editor_ItemUnselected;
}
using Syncfusion.UI.Xaml.ImageEditor;
using Windows.UI;
using Windows.UI.Xaml.Media;

public MainPage()
{
imageEditor.ItemUnselected += Editor_ItemUnselected;
}

private void Editor_ItemUnselected(object sender, ItemUnselectedEventArgs args)
{
private void Editor_ItemUnselected(object sender, ItemUnselectedEventArgs args)
{
var settings = args.Settings;

if (settings is PenSettings)
Expand All @@ -275,29 +301,31 @@ private void Editor_ItemUnselected(object sender, ItemUnselectedEventArgs args)
{
(settings as TextSettings).Color = new SolidColorBrush(Colors.Green);
}
}
}

{% endhighlight %}

## ImageEdited event

This event occurs whenever you start to edit an image. You can know whether the current image is edited or not using the IsImageEdited argument.
This event occurs whenever you start to edit an image. You can know whether the current image is edited using the `IsImageEdited` argument.

{% highlight C# %}

{% highlight c# %}
using Syncfusion.UI.Xaml.ImageEditor;

public MainPage()
{
. . .
imageEditor.ImageEdited += ImageEditor_ImageEdited;
. . .
}
public MainPage()
{
. . .
imageEditor.ImageEdited += ImageEditor_ImageEdited;
. . .
}

private void ImageEditor_ImageEdited(object sender, ImageEditedEventArgs e)
{
if (args.IsImageEdited)
private void ImageEditor_ImageEdited(object sender, ImageEditedEventArgs e)
{
}
}
if (e.IsImageEdited)
{
}
}

{% endhighlight %}

Expand Down