We Keep Coding

Binding Button Click Event to a Method in ViewModel with Interaction.Triggers when Buttons are dynamically created at runtime

In my C# WPF MVVM pattern application, I have an ItemsControl in my View that draws Lines and Buttons on a Canvas based on a bound ItemsSource, defined in XAML as below:
<Window.DataContext>
<viewmodels:MainWindowViewModel />
</Window.DataContext>
.
.
.
<ItemsControl
x:Name="DiagramViewCanvas"
ItemsSource="{Binding DiagramObjects, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:LineObject}">
<Line
X1="{Binding XStart}"
Y1="{Binding YStart}"
X2="{Binding XEnd}"
Y2="{Binding YEnd}"
Stroke="White"
StrokeThickness="1"
SnapsToDevicePixels="True"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ButtonObject}">
<Button
Style="{DynamicResource MyDiagramButtonStyle}"
Width="225"
Height="30"
Content="{Binding Content}"
FontSize="13"
SnapsToDevicePixels="True">
</Button>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Black" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding XPosition, UpdateSourceTrigger=PropertyChanged}" />
<Setter Property="Canvas.Top" Value="{Binding YPosition, UpdateSourceTrigger=PropertyChanged}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
This code works completely fine. My question is how to bind the Buttons' Click event to a method in the ViewModel (MainWindowViewModel).
Option 1 (which I don't want to use due MVVM pattern): If I try a simple Click event definition as below ...
<Button
Style="{DynamicResource MyDiagramButtonStyle}"
Width="225"
Height="30"
Content="{Binding Content}"
FontSize="13"
SnapsToDevicePixels="True"
Click="OnButtonClick"/>
... where OnButtonClick is defined in my XAML codebehind, the OnButtonClick method is successfully called and executed for each Button that is created at runtime. It works fine.
Option 2: However, if I try to use Interaction.Triggers as below (which is the approach I regularly use without any problems in my code) to avoid placing code in code behind ...
<Button
Style="{DynamicResource MyDiagramButtonStyle}"
Width="225"
Height="30"
Content="{Binding Content}"
FontSize="13"
SnapsToDevicePixels="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:CallMethodAction TargetObject="{Binding}" MethodName="OnButtonClick"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
... where OnButtonClick is defined in my MainWindowViewModel ...
public void OnButtonClick(object sender, RoutedEventArgs e)
{
if (sender is Button btn)
{
// do something
}
}
... I get the following error:
System.ArgumentException: 'Could not find method named 'OnButtonClick' on object of type 'ButtonObject' that matches the expected signature.'
Question 1: Am I making a basic mistake in my implementation of interaction triggers (I have many other interaction triggers in my code that work completely fine)? Or is it that Interaction.Triggers do not work in this scenario where the Buttons are created dynamically at runtime?
Question 2: Should I be using ICommand instead (for example as mentioned in Binding Commands to Events?)?
Thanks for any direction on what I am doing wrong.

Found a solution using Interaction.Triggers:
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:CallMethodAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=DataContext}" MethodName="OnButtonClick"/>
</i:EventTrigger>
</i:Interaction.Triggers>

C# MVVM: MenuItem Command don´t execute in ViewModel

I created a Delete MenuItem and binding a command to it.
Now I have the problem, if I am pressing the Delete MenuItem, nothing happens. Also if the program is executed with the debugger, it never reaches the private void DeleteItem.
xaml:
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#F5F5F5" Width="80" Height="60" Margin="0,5,5,5">
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete"
Command="{Binding Path=DeleteItemCommand, RelativeSource={RelativeSource FindAncestor, AncestorType= MenuItem}}">
<MenuItem.Icon>
<Label FontFamily="#FontAwesome" Content="" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Border.ContextMenu>
ViewModel:
public ICommand DeleteItemCommand { get; set; }
DeleteItemCommand = new RelayCommand(DeleteItem);
private void DeleteItem(object obj)
{
try
{
// Do Magic
}
catch (Exception)
{
MessageBox.Show(error);
}
}
Would be great, if someone could help me or have any ideas how to solve it, because i can´t find the error.

