WPF Context Menu on button click

Problem – How to show context menu on button click

It’s easy to show context menu on Button right click (i.e. actual behaviour), but showing menu and binding command when click on button is bit tricky.

Key issue 1 – Enable context menu on button click. It can be done through style trigger on button click

Key issue 2 – Since context open in as kind of pop up window the visual tree of MenuItem are not in same visual tree as that of button, it can be solved by creating a dependency property to pass button data context to context menu.

SubmitBtn – is a ICommand type in ViewModel class.

View Code

WpfApp.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”clr-namespace:WpfApp”
Title=”MainWindow” Height=”350″ Width=”525″>
<Grid>
<Button Grid.Row=”3″ Width=”500″ Height=”30″ Content=”Click me!” Name=”cmButton”>
<Button.Resources>
<local:BindingProxy x:Key=”proxy” Data=”{Binding}”/>
</Button.Resources>
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header=”New Layout Element…”
Command=”{Binding Path=Data.SubmitBtn,
Source={StaticResource proxy}}” />
</ContextMenu>
</Button.ContextMenu>
<Button.Style>
<Style TargetType=”{x:Type Button}”>
<Style.Triggers>
<EventTrigger RoutedEvent=”Click”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty=”ContextMenu.IsOpen”>
<DiscreteBooleanKeyFrame KeyTime=”0:0:0″ Value=”True”/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>

 Dependancy class – BindingProxy

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

namespace WpfApp
{
public class BindingProxy : Freezable
{
#region Overrides of Freezable

protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}

#endregion

public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}

public static readonly DependencyProperty DataProperty =
DependencyProperty.Register(“Data”, typeof(object), typeof(BindingProxy));
}
}

 

WPF Command Binding ICommand

Here is the WPF powerful, easy and very straight forward command binding. WPF command binding is done through Icommand interface available in using System.Windows.Input;

public class MyCommand : ICommand
{
Action
Predicate<object> _canExecute;
public MyCommand(Action
{
submit = action;
_canExecute = canExecute;

}
public bool CanExecute(object parameter)
{
return _canExecute(parameter);
}
public void Execute(object parameter)
{
submit(parameter);
}
public event EventHandler CanExecuteChanged;
}

CanExecuteChanged – This event is automatically bind to button.enabled property to enable or disable based on validation logic

// View model code.

this.SubmitBtn = new MyCommand(Submit, CanExecute);

private void Submit(object param)
{
// submit logic
}
private bool CanExecute(object param)
{
// validation logic
}

View code

<Button Grid.Row=”2″ Width=”50″ Height=”50″ Command=”{Binding Path=SubmitBtn}” ></Button>