Correct binding for ContextMenu in custom control - wpf

I cannot find the correct binding for a ContextMenu menu item in my custom control.
<ContextMenu x:Key="MyContextMenu">
<MenuItem Header="MyMenuItem"
Command="{Binding PlacementTarget.MyCommand, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}"/>
</ContextMenu>
<Style TargetType="{x:Type local:MyControl}" x:Shared="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyControl}">
<DockPanel ContextMenu="{StaticResource MyContextMenu}">
<!--some controls-->
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MyCommand is defined in MyControl.xaml.cs and is the command I wish to bind to the menu item.
The binding in the example looks for MyCommand in DockPanel. What is the correct binding?

You need to add a tag to the menu's container and bind to it using placement target.
View this example:
<StackPanel x:Key="ConfigurationListItem" x:Shared="False" Tag="{Binding ElementName=UserControl}">
<StackPanel.ContextMenu>
<ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" Tag="{Binding}">
<MenuItem Header="Sync Environment Dependencies"
Command="{Binding Parent.PlacementTarget.Tag.SyncEnvironmentCommand, RelativeSource={RelativeSource Self}}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.DataContext}" />
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>

Mr. Nimrod's answer didn't quite solve my problem, but provided a technique for doing so. Below is what worked.
The problem with ContextMenu is that you cannot use RelativeSource to traverse the element tree to an arbitrary control: you can only go as far as its container (which you refer to with PlacementTarget).
The basic strategy is to assign Tag in the ContextMenu's container. Tag refers to whatever control, command, etc. you are interested in. In my case I assigned it to TemplatedParent, which allowed me to bind to the MenuItem.Command to MyCommand.
<Style TargetType="{x:Type local:MyControl}" x:Shared="False">
<Style.Resources>
<ResourceDictionary>
<ContextMenu x:Key="MyContextMenu">
<MenuItem Header="MyItem"
Command="{Binding Parent.PlacementTarget.Tag.MyCommand, RelativeSource={RelativeSource Self}}"/>
</ContextMenu>
</ResourceDictionary>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyControl}">
<DockPanel ContextMenu="{StaticResource MyContextMenu}" Tag="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<!--some controls-->
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

ContextMenu is not contained in VisualTree. hence no datacontext..
do this to have it working ..
<MenuItem Command="{Binding Path=PlacementTarget.DataContext.MyCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}" />

Related

How can I edit the Menu Item icon when I add the item via Item Source?

I have an MenuItem and in this MenuItem I add an ItemSource, so that the Items of this menuItem are createt from an Observable Collection. My MenuItem look like that:
<MenuItem Foreground="Black"
FontFamily="{Binding ElementName=wpfAudit, Path=FontFamily}"
FontSize="{Binding ElementName=wpfAudit, Path=FontSize}"
FontWeight="{Binding ElementName=wpfAudit, Path=FontWeight}"
Header="Artikellabel Drucker"
ItemsSource="{Binding ocArtikellabeldrucker, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
</MenuItem>
Now I want to edit the MenuItem.Icon of the Items which I created with an ItemSource.
What I tried is this:
<MenuItem.Resources>
<RadioButton x:Key="RadioButtonResource" x:Shared="false" HorizontalAlignment="Center"
GroupName="MenuItemRadio" IsHitTestVisible="False" IsChecked="{Binding IstDrucker}" Style="{StaticResource {x:Type RadioButton}}"/>
</MenuItem.Resources>
But this dosent work. So how can I get that to work? Maybe with an ControlTemplate ?
Something like below will work
<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<StackPanel Orientation="Horizontal">
<RadioButton IsChecked="True" Content="Test Item" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Binding a command defined in a datatemplate

