Skip to main content
All docs
V24.1

ImageEditToEditModeBehavior Class

Switches the associated ImageEdit to edit mode.

Namespace: DevExpress.Xpf.Editors

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core

Declaration

public class ImageEditToEditModeBehavior :
    Behavior<ImageEdit>

The following members return ImageEditToEditModeBehavior objects:

Remarks

You can attach the ImageEditToEditModeBehavior to the ImageEdit to switch the editor to edit mode. In this mode, users can modify the image as follows:

  • Zoom
  • Pan
  • Crop
  • Rotate
  • Mirror

ImageEdit - ImageEditToEditModeBehavior

Note

The ImageEdit control does not support transparency.

<dxe:ImageEdit EditValue="{Binding Source, Mode=TwoWay}">
    <dxmvvm:Interaction.Behaviors>
        <dxe:ImageEditToEditModeBehavior/>
    </dxmvvm:Interaction.Behaviors>
</dxe:ImageEdit>

User Capabilities

  • Scroll the mouse wheel to scroll the image vertically.
  • Hold Shift and scroll the mouse wheel to scroll the image horizontally.
  • Hold Ctrl and scroll the mouse wheel to zoom the image in and out.

    MaxZoomFactor and MinZoomFactor properties specify the maximum/minimum scale factor to which users can zoom the image.

  • Hold a mouse button to activate the pan functionality.

Crop

When a user clicks the Crop button, the editor switches to crop mode. In this mode, the editor displays crop boundaries, and the image menu contains the resulting image size and confirmation buttons:

ImageEditToEditModeBehavior - Crop

The editor does not support the pan functionality in crop mode.

Change Edit Menu Buttons

In edit mode, the ImageEdit control populates its image menu with buttons that execute edit commands (crop, rotate, etc.) and Undo / Redo actions. The CustomEditMenuItems event allows you to add and remove buttons.

The following code sample removes zoom-related buttons (Zoom In and Zoom Out) and adds confirmation buttons (OK and Cancel):

ImageEdit EditMode - Customize Buttons

void editBehavior_CustomEditMenuItems(object sender, DevExpress.Xpf.Editors.CustomEditMenuItemsEventArgs e) {

    // Remove Zoom buttons:
    var items = e.EditMenuItems.ToList();
    foreach (var item in items) {
        if (item is ImageEditToolButtonInfo button 
            && button.Command == ((ImageEditToEditModeBehavior)sender).ZoomCommand)
            e.EditMenuItems.Remove(item);
    }

    // Add OK and Cancel buttons:
    e.EditMenuItems.Add(new ImageEditToolSeparatorInfo());
    e.EditMenuItems.Add(new ImageEditToolButtonInfo() {
        Glyph = ImageEditToolButtonHelper.ImageIdToImageSource("ok"),
        ToolTip = "OK",
        Command = new DelegateCommand(Confirm)
    });
    e.EditMenuItems.Add(new ImageEditToolButtonInfo() {
        Glyph = ImageEditToolButtonHelper.ImageIdToImageSource("cancel"),
        ToolTip = "Cancel",
        Command = new DelegateCommand(Close)
    });
}

Define Custom Edit Buttons

You can specify custom buttons and make them act like buttons from the edit menu. To do this, define your buttons and bind their Command properties to ImageEditToEditModeBehavior commands (alternatively, you can call corresponding ImageEditToEditModeBehavior methods).

Action Method Command
Undo Undo() UndoCommand
Redo Redo() RedoCommand
Zoom Zoom(Double) ZoomCommand
Pan Pan(Vector) PanCommand
Crop Crop(Rect) CropCommand
Display the Crop UI StartCrop() StartCropCommand
Rotate Rotate(Double) RotateCommand
Mirror Horizontally MirrorHorizontally() MirrorHorizontallyCommand
Mirror Vertically MirrorVertically() MirrorVerticallyCommand

The following example displays edit buttons in a separate container near the image editor:

ImageEditToEditModeBehavior - Custom Buttons

View Example: Edit Images in a Separate Window

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid>
        <StackPanel Margin="4">
            <StackPanel Orientation="Horizontal" Margin="0,4">
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).UndoCommand'}" 
                                 Glyph="{dx:DXImage 'SvgImages/Icon Builder/Actions_Undo.svg'}"/>
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).RedoCommand'}" 
                                 Glyph="{dx:DXImage 'SvgImages/Icon Builder/Actions_Redo.svg'}"/>
            </StackPanel>

            <TextBlock Text="Mirror:" Margin="4,0,0,0"/>
            <StackPanel Orientation="Horizontal">
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).MirrorHorizontallyCommand'}" 
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/FlipImage_Horizontal.svg'}"/>
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).MirrorVerticallyCommand'}"
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/FlipImage_Vertical.svg'}"/>
            </StackPanel>

            <TextBlock Text="Rotate:" Margin="4,0,0,0"/>
            <StackPanel Orientation="Horizontal">
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).RotateCommand'}" CommandParameter="90"
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/Rotate_Right90.svg'}"/>
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).RotateCommand'}" CommandParameter="-90"
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/Rotate_Left90.svg'}"/>
            </StackPanel>

            <TextBlock Text="Crop:" Margin="4,0,0,0"/>
            <dx:SimpleButton Command="{DXBinding '@e(editBehavior).StartCropCommand'}" HorizontalAlignment="Left"
                             Glyph="{dx:DXImage 'SvgImages/DiagramIcons/Image_StretchMode.svg'}"/>

            <TextBlock Text="Zoom:" Margin="4,0,0,0"/>
            <StackPanel Orientation="Horizontal">
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).ZoomCommand'}" CommandParameter="2" 
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/ZoomIn.svg'}"/>
                <dx:SimpleButton Command="{DXBinding '@e(editBehavior).ZoomCommand'}" CommandParameter="0.5"
                                 Glyph="{dx:DXImage 'SvgImages/DiagramIcons/ZoomOut.svg'}"/>
            </StackPanel>
        </StackPanel>

        <dx:ThemedWindowDialogButtonsControl HorizontalAlignment="Right" VerticalAlignment="Bottom">
            <dx:ThemedWindowDialogButton Content="Save"
                                         Glyph="{dx:DXImage 'SvgImages/DiagramIcons/save.svg'}"
                                         IsEnabled="{DXBinding '@e(editBehavior).HasChanges'}"
                                         DialogResult="OK"/>
            <dx:ThemedWindowDialogButton Content="Cancel"
                                         Glyph="{dx:DXImage 'SvgImages/HybridDemoIcons/BottomPanel/HybridDemo_Cancel.svg'}"
                                         DialogResult="Cancel"/>
        </dx:ThemedWindowDialogButtonsControl>
    </Grid>

    <dxe:ImageEdit Grid.Column="1" Margin="2"
                   EditValue="{Binding Source, Mode=TwoWay}"
                   ShowMenu="False">
        <dxmvvm:Interaction.Behaviors>
            <dxe:ImageEditToEditModeBehavior x:Name="editBehavior"/>
        </dxmvvm:Interaction.Behaviors>
    </dxe:ImageEdit>
</Grid>

The HasChanges property returns whether the processed image was modified.

Inheritance

Object
DispatcherObject
DependencyObject
Freezable
Animatable
DevExpress.Mvvm.UI.Interactivity.AttachableObjectBase
DevExpress.Mvvm.UI.Interactivity.Behavior
DevExpress.Mvvm.UI.Interactivity.Behavior<ImageEdit>
ImageEditToEditModeBehavior
See Also