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
Related API Members
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
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:
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):
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:
<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.