I know there are few answers on this topic. But none of them was working in my case.
I have a ListView with a style and an ItemContainerStyle. In the ItemContainer Style, I define some triggers in order to use a different DataTemplate depending if the item in the list is selected or not. Then, finally in the Datatemplate I have a context menu with a command. The problem is how to bind the command to the viewmodel.
This is the ListView:
<ListView
x:Name="lstPersons"
Grid.Row="1"
Style="{StaticResource ListViewStyle}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
DataContext="{Binding}"
ItemsSource="{Binding Path=Persons}"
Tag="{Binding}"
SelectedItem="{Binding Path=SelectedPerson, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</ListView>
and these are the styles, datatemplates and contextmenu (defined in a resource dictionary).
The commands in the context menu do not work....:
<ContextMenu x:Key="SelectedItemContextMenu">
<MenuItem
Header="Do Something"
Command="{Binding Path=DataContext.DoSomethingCmd, ElementName=LayoutRoot}">
</MenuItem>
<MenuItem
Header="Do Something"
Command="{Binding PlacementTarget.Tag.DoSomethingCmd, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
</MenuItem>
</ContextMenu>
<DataTemplate
x:Key="ItemTemplate">
<Canvas
Margin="4"
Width="60"
Height="60"
Background="LightGray">
<TextBlock
Foreground="Black"
Margin="2 0 0 0"
Opacity="0.5"
FontFamily="Segoe UI"
Text="{Binding Path=FirstName}" />
</Canvas>
</DataTemplate>
<DataTemplate
x:Key="ItemSelectedTemplate">
<Grid>
<Border
BorderBrush="Black"
BorderThickness="1"
Margin="3"
ContextMenu="{DynamicResource SelectedItemContextMenu}">
<Canvas
Width="60"
Height="60"
Background="LightBlue">
<TextBlock
Foreground="Black"
Margin="2 0 0 0"
Opacity="0.5"
FontFamily="Segoe UI"
Text="{Binding Path=FirstName}" />
</Canvas>
</Border>
</Grid>
</DataTemplate>
<!--style of the listviewitem-->
<Style
TargetType="{x:Type ListViewItem}"
x:Key="ItemContainerStyle">
<Setter
Property="ContentTemplate"
Value="{StaticResource ItemTemplate}" />
<Style.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
Property="ContentTemplate"
Value="{StaticResource ItemSelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
<!--style of the listview-->
<Style
TargetType="{x:Type ListBox}"
x:Key="ListViewStyle">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBox}">
<Grid>
<Border>
<ScrollViewer
Focusable="false">
<WrapPanel
IsItemsHost="True"
Orientation="Horizontal"
Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"/>
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your ContextMenu is used inside a data template. I will be put in a different name scope of "LayoutRoot" and ElementName binding won't work. Also, the PlacementTarget of your context menu is the Border, and you've not setup any Tag on it. So the second command won't work either.
It looks like you are implement the commands on the ListBox level (or LayoutRoot?). It might be easier to put your context menu on the ListBox, and use ListBox.SelectedItem to find the current selection and apply your logic on it.
You can use RelativeSource:
<ContextMenu x:Key="SelectedItemContextMenu">
<MenuItem
Header="Do Something"
Command="{Binding Path=DataContext.DoSomethingCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}">
</MenuItem>
</ContextMenu>
You should probably be using RoutedCommands instead of VM commands in this case. You would bind the RoutedCommand to the ContextMenu, and since you only need static object references for that, finding them shouldn't be a problem. Then you'd set up appropriate CommandBindings on the controls that should handle the commands (either ListView or ListViewItem, depending on whether you want the List-ViewModel or the Item-ViewModel to handle the command). These controls will know their ViewModels, so binding to them will not be a problem there. Through the process of Command Routing, which is built-in in WPF, the context menu will find the proper target for its command automatically.
For guidance on how to set up CommandBindings in a MVVM-friendly way, you might want to refer to http://wpfglue.wordpress.com/2012/05/07/commanding-binding-controls-to-methods/

Getting parent ListBox selected index as CommandParamater from context menu item

I am trying to pass a listbox's Selected Index property as a command paramater to a context menu item, I have the command binding working (thanks to Will # ElementName Binding from MenuItem in ContextMenu) but I'm have trouble with my command paramater.
<UserControl>
<ListBox ItemsSource="{Binding myItems}">
<ListBox.Resources> <!-- The selected item is the item the mouse is over -->
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"
Value="True">
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="Edit" Grid.Column="4" Grid.Row="0" Tag="{Binding DataContext, ElementName=ProductBacklog}">
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Remove"
Command="{Binding PlacementTarget.Tag.RemoveStoryClickCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
CommandParameter="{Binding <!--I NEED TO BIND TO THE LISTBOX-->, Path=SelectedIndex}"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>
You can set the CommandParameter="{Binding }" to pass the current data item in that row to your Command
Edit
Just noticed your command is in a ContextMenu. ContextMenus are not part of WPF's default Visual Tree, so bindings do not work the same way. To bind to the current item, use the following:
<MenuItem Header="Remove"
Command="{Binding PlacementTarget.Tag.RemoveStoryClickCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
CommandParameter="{Binding PlacementTarget.DataContext,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ContextMenu}}}" />
This will bind to the DataContext of whatever control the ContextMenu is placed on, so in this case it will be Button.DataContext

Doesn´t hand MenuItem Click into viewmodel

