How to: Customize the Image Editor's Menu

• Aug 01, 2019
• 3 minutes to read

This example shows how to customize the editor's menu and display custom buttons used to apply image effects.

View Example

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Effects;

namespace CustomizationDemo {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private void OnApplyEffectButtonClick(object sender, RoutedEventArgs e) {
            if(edit.ImageEffect == null)
                edit.ImageEffect = new GrayscaleEffect();
        }

        private void OnUndoEffectButtonClick(object sender, RoutedEventArgs e) {
            edit.ImageEffect = null;
        }
    }
}

MainWindow.xaml

<Window x:Class="CustomizationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxe:ImageEdit Name="edit">
            <dxe:ImageEdit.MenuTemplate>
                <ControlTemplate>
                    <StackPanel Orientation="Horizontal">
                        <dxe:ImageEditToolButton ToolTip="Grayscale" Click="OnApplyEffectButtonClick"
                            ImageSource="/CustomizationDemo;component/Images/inactive.png" />
                        <dxe:ImageEditToolButton ToolTip="Normal" Click="OnUndoEffectButtonClick"
                            ImageSource="/CustomizationDemo;component/Images/active.png" />
                        <dxe:ImageEditToolSeparator />
                        <dxe:ImageEditCopyToolButton />
                        <dxe:ImageEditLoadToolButton />
                        <dxe:ImageEditSaveToolButton />
                    </StackPanel>
                </ControlTemplate>
            </dxe:ImageEdit.MenuTemplate>
        </dxe:ImageEdit>
    </Grid>
</Window>

ShaderEffect.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media.Effects;
using System.Windows;
using System.Windows.Media;

namespace CustomizationDemo {
    public class GrayscaleEffect : ShaderEffect {
        static PixelShader pixelShader = new PixelShader() { 
            UriSource = new Uri(@"pack://application:,,,/CustomizationDemo;component/GrayscaleEffect.ps")
        };
        public static readonly DependencyProperty InputProperty = 
            ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(GrayscaleEffect), 0);
        public static readonly DependencyProperty DesaturationFactorProperty = 
            DependencyProperty.Register("DesaturationFactor", 
                                        typeof(double), 
                                        typeof(GrayscaleEffect),
                                        new UIPropertyMetadata(0.0, 
                                                               PixelShaderConstantCallback(0),
                                                               CoerceDesaturationFactor));
        static object CoerceDesaturationFactor(DependencyObject d, object value) {
            GrayscaleEffect effect = (GrayscaleEffect)d;
            double newFactor = (double)value;
            if(newFactor < 0.0 || newFactor > 1.0) 
                return effect.DesaturationFactor;
            return newFactor;
        }

        public GrayscaleEffect() {
            PixelShader = pixelShader;
            UpdateShaderValue(InputProperty);
            UpdateShaderValue(DesaturationFactorProperty);
        }
        public Brush Input {
            get { return (Brush)GetValue(InputProperty); }
            set { SetValue(InputProperty, value); }
        }
        public double DesaturationFactor {
            get { return (double)GetValue(DesaturationFactorProperty); }
            set { SetValue(DesaturationFactorProperty, value); }
        }
    }
}

ShaderEffect.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Media.Effects
Imports System.Windows
Imports System.Windows.Media

Namespace CustomizationDemo
    Public Class GrayscaleEffect
        Inherits ShaderEffect
        Private Shared fPixelShader As New PixelShader() With { _
            .UriSource = New Uri("pack://application:,,,/CustomizationDemo;component/GrayscaleEffect.ps")}
        Public Shared ReadOnly InputProperty As DependencyProperty = _
            ShaderEffect.RegisterPixelShaderSamplerProperty("Input", GetType(GrayscaleEffect), 0)
        Public Shared ReadOnly DesaturationFactorProperty As DependencyProperty = _
            DependencyProperty.Register("DesaturationFactor", _
                                        GetType(Double), _
                                        GetType(GrayscaleEffect), _
                                        New UIPropertyMetadata(0.0, _
                                                               PixelShaderConstantCallback(0), _
                                                               AddressOf CoerceDesaturationFactor))
        Private Shared Function CoerceDesaturationFactor(ByVal d As DependencyObject, _
                ByVal value As Object) As Object
            Dim effect As GrayscaleEffect = CType(d, GrayscaleEffect)
            Dim newFactor As Double = CDbl(value)
            If newFactor < 0.0 OrElse newFactor > 1.0 Then
                Return effect.DesaturationFactor
            End If
            Return newFactor
        End Function

        Public Sub New()
            PixelShader = fPixelShader
            UpdateShaderValue(InputProperty)
            UpdateShaderValue(DesaturationFactorProperty)
        End Sub
        Public Property Input() As Brush
            Get
                Return CType(GetValue(InputProperty), Brush)
            End Get
            Set(ByVal value As Brush)
                SetValue(InputProperty, value)
            End Set
        End Property
        Public Property DesaturationFactor() As Double
            Get
                Return CDbl(GetValue(DesaturationFactorProperty))
            End Get
            Set(ByVal value As Double)
                SetValue(DesaturationFactorProperty, value)
            End Set
        End Property
    End Class
End Namespace

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports System.Windows.Media.Effects

Namespace CustomizationDemo
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub OnApplyEffectButtonClick(ByVal sender As Object, ByVal e As RoutedEventArgs)
            If edit.ImageEffect Is Nothing Then
                edit.ImageEffect = New GrayscaleEffect()
            End If
        End Sub

        Private Sub OnUndoEffectButtonClick(ByVal sender As Object, ByVal e As RoutedEventArgs)
            edit.ImageEffect = Nothing
        End Sub
    End Class
End Namespace