How to detect cropping window is enabled or not?
This section explains how to detect cropping window is enabled or not in imageeditor.
Create SfImageEditor sample with all necessary assemblies.
Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.
https://help.syncfusion.com/xamarin/sfimageeditor/getting-started
To detect cropping window is enabled or not in two ways such as using toolbar visibility and without using toolbar.
For example, switch is used to indicate if cropping window is enabled or not. If cropping window is enabled, then switch is going to on state if it is not enabled then switch is going to off state.
Without using toolbar:
Step 1: Add buttons and switch to call the toggle cropping, crop methods as like below code snippet
In XAML
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"></RowDefinition>
<RowDefinition Height="0.9*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="Crop" Text ="Crop" Clicked="Crop_Clicked" Grid.Column="0"></Button>
<Button x:Name="Cancel" Text ="Cancel" Clicked="Cancel_Clicked" Grid.Column="1"></Button>
<Button x:Name="toggle" Grid.ColumnSpan="2" Text="Toggle Cropping" IsVisible="False" Clicked="toggle_Clicked" />
<Switch x:Name="Switch" Grid.Column="2" IsToggled="{Binding IsEnabled}"></Switch>
</Grid>
<imageeditor:SfImageEditor Grid.Row="1" x:Name="editor">
</imageeditor:SfImageEditor>
</Grid>
Step 2: Create a view model with Is Enabled Boolean property to bind with switch as like below code snippet
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
bool isEnabled;
public bool IsEnabled
{
get { return isEnabled; }
set
{
isEnabled = value;
OnPropertyChanged("IsEnabled");
}
}
void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
Step 3: To hide the toolbar visibility, you need to set toolbar visibility to false as like below code snippet
editor.ToolbarSettings.IsVisible = false;
Step 4: Add Toggle Cropping method in button click or image loaded event. It will show the cropping window on an image. If you want to add cropping window when image loads in image editor, then you have to call toggle cropping in image loaded event as like below code snippet
editor.ImageLoaded += CropEditor_ImageLoaded;
private void CropEditor_ImageLoaded(object sender, ImageLoadedEventArgs args)
{
editor.ToggleCropping(1, 1);
}
Step 5: Call crop method in crop button click event to crop the image as like below code snippet.
private void Crop_Clicked(object sender, EventArgs e)
{
editor.Crop();
}
Step 6: To disable the cropping window, you need to call again toggle cropping method as like
private void Cancel_Clicked(object sender, EventArgs e)
{
editor.ToggleCropping();
}
Step 7: Set the Is Enabled property to true when call the toggle cropping method as like
private void CropEditor_ImageLoaded(object sender, ImageLoadedEventArgs args)
{
editor.ToggleCropping(1,1);
model.IsEnabled = true;
}
IsEnabled property is binded with Toggled Switch. So, whenever you set the IsEnabled property to true the switch is on.
Step 8: Set the IsEnabled property to false when call the crop method and disable the cropping window as like
private void Cancel_Clicked(object sender, EventArgs e)
{
editor.ToggleCropping();
model.IsEnabled = false;
}
private void Crop_Clicked(object sender, EventArgs e)
{
if (model.IsEnabled)
{
editor.Crop();
}
model.IsEnabled = false;
}
Screen Shot:
Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample-295940928.zip
Using Toolbar:
Step 1: Add switch and bind the switch with Is Enabled property in above mention step 1 and step2.
Step 2: Add the cropping window in image loaded event and set IsEnabled property to true as like above step 7.
Step 3: To detect cropping window is enabled or not using toolbar, you need to implement toolbar item selected event and set the Is Enabled to true when select the crop toolbar item. Set Is Enabled property to false when select the ok and cancel toolbar item.
editor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected;
private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
{
if (e.ToolbarItem.Name.ToLower() == "ok")
{
model.IsEnabled = false;
}
if (e.ToolbarItem.Name.ToLower() == "cancel")
{
model.IsEnabled = false;
}
if (e.ToolbarItem.Name.ToLower() == "crop")
{
model.IsEnabled = true;
}
}
Screen shot:
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CropSample151783984.zip