ContextMenu is indeed not part of the visual tree. But I think because of that reason RelativeSource will not work because the binding will look up to the visual tree for the datacontext. contextMenu is not part of that visual tree so it will not find the proper datacontext. I've found a solution for this in the past using a proxy element in the resources for the window. Then set this proxyelement as content for a hidden contentcontrol in the window. On the menuItem set the CommandBinding to Datacontext.DeleteCommand and the soure to the static resource proxyelement. It is a bit hackish, but it works.
So to show some xaml, try this:
First in the resources of the window create a frameworkelement with the datacontext set to the windows datacontext (the viewmodel)
<Window.Resources>
<FrameworkElement x:Key="ProxyElement" DataContext="{Binding}"/>
</Window.Resources>
Then use the resource for the content of a collapsed content control. And set the proper binding to the menuItem. Something like this:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Visibility="Collapsed" Content="{StaticResource ProxyElement}"/>
<ListBox x:Name="lbTest" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#F5F5F5" Width="80" Height="60" Margin="0,5,5,5">
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete"
Command="{Binding DataContext.DeleteCommand, Source={StaticResource ProxyElement}}">
<MenuItem.Icon>
<Label FontFamily="#FontAwesome" Content="" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Border.ContextMenu>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This should work. Give it a try.

Not sure if this will help but try using Binding instead of Binding Path.

ContextMenu is not part of VisualTree, that's why the binding fails. You can use some kind of relay like ContextMenu.PlacementTarget.Tag.Property as a cache for the second trail of binding search.
<ContextMenu>
<MenuItem Command="my:ImgTreeView.Folders" Header="Folders"
IsEnabled="{Binding Path=PlacementTarget.Tag.IsCheckFolder, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
<MenuItem.Icon>
<Image Source="StarFolders.png" />
</MenuItem.Icon>
</MenuItem>
<!-- ... -->
</ContextMenu>

Double click event command not always executed

I'm quite new to WPF and C#. I'm trying to catch a double click event in an user control and handle it through an ICommand.
Here is how i'm trying to do that:
User Control:
<UserControl x:Class="MyNamespace.View.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:local="clr-namespace:MyNamespace.View"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
DataContext="{Binding MyViewModelClass, Source={StaticResource Locator}}"
>
<UserControl.Resources>
<DataTemplate x:Key="MyTemplate">
<ContentControl>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding DataContext.HandleDoubleClickCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<WrapPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="12" >
<TextBlock Text="Data: "><Run FontWeight="Light" Text="{Binding data}"/></TextBlock>
</WrapPanel>
</ContentControl>
</DataTemplate>
</UserControl.Resources>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{DynamicResource ColorPanel2}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="0 0 0 1">
<WrapPanel Margin="12" VerticalAlignment="Center">
<TextBlock FontWeight="Bold" Margin="8" VerticalAlignment="Center" FontSize="18"
Text="some text: ">
</TextBlock>
</WrapPanel>
</Border>
<ListView Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding SelectedItem.listElement, UpdateSourceTrigger=PropertyChanged}"
ItemTemplate="{StaticResource MyTemplate}"
SelectedItem="{Binding SelectedItem}"
/>
</Grid>
</UserControl>
And i placed the command to handle the event in the ViewModel class:
ICommand _HandleDoubleClickCommand;
public ICommand HandleDoubleClickCommand
{
get
{
if (_HandleDoubleClickCommand == null)
{
_HandleDoubleClickCommand = new RelayCommand<object>(ExecuteHandleDoubleClickCommand, CanExecuteHandleDoubleClickCommand);
}
return _HandleDoubleClickCommand;
}
}
private bool CanExecuteHandleDoubleClickCommand(object arg)
{
return true;
}
private void ExecuteHandleDoubleClickCommand(object obj)
{
System.Windows.MessageBox.Show("HandleDoubleClickCommand");
}
So, basically i have a list of elements and i want to handle the double click event on is.
The behavior i see is that sometimes the HandleDoubleClickCommand gets executed, sometimes it's not. I don't see any exception thrown and i checked with the debugger that the code is executed only when the message box is shown.
I also tried to use InputBindings instead of Interaction.Triggers:
<ContentControl.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick"
Command="{Binding DataContext.HandleDoubleClickCommand, RelativeSource={RelativeSource AncestorType=UserControl}, diag:PresentationTraceSources.TraceLevel=High}" />
But i see the same behavior. Enabling the TraceLevel=High didn't give me useful info..
Also, i tried to handle the right click event instead of the double click, but still, the command gets executed only sometimes.
I think i'm missing something here, could someone help me to understand what the issue is? or at least give me some advice on how i can debug the problem..
Thank you
UPDATE
I found out that the command gets always executed if i double click on the element text. The thing is that i would like it to be executed even if i double click on an empty space of the selected row of the ListView...

