wpf-devexpress-dot-xpf-dot-editors-757a4abd.md
Switches the associated ImageEdit to edit mode.
Namespace : DevExpress.Xpf.Editors
Assembly : DevExpress.Xpf.Core.v25.2.dll
NuGet Package : DevExpress.Wpf.Core
public class ImageEditToEditModeBehavior :
Behavior<ImageEdit>
Public Class ImageEditToEditModeBehavior
Inherits Behavior(Of ImageEdit)
The following members return ImageEditToEditModeBehavior objects:
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:
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>
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.
Hold a mouse button to activate the pan functionality.
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.
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)
});
}
Private Sub editBehavior_CustomEditMenuItems(ByVal sender As Object, ByVal e As DevExpress.Xpf.Editors.CustomEditMenuItemsEventArgs)
' Remove Zoom buttons:
Dim items = e.EditMenuItems.ToList()
For Each item In items
If TypeOf item Is ImageEditToolButtonInfo AndAlso (CType(item, ImageEditToolButtonInfo)).Command = (CType(sender, ImageEditToEditModeBehavior)).ZoomCommand Then e.EditMenuItems.Remove(item)
Next
' Add OK and Cancel buttons:
e.EditMenuItems.Add(New ImageEditToolSeparatorInfo())
e.EditMenuItems.Add(New ImageEditToolButtonInfo() With {
.Glyph = ImageEditToolButtonHelper.ImageIdToImageSource("ok"),
.ToolTip = "OK",
.Command = New DelegateCommand(Confirm)
})
e.EditMenuItems.Add(New ImageEditToolButtonInfo() With {
.Glyph = ImageEditToolButtonHelper.ImageIdToImageSource("cancel"),
.ToolTip = "Cancel",
.Command = New DelegateCommand(Close)
})
End Sub
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:
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.
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the ImageEditToEditModeBehavior class.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.
wpf-imageedit-edit-images-in-separate-window/CS/ImageEditToEditModeBehavior/EditImageWindow.xaml#L83
<dxmvvm:Interaction.Behaviors>
<dxe:ImageEditToEditModeBehavior x:Name="editBehavior" CustomEditMenuItems="editBehavior_CustomEditMenuItems"/>
</dxmvvm:Interaction.Behaviors>
Object DispatcherObject DependencyObject Freezable Animatable DevExpress.Mvvm.UI.Interactivity.AttachableObjectBase DevExpress.Mvvm.UI.Interactivity.Behavior DevExpress.Mvvm.UI.Interactivity.Behavior<ImageEdit> ImageEditToEditModeBehavior
See Also