Articles in this section
Category / Section

How to detect cropping window is enabled or not?

3 mins read

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:

 

To detect the cropping window is enabled or not without using toolbar.

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:

 

To detect the cropping window is enabled or not using Xamarin SfImageEditor.

 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CropSample151783984.zip

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied