Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    ImageEditToEditModeBehavior Class

    Switches the associated ImageEdit to edit mode.

    Namespace: DevExpress.Xpf.Editors

    Assembly: DevExpress.Xpf.Core.v25.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