I have a context menu that has binding items and I want to set up a command and command parameter so I know which item was clicked on but I don't know how.
<MenuItem Command="{Binding Sync}"
Header="Synchronize"
ItemsSource="{Binding ItemsToSync}">
<MenuItem.Icon>
<Image Height="25" Source="Sync.png" />
</MenuItem.Icon>
</MenuItem>
You can try something like this:
In this example I have a listview and I can right click and delete a selected item. The Reason I'm using RelativeSource here is because when it comes to passing parameters in menuitems, most of the time at this level you can't reach the datacontext of the page. Hope this helps.
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding Path=DeleteDescriptions}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}" Name="MenuItem1">
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
That did not help but I was able to create my own solution.
<MenuItem Header="Synchronize" ItemsSource="{Binding ItemsToSync}">
<MenuItem.Icon>
<Image Height="25" Source="Sync.png" />
</MenuItem.Icon>
<MenuItem.ItemContainerStyle>
<Style>
<Setter Property="MenuItem.Header" Value="{Binding Name}" />
<Setter Property="MenuItem.IsChecked" Value="{Binding IsCurrent}" />
<Setter Property="MenuItem.Command" Value="PT:Commands.SyncFromContextMenu" />
<Setter Property="MenuItem.CommandParameter" Value="{Binding}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</MenuItem>
I did have to create a static class for the command.
Related
I have a ContextMenu that is being defined in Resources. To be more specific, this context menu is used for a DataGrid, and is to appear when a row is being right-clicked. Because of that, I cannot use <DataGrid.ContextMenu> to define this context menu, I needed to do this:
<DataGrid.RowStyle>
<Style TargetType="DataGridRow" BasedOn="{StaticResource {x:Type DataGridRow}}">
<Setter Property="ContextMenu" Value="{StaticResource DataGridCM}" />
</Style>
</DataGrid.RowStyle>
<ContextMenu x:Key="DataGridCM"
DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget.DataContext}">
<MenuItem Header="Item 1" Command="{Binding Command1}" />
<MenuItem Header="Item 2" Command="{Binding Command2}" />
<Separator />
<MenuItem Header="Other Item" Command="{Binding OtherCommand}" />
</ContextMenu>
This gave me this error:
A style intended for type 'MenuItem' cannot be applied to type 'Separator'.
Is there any method to add the Separator in? I have tried ItemsSource shown below but it still gave me the same runtime error.
<ContextMenu.ItemsSource>
<CompositeCollection>
<MenuItem Header="Item 1" Command="{Binding Command1}" />
<MenuItem Header="Item 2" Command="{Binding Command2}" />
<Separator />
<MenuItem Header="Other Item" Command="{Binding OtherCommand}" />
</CompositeCollection>
</ContextMenu.ItemsSource>
I know this can be done if I use code-behind, but I would want to avoid that because I am using MVVM. I do not wish that other people taking over my project years later would get confused by a single View class with code-behind. Is there any way to solve this probably purely from XAML level?
In a WPF menu that is data bound to a collection, I can style everything correctly, but navigation with the keyboard no longer works as expected.
Consider the XAML below (you can paste it in a tool like KaXaml).
Two things:
Opening a menu and navigating to the right with the arrow keys will by default select the first item in the opened menu item. For example:
Click on 'One'
Press right arrow --> Menu two opens but nothing is selected
Press right arrow again --> Menu three opens and first item is selected
Navigating the subitems doesn't work. When pressing the right arrow, the next top-level menu item is opened, instead of drilling down into the subitem
Click on 'Two'
Press left arrow
Press right arrow --> We drill down, selecting One > A > I
Press right arrow --> There's nothing to drill down into, so we move on to MenuItem Two
Press right arrow --> Instead of drilling down into Two > 'Bound property' > 'Another bound property', we move on to top-level MenuItem 'Three'
How can I ensure the 'default' menu behavior when navigating with the keys?
This is the XAML you can test it with:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Menu VerticalAlignment="Top">
<MenuItem Header="One">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
<MenuItem Header="Two">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<MenuItem>
<MenuItem.HeaderTemplate>
<DataTemplate>
<TextBlock>
<Run Text="Bound property" />
</TextBlock>
</DataTemplate>
</MenuItem.HeaderTemplate>
<MenuItem Header="Something"/>
<MenuItem Header="Something else"/>
</MenuItem>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
<MenuItem Header="A"/>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
<MenuItem Header="Three">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
</Menu>
</Grid>
</Page>
Update
The special thing is that the sub MenuItems in my ControlTemplate should be added for each DataBound MenuItem. This is because I have an ObservableCollection with which I will build up the MenuItems inside MenuItem "Two". For each of these MenuItems, I need the same sub MenuItems. They will be bound to a Command that is the same for each of the MenuItems, except for the CommandParameter.
So what I want in the end is:
Two
Bound property 1
Something
Something else
Bound property 2
Something
Something else
Bound property 3
Something
Something else
You should not create MenuItem elements inside the template of your MenuItem. You should style your items so they have the bound content.
I've added XML as a source for your menu items, so "Two" item has content bound to XML (you can replace it with your collection). For this solution you should have a collection for your submenu items (one for all top items, not per a single top item). The keyboard navigation works correct in the example below.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<XmlDataProvider x:Key="MenuProvider" XPath="Items">
<x:XData>
<Items xmlns="">
<Item Title="Bound property 1" Parameter="1" />
<Item Title="Bound property 2" Parameter="2" />
<Item Title="Bound property 3" Parameter="3" />
</Items>
</x:XData>
</XmlDataProvider>
<XmlDataProvider x:Key="SubMenuProvider" XPath="Items">
<x:XData>
<Items xmlns="">
<Item Title="Something" />
<Item Title="Something else" />
</Items>
</x:XData>
</XmlDataProvider>
</Page.Resources>
<Grid>
<Menu VerticalAlignment="Top">
<MenuItem Header="One">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B" />
<MenuItem Header="C" />
</MenuItem>
<MenuItem Header="Two" ItemsSource="{Binding Source={StaticResource MenuProvider}, XPath=*}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding XPath=#Title}" />
<Setter Property="ItemsSource" Value="{Binding Source={StaticResource SubMenuProvider}, XPath=*}" />
<Setter Property="Tag" Value="{Binding XPath=#Parameter}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding XPath=#Title}" />
<Setter Property="CommandParameter" Value="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=MenuItem}}" />
</Style>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
<MenuItem Header="Three">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B" />
<MenuItem Header="C" />
</MenuItem>
</Menu>
</Grid>
</Page>
I did restyle the menu item Two while keeping your desired needs
<MenuItem Header="Two">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="Bound property" />
<Setter Property="ItemsSource">
<Setter.Value>
<!--binding sub menu items to a collection-->
<x:ArrayExtension Type="sys:String"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>Something</sys:String>
<sys:String>Something else</sys:String>
</x:ArrayExtension>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
<MenuItem />
<MenuItem />
<MenuItem />
</MenuItem>
example above solves the navigation issue while keeping the binding to child items as desired.
give it a try and see how close it is.
I've been puzzling over this for a day or so with no luck - I'm probably missing something obvious. Basically, I have a context menu with two items. One is statically declared, and bound to a command. The other has no command of its own, but binds to a collection of viewmodels. So visually the menu should look something like:
Delete
Add
Item 1
Item 2
Where the items vary depending on the thing the context menu was bound to. Originally I had something like this:
<ContextMenu x:Key="itemContextMenu">
<MenuItem Header="_Delete"
Command="{Binding DeleteCommand}" />
<MenuItem Header="_Add" DataContext=""
ItemsSource="{Binding AvailableTypes}">
<MenuItem.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Path=ItemType.Name}"
Command="{Binding Path=AddItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
CommandParameter="{Binding}" />
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</ContextMenu>
Which works, but gives me the nested MenuItems others have experienced. Based on a couple threads here on stackoverflow, I then tried this:
<ContextMenu x:Key="itemContextMenu">
<MenuItem Header="_Delete"
Command="{Binding DeleteCommand}" />
<MenuItem Header="_Add"
ItemsSource="{Binding AvailableTypes}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="{Binding Path=ItemType.Name}" />
<Setter Property="Command"
Value="{Binding Path=AddItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}" />
<Setter Property="CommandParameter"
Value="{Binding}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</ContextMenu>
However, when I do that my bindings all fail with errors like:
BindingExpression path error: 'ItemType' property not found on 'object' ''String'
BindingExpression path error: 'AddItemCommand' property not found on 'object' ''Grid'
To me that says that the DataContext is getting lost when I use the ItemContainerStyle. What am I missing?
edit:
I think I had some red herrings in here, so I've simplified the examples further to try and narrow down the problem.
Working but screwy layout-wise:
<ContextMenu x:Key="itemContextMenu">
<MenuItem Header="_Delete" />
<MenuItem Header="_Add" DataContext=""
ItemsSource="{Binding AvailableTypes}">
<MenuItem.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Path=ItemType.Name}" />
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</ContextMenu>
Non-working with a BindingExpression error:
<ContextMenu x:Key="itemContextMenu">
<MenuItem Header="_Delete" />
<MenuItem Header="_Add"
ItemsSource="{Binding AvailableTypes}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="{Binding Path=ItemType.Name}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</ContextMenu>
Apparently this is a bug in 3.5. I upgraded my project to 4.0, and now everything works as expected.
How do i correctly bind a dynamical created list of menu items. I have tried several thing but none seem to work. I get the proper list of names, however my ViewSwitchCommand does not seem to fire correctly.
<MenuItem Foreground="White" Header="Names" ItemsSource="{Binding Player.ToonNames}" Command="{Binding ViewSwitchCommand}" CommandParameter="{Binding Header}"/>
However if i don't do it dynamically and do it like this then everything works just fine can get it to work
<MenuItem Foreground="White" Header="Names">
<MenuItem Foreground="Black" Header="Chat" Command="{Binding ViewSwitchCommand}" CommandParameter="player1" />
<MenuItem Foreground="Black" Header="Craft" Command="{Binding ViewSwitchCommand}" CommandParameter="player2" />
</MenuItem>
The command parameter expects a string.. not sure if that is it... hopefully this is something simple i'm just overlooking
This code works for me:
<MenuItem Header="Names" ItemsSource="{Binding Player.ToonNames}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Command" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=MenuItem}, Path=DataContext.ViewSwitchCommand}" />
<Setter Property="CommandParameter" Value="{Binding}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
<MenuItem Header="Flag(s)" ItemsSource="{Binding Path=LineItemFlags}" Command="{Binding AssignFollowupCommand}">
<MenuItem.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FlagName}">
</TextBlock>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
For the parent Item i mean menu item i have a command it's invoking i want to know how to setup command for Sub Menu item
Rather than setting the ItemTemplate, set the ItemContainerStyle. Give it a style that sets the Header and Command properties of the menu item.
<MenuItem Header="_Recent Files" ItemsSource="{Binding RecentFiles}">
<MenuItem.ItemContainerStyle>
<Style>
<Setter Property="MenuItem.Header" Value="{Binding FileName}"/>
<Setter Property="MenuItem.Command" Value="{Binding Open}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
Full example and description on Code Project.