Move the Margin from the WrapPanel to the TextBlock and define an ItemContainerStyle that makes the contents of the ListViewItem stretch horizontally.
You should also set the Background property of the WrapPanel to capture the clicks:
<ListView Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding SelectedItem.listElement}"
SelectedItem="{Binding SelectedItem}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<ContentControl>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding DataContext.HandleDoubleClickCommand,
RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<WrapPanel Background="Transparent">
<TextBlock Text="Data: " Margin="12"><Run FontWeight="Light" Text="{Binding data}"/></TextBlock>
</WrapPanel>
</ContentControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

C# WPF Listbox Context Menu Command not working

Currently I am trying to add a context menu to a ListBox that uses an item template. I am able to get the context menu items added, but when I try to bind the commands, nothing happens.
The Main_Window has a data context set. Here is the XAML for the ListBox. I use a similar Binding style as part of a button in the ListView.ItemTemplate so I would assume this would work, but sadly it is not. What am I missing here? (Only important part of the code is here)
<ListBox x:Name="company_buttons_listbox"
ItemsSource="{Binding Buttons_Binding}"
SelectedIndex="{Binding Selected_Index, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Update Frazer Server Link" Foreground="Black" FontFamily="Segoe UI" FontSize="14" FontWeight="Bold"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Window}}"
Command="{Binding ElementName=Main_Window, Path=DataContext.Testing}"/>
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightSteelBlue" Opacity="0.5"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="LightSteelBlue" Opacity="0.5"/>
</Style.Resources>
</Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="-2,0,-2,0">
<Button CommandParameter="{Binding}"
Command="{Binding ElementName=Main_Window, Path=DataContext.Open_Link}">
</Button>
<Label VerticalContentAlignment="Top"
Margin="5,0,5,0" Height="19" Padding="0"
Foreground="White" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold"
Content="{Binding ItemText}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

So, I solved this by not solving this and instead used a work around.
Essentially the issue comes from this:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference
I found that Context Menus are not part of the Visual Tree (not happy about that) and hence cannot access those elements in the same fashion.
I am not a fan of using Reflection so the ElementSpy method is off the table for me along with. I tried to directly set a Click="some_function" and that also surprisingly DID not work.
I instead just wrapped my entire ListBox in a Grid and used the following. Not really MVVM, but I could care less at this point with how much wasted time I put into finding a solid and reliable solution.
XAML:
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Menu Item Text" Foreground="Black" FontFamily="Segoe UI" FontSize="14" FontWeight="Bold"
Click="menu_item_function"/>
<Separator/>
</Grid.ContextMenu>
Code Behind:
private void menu_item_function(object sender, RoutedEventArgs e)
{
// Get the viewmodel from the DataContext
MainWindowViewModel viewmodel = DataContext as MainWindowViewModel;
// Call command from viewmodel
if ((viewmodel != null) && (viewmodel.View_Model_Function.CanExecute(this)))
{
viewmodel.View_Model_Function.Execute(this);
}
}

Why am I getting an exception on my dependency property?

