Change button image when context menu item is selected - wpf

Question

Can anyone tell me how to change button image when context menu Item is clicked?
I have a button with image and context menu in it. I want to change the image of the button, everytime I click contextmenu item.
With the following piece of code I am able to display contextmenu items on right click. But don't know how to proceed further.
Can anyone guide me ?
I tried using command strangely command never got called.
<Button Background="Gray" Name="statusBtn" VerticalAlignment="Top" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Red">
<DockPanel >
<Image DockPanel.Dock="Top" Stretch="Fill" Source="{Binding ToEnum, Converter={StaticResource EnumToImgConverter}}" Height="37" Width="72" />
<TextBlock HorizontalAlignment="Center" Margin="0,23,1,2">Test</TextBlock>
</DockPanel>
<Button.ContextMenu>
<ContextMenu Name="ContextMenuName" ItemsSource="{Binding Path=Popuplistitems}">
<ContextMenu.ItemTemplate >
<DataTemplate DataType="MenuItem">
<MenuItem Header="{Binding Message}" Command="{Binding popupListCommand}">
<MenuItem.ItemContainerStyle >
<Style TargetType="MenuItem">
<Setter Property="IsCheckable" Value="True"/>
<Setter Property="IsChecked" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Button.ContextMenu>
</Button>

Answer 1

First, I think you need to change your MenuItem.ItemContainerStyle to just MenuItem.Style - I believe the ItemContainerStyle is meant for the sub-menuitems that you can place into the MenuItem when you want nested context menus.
I was able to get the content of the button to change with the following code. I used text content, but it should be easy to swap it out for image content:
The xaml:
<Window x:Class="ChangeButtonContent.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Height="30" Width="200">
<Button.Content>
<DockPanel >
<TextBlock Text="{Binding ChangingText, Mode=TwoWay}" />
</DockPanel>
</Button.Content>
<Button.ContextMenu>
<ContextMenu Name="ContextMenuName">
<MenuItem Command="{Binding ChangeTextCommand}" Header="ChangeText"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</Grid>
The Code-behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
public class ViewModel : INotifyPropertyChanged
{
public ViewModel()
{
ChangingText = "Initial Text";
ChangeTextCommand = new MyCommand((notUsed) =>
{
ChangingText = "Text After Context Menu Click";
});
}
private string _changingText;
public string ChangingText
{
get
{
return _changingText;
}
set
{
_changingText = value;
OnPropertyChanged("ChangingText");
}
}
public MyCommand ChangeTextCommand
{
get;
private set;
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
var propertyChanged = PropertyChanged;
if (propertyChanged != null)
{
propertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class MyCommand : ICommand
{
private Action<object> _action;
public MyCommand(Action<object> action)
{
_action = action;
}
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
_action(parameter);
}
}