I have this style into ResourceDictionary. This is a ToggleButton´s list. I add a contextMenu to each button and I want to hand into the viewmodel the click event. I have the method Editindicator into viewmodel. When I run the project and i click over contextmenu item it broke and show this error "{"No target found for method Click."}". I think that this error is owing to menuitem has lost viewmodel´s datacontext.
Can anyone help here? Thanks a lot in advice.
<Style x:Key="ListBoxStyleIndicador" TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ListBoxStyleIndicadorTemplate" TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<Controles:ToggleButtonIndicador
Content="{Binding NombreIndicador}"
IdBIIndicadores="{Binding IdBiIndicadores}"
IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
Style="{DynamicResource BotonNegro}"
Padding="6,2"
ToolTip="{Binding Descripcion}">
<Controles:ToggleButtonIndicador.ContextMenu >
<ContextMenu>
<MenuItem Header="Editar">
<MenuItem.Icon>
<Image Source="{DynamicResource ImagenBotonEditar}" />
</MenuItem.Icon>
<Interactivity:Interaction.Triggers>
<Interactivity:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="EditIndicator" />
</Interactivity:EventTrigger>
</Interactivity:Interaction.Triggers>
</MenuItem>
</ContextMenu>
</Controles:ToggleButtonIndicador.ContextMenu>
</Controles:ToggleButtonIndicador>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsSelected" Value="{Binding Seleccionado, Mode=TwoWay}"/>
</Style>
Since ContextMenu is not a part of your Visual tree, you won't get reference to the DataContext of your ViewModel which is set for your UserControl. There are two ways to get the datacontext for your control -
Set explicitly dataContext for your ContextMenu using the PlacementTarget. Look at my answer here - cannot set tooltip in style
Use Proxy binding. Look at my answer here - Binding from items in ItemsControl to ItemControl's DataContext
Edit : For DataContext you can do like this -
<Controles:ToggleButtonIndicador Tag="{Binding DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}>
<Controles:ToggleButtonIndicador.ContextMenu >
<ContextMenu DataContext={Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}>
<MenuItem Header="Editar">
<MenuItem.Icon>
<Image Source="{DynamicResource ImagenBotonEditar}" />
</MenuItem.Icon>
<Interactivity:Interaction.Triggers>
<Interactivity:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="EditIndicator" />
</Interactivity:EventTrigger>
</Interactivity:Interaction.Triggers>
</MenuItem>
</ContextMenu>
</Controles:ToggleButtonIndicador.ContextMenu>
</Controles:ToggleButtonIndicador>
I am assumsing that your viemodel is binded to DataContext property of your UserControl.
In case it might help anyone. Before using the following example code, it is highly recommended to read Attaching a Virtual Branch to the Logical Tree in WPF on CodeProject. You would know why the problem occurs and how to solve it elegantly.
Here is the quick example.
// Add a DataContextBridge.
<UserControl.Resources>
<FrameworkElement x:Key="DataContextBridge" />
</UserControl.Resources>
// Bind.
<UserControl.DataContext>
<Binding
Mode="OneWayToSource"
Path="DataContext"
Source="{StaticResource DataContextBridge}" />
</UserControl.DataContext>
// Trigger a click event.
<ContextMenu>
<MenuItem>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction
TargetObject="{Binding Source={StaticResource DataContextBridge}, Path=DataContext}"
MethodName="OnClick" />
</i:EventTrigger>
</i:Interaction.Triggers>
</MenuItem>
</ContextMenu>
Thanks.

Setting event handlers inside a Setter.Value structure

I have a ListView and i'd like to set up a context menu which i can open not only when right-clicking some text in some column but anywhere on the ListViewItem, to do so i thought i'd just set my ContextMenu using a style setter since i cannot directly access the ListViewItem.
Unfortunately when you try to do it like this it won't compile:
<Style TargetType="ListViewItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Header" Click="Handler"/>
...
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
Error 102 'Handler' is not valid.
'Click' is not an event on
'System.Windows.Controls.GridView'.
I figured that you can avoid this by using an EventSetter for the Click-event. But it is apparent that the code gets quite inflated from all the wrapping tags you need.
My question is if there is some workaround so you do not have to deal with EventSetters.
Edit: See this question for an explanation on why this error occurs.
You can put the ContextMenu in the ListView's Resources and then use it as a static resource, that way you won't have to use a Style for the MenuItem's
<ListView ...>
<ListView.Resources>
<ContextMenu x:Key="listViewContextMenu">
<MenuItem Header="Header" Click="MenuItem_Click"/>
</ContextMenu>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="ContextMenu" Value="{StaticResource listViewContextMenu}"/>
</Style>
</ListView.ItemContainerStyle>
<!--...-->
</ListView>
You can just ListBoxItem.HorizontalContentAlignment to Stretch and then put the ContextMenu in your ListBox.ItemTemplate. Here's an example:
<Grid>
<Grid.Resources>
<PointCollection x:Key="sampleData">
<Point X="10" Y="20"/>
<Point X="30" Y="40"/>
</PointCollection>
</Grid.Resources>
<ListBox Width="100" ItemsSource="{StaticResource sampleData}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Red">
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Test" Click="MenuItem_Click"/>
</ContextMenu>
</Grid.ContextMenu>
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Resources