Just spent a few hours trying to get my head around dependency properties (finding a lot of valuable info here on the site). I've written my very first dependency property, but it is not behaving as I would like it to. Can anybody have a look at my code and see if he/she can spot whats wrong?
When trying to run the app I get a TargetInvocationException was thrown
<Window x:Class="TextEditorMVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:TextEditorMVVM.ViewModel"
Title="MainWindow" Height="660" Width="621" ResizeMode="CanResize" Background="Gray">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Resources/Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
<c:TextEditorViewModel x:Key="TextEditorViewModel"></c:TextEditorViewModel>
</ResourceDictionary>
</Window.Resources>
<Border CornerRadius="10" BorderThickness="12" Background="#FF505050">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="LightGray" Offset="1" />
<GradientStop Color="Gray" Offset="0" />
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel DataContext="{StaticResource TextEditorViewModel}">
<Menu Height="auto" Background="Transparent" Foreground="White">
<MenuItem Width=" auto" Height="auto" Header="_File" VerticalAlignment="Center">
<MenuItem Header="_New" Command="{Binding CreateNewTabCommand}"></MenuItem>
<MenuItem Header="_Open" Command="{Binding OpenFileCommand}"></MenuItem>
<MenuItem Header="_Save" Command="{Binding SaveFileCommand}"></MenuItem>
<MenuItem Header="_Close" Command="{Binding CloseTabCommand}"></MenuItem>
<MenuItem Header="_Print" Command="{Binding PrintCommand}"></MenuItem>
<MenuItem Header="_Exit" Command="{Binding }"></MenuItem>
</MenuItem>
<MenuItem Width=" auto" Height="auto" Header="_Edit" VerticalAlignment="Center">
<MenuItem Header="_Cut" Command="ApplicationCommands.Cut"></MenuItem>
<MenuItem Header="_Copy" Command="ApplicationCommands.Copy"></MenuItem>
<MenuItem Header="_Paste" Command="ApplicationCommands.Paste"></MenuItem>
</MenuItem>
<MenuItem Width=" auto" Height="auto" Header="_Help" VerticalAlignment="Center">
<MenuItem Header="_Call Mikael" Command="{Binding }"></MenuItem>
<MenuItem Header="_Call Semyon" Command="{Binding }"></MenuItem>
<MenuItem Header="_Cry" Command="{Binding }"></MenuItem>
</MenuItem>
<Expander Header="Autosave" VerticalAlignment="Center" Foreground="White">
<StackPanel Orientation="Horizontal">
<CheckBox VerticalAlignment="Center" IsChecked="{Binding IsChecked, Mode=TwoWay}"></CheckBox>
<TextBox Width="40" Height="20" Margin="4" ></TextBox>
<Label VerticalAlignment="Center" Foreground="White">seconds</Label>
</StackPanel>
</Expander>
</Menu>
<c:TransparentTb IsTransparent="False" Text="Why aren't you working????">
</c:TransparentTb>
<TabControl x:Name="_tabControl" ItemsSource="{Binding TestTab}" SelectedItem="{Binding SelectedTab}" Background="Transparent" BorderThickness="0">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Title}"/>
<Setter Property="Style" Value="Transparent"/>
<Setter Property="Content" Value="{Binding InputText}"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</StackPanel>
</Border>
class TransparentTb : TextBlock
{
static TransparentTb()
{
}
{
get { return (bool) GetValue(IsTranparentProperty); }
set { SetValue(IsTranparentProperty, value); }
}
// Using a DependencyProperty as the backing store for IsTranparent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsTranparentProperty =
DependencyProperty.Register("IsTransparent", typeof (bool), typeof (TransparentTb),
new UIPropertyMetadata(false, TransparentTb.IsTransparentPropertyChanged,
TransparentTb.IsTransparentCoerce, false));
private static void IsTransparentPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
TransparentTb inst = (TransparentTb) d;
if ((bool)e.NewValue == true)
{
inst.Background = Brushes.Transparent;
}
else inst.Background = Brushes.Black;
}
private static object IsTransparentCoerce(DependencyObject d, object value)
{
return value;
}
}

Changing this line of Xaml... < Setter Property="Style" Value="Transparent"/>
To this...
<!-- <Setter Property="Style" Value="Transparent"/> -->
(i.e., comment it out)
Will avoid the exception.
Setting a style the way you are doing would entail referencing something already defined in the object tree like {StaticResource Transparent}.
The inner exception is 'object reference not set...', which makes it clear that the constructor cannot find a reference to "Transparent" the way it has been coded. Note that the exception is thrown after the TransparentTb is already constructed. You can prove this by setting breakpoints.
Also, I checked your TransparentTb code, and it works fine. The culprit is your TabItem Style Setter.