WPF: Add a command to auto-generated by binding menu items - wpf

MVVM is used. I created separate menu 'Recent files' which gets its items from binding. It looks like that:
<MenuItem Header="_Recent files" ItemsSource="{Binding RecentFiles, Converter={StaticResource RecentFilesToListOfStringsConverter}, Mode=OneWay}" >
</MenuItem>
Now, I would like to add Command to each of the those auto-generated items, which should get the path as command parameter and execute import file action by click.
Could you please suggest how can it be done in MVVM way?

Again, found the solution by myself. I tried to put the command in wrong way like below, and it doesn't work:
<MenuItem Header="_Recent files" ItemsSource="{Binding RecentFiles, Converter={StaticResource RecentFilesToListOfStringsConverter}, Mode=OneWay}" >
<MenuItem.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding ImportRecentItemCommand}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
Here is the right approach. Still don't understand how it works, have to learn WPF deeply!
<MenuItem Header="_Recent files" ItemsSource="{Binding RecentFiles, Converter={StaticResource RecentFilesToListOfStringsConverter}, Mode=OneWay}" >
<MenuItem.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding DataContext.ImportRecentItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type MenuItem}, AncestorLevel=1}}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
EDIT: The final version
XAML:
<MenuItem Header="_Recent files" ItemsSource="{Binding RecentFiles, Converter={StaticResource RecentFilesToListOfStringsConverter}, Mode=OneWay}" >
<MenuItem.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding DataContext.ImportRecentItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type MenuItem}, AncestorLevel=1}}" />
<Setter Property="CommandParameter" Value="{Binding}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
ViewModel: MVVM Light Toolkit is used, RelayCommand goes from there:
private ICommand _importRecentItemCommand;
public ICommand ImportRecentItemCommand
{
get { return _importRecentItemCommand ?? (_importRecentItemCommand = new RelayCommand<object>(ImportRecentItemCommandExecuted)); }
}
private void ImportRecentItemCommandExecuted(object parameter)
{
MessageBox.Show(parameter.ToString());
}
Enjoy

Related

WPF Binding CommandParameter to GridViewColumnHeader Content from a MenuItem

I guess it is a pretty specific question but I am trying to bind get as CommandParameter the Content of a GridViewColumnHeader. As you will see in the code, it works when I do it in the second setter of the style: <Setter Property="CommandParameter" Value="{Binding Content, RelativeSource={RelativeSource Self}}"/>. But it does not work for my Menu Items, how sould I bind them? Here is the code:
<Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
<Setter Property="Command" Value="{Binding SortBy}" />
<Setter Property="CommandParameter" Value="{Binding Content, RelativeSource={RelativeSource Self}}" />
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu Tag="{Binding Content, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}">
<MenuItem CommandParameter="{Binding Tag, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
Header="{UI:Language #{SortAscending}}"
Command="{Binding SortAscending}" />
Bind the Tag property to the PlacementTarget of the ContextMenu itself:
<ContextMenu Tag="{Binding PlacementTarget.Content, RelativeSource={RelativeSource Self}}">
<MenuItem CommandParameter="{Binding Tag, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
Here is what worked for me, a coworker gave me the solution, I was missing a 'DataContext' as My 'GridView' is actualy in a 'ListView':
<ContextMenu Tag="{Binding PlacementTarget.CommandParameter, RelativeSource={RelativeSource Self}}"
DataContext="{Binding Path=PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
All I did is add a DataContext to the ContextMenu. hope this helps anyone that might have similar problems.

Bind to property of parent from an explicit enumerable in XAML

Not sure if this is possible. I have an observable collection "OptionsList" with simple objects that have a "Name" and "IsEnabled" property.
Theres a menu that looks like
Configuration
|--Option1
|--Option2
|--Option3
|--Enabled
The first sub menu "Option1,Option2,Option3" bind correctly but then from within the I try to access those items from the first sub menu and bind to their data context but i cant seem to access them via RelativeSource for some reason.
<MenuItem Header="Configuration">
<MenuItem Header="Service" ItemsSource="{Binding OptionsList}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="ItemsSource">
<Setter.Value>
<x:Array Type="MenuItem">
<MenuItem Header="Enabled" IsCheckable="True"
DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}, Path=DataContext}"
IsChecked="{Binding Path=IsEnabled}"/>
</x:Array>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</MenuItem>
The IsChecked is bound with wrong Path. The implicit source of the Binding here is already a DataContext which is bound to the DataContext of the parent MenuItem. So with the Path DataContext.IsEnabled - it will actually look for DataContext.DataContext.IsEnabled - of course that cannot be resolved.
You can simply remove the DataContext.:
IsChecked="{Binding IsEnabled}"
Another problem is the DataContext will auto flow down the child MenuItem, so you don't need to set the DataContext for the inner MenuItems, which actually does not work (I've tried it and somehow the RelativeSource binding does not work - it's not some kind of disconnected visual tree - because the DataContext is flown down OK - so it is very strange in this case):
<MenuItem Header="Enabled" IsCheckable="True" IsChecked="{Binding IsEnabled}"/>
Here is a safer approach in which we use a HierarchicalDataTemplate. Note that the ItemsSource is set to a dummy array with 1 element. Inside the ItemTemplate we will use a Binding walking up to the parent element for the IsChecked property
<MenuItem Header="Service" ItemsSource="{Binding OptionsList}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="ItemTemplate">
<Setter.Value>
<HierarchicalDataTemplate>
<HierarchicalDataTemplate.ItemsSource>
<x:Array Type="{x:Type sys:Int32}">
<sys:Int32>0</sys:Int32>
</x:Array>
</HierarchicalDataTemplate.ItemsSource>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="Enabled"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="IsCheckable" Value="True"/>
<Setter Property="IsChecked"
Value="{Binding DataContext.IsEnabled, RelativeSource={RelativeSource AncestorType=MenuItem}}"/>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
I think the item display doesn't work because of some kind of reuse of the MenuItems in WPF (Not sure whether this is a bug in MenuItem). Playing around with x:Shared="False" didn't fixed it.
There is a different approach to achieve your goal:
Create a helper class that is a child of your option class and provide one instance of this helper as child of the option.
Bind in XAML to this helper class
Here is some code that shows in detail how to do:
XAML:
<MenuItem Header="Service" ItemsSource="{Binding OptionsList}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="ItemsSource" Value="{Binding ToggleItem}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="IsCheckable" Value="True" />
<Setter Property="IsChecked" Value="{Binding IsEnabled}" />
</Style>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
C#
public class OptionHelper
{
private readonly Option owner;
public OptionHelper(Option owner)
{
this.owner = owner;
}
public bool IsEnabled
{
get { return this.owner.IsEnabled; }
set { this.owner.IsEnabled = value; }
}
}
public class Option : INotifyPropertyChanged
{
public ObservableCollection<OptionHelper> ToggleItem { get; private set; }
public Option(string name, bool isEnabled)
{
this.ToggleItem = new ObservableCollection<OptionHelper>() { new OptionHelper(this) };
this.name = name;
this.isEnabled = isEnabled;
}
// your code here...
}
I know this is not the perfect solution but it works... Wonder if someone find a solution without the helper.

mvvm with prism: setting view from menu item

I am new to wpf world. I have a context menu in the shell as below:
<ContextMenu>
<MenuItem Header="Login"
Command="{Binding WorkSpaceViewSetter}" CommandParameter="DemoApplication.View.LoginView">
<MenuItem.Icon>
<Image Height="16" Width="16" Stretch="Uniform" Source="/Images/login.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Modules" ItemsSource="{Binding AppModules}">
<MenuItem.Icon>
<Image Source="/Images/modules.png"/>
</MenuItem.Icon>
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding ModuleName}"/>
<Setter Property="Command" Value="{Binding ElementName=win, Path=DataContext.WorkSpaceViewFromType}"/>
<Setter Property="CommandParameter" Value="{Binding MainViewType}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</ContextMenu>
Each element in the itemssource AppModules of the Modules menuitem has a property named MainViewType of type System.Type. I want to change the view of a region when a menuitem gets clicked and am thinking of using a single ICommad in the shellviewmodel and passing the MainViewType as command parameter. However, the above code is not working.
I was wondering why then the Modules menuitem gets populated from the itemssource as expected.
I have noticed that the command binding on the Login menuitem is also not working even though it should have, since the itemssource property of Modules gets properly bounded. Can anybody please suggest how to make it work?
Context menus aren't on the same visual tree as the rest of your window, so using ElementName in the binding won't work. You'll need to using PlacementTarget instead. Without knowing how your viewmodels are structured it's difficult to give a definitive answer but your solution will look something like:
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding ModuleName}"/>
<Setter Property="Command" Value="{Binding PlacementTarget.DataContext.WorkSpaceViewFromType}"/>
<Setter Property="CommandParameter" Value="{Binding MainViewType}"/>
</Style>
</MenuItem.ItemContainerStyle>

MenuItem IsChecked Property NOT Binding to VM Property

Hello I am a new WPF/MVVM programmer and having trouble with a MenuItem.
I have a menu who's ItemsSourced are binded to an object I created;
<Menu Height="23" HorizontalAlignment="Left" Name="menuProfile" VerticalAlignment="Top" Width="58" >
<MenuItem Header="Profiles" ItemsSource="{Binding Path=ProfileList}" DisplayMemberPath="ProfileName" >
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="IsCheckable" Value="True"/>
<Setter Property="IsChecked" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</Menu>
When I run this I can see all my items in the menu but my property IsSelected isn't getting updated.
public bool IsSelected
{
get { return _isSelected; }
set
{
_isSelected = value;
GetProfileConfigInfo();
}
}
If I take the style container out and put the IsCheckable and IsChecked values in line with the MenuItem....
<MenuItem Header="Profiles" ItemsSource="{Binding Path=ProfileList}" DisplayMemberPath="ProfileName" IsCheckable="True" IsChecked="{Binding IsSelected}" />
my property IsSelected gets updated but I can't see any of the items in my menu just the header Profiles.
And idea on what I'm doing wrong????
In your setter for IsSelected, you need to call OnPropertyChanged("IsSelected").
I think this could fix your problem.
I copied your exact code (below) into Blend, and created a sample data source with your exact property names, and the checkboxes in the menu worked properly.
<Menu Height="23" HorizontalAlignment="Left" Name="menuProfile" VerticalAlignment="Top" Width="58" >
<MenuItem Header="Profiles" ItemsSource="{Binding Path=ProfileList}" DisplayMemberPath="ProfileName" >
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="IsCheckable" Value="True"/>
<Setter Property="IsChecked" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</Menu>

Why can't this Image trigger binding in MenuItem.Icon find the MenuItem as a DataSource?

I've been stuck on this for a while now and I can't work out why. Basically, I have a ContextMenu with some MenuItem objects in it. I have declared Image objects for the MenuItem.Icon properties. I have Command objects bound to the MenuItems and that all works fine... in particular, when the Command.CanExecute method returns false, the MenuItem is correctly disabled and the MenuItem.Header text is greyed out.
I've been trying to set the Image.Opacity of the MenuItem Images to 0.5 when the MenuItem is disabled and this is where the problem is. For some reason, a binding in a DataTrigger in the Image.Style cannot find the MenuItem that I am trying to bind to. I have added a simplified example of my problem below.
<UserControl.Resources>
<Style x:Key="MenuItemIconStyle" TargetType="{x:Type Image}">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Style.Triggers>
<!--This Binding is not working-->
<DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type MenuItem}}}" Value="False">
<Setter Property="Image.Opacity" Value="0.5" />
</DataTrigger>
</Style.Triggers>
</Style>
<!--This is all working just fine-->
<ContextMenu x:Key="ContextMenu" DataContext="{Binding PlacementTarget.Tag,
RelativeSource={RelativeSource Self}}">
<MenuItem Header="Open" Command="{Binding Open}" CommandParameter="{Binding
PlacementTarget.DataContext, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
<MenuItem.Icon>
<Image Source="/Application;component/Images/Actions/FolderOpen_16.png"
Style="{StaticResource MenuItemIconStyle}" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
...
</UserControl.Resources>
Please note that this example is simplified... there are many MenuItems in my application. I am aware that I could individually name each MenuItem and use ElementName to find them, but there must be a better way.
Any help would be greatly appreciated.
UPDATE >>>
Thanks to punker76's answer, I realised that all I needed to do was to change the Image Trigger to the following:
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
Instead of trying to bind to the MenuItem.IsEnabled property with a DataTrigger, we can bind to the Image.IsEnabled property directly... this is because the when the MenuItem becomes disabled, it also disables its children. Much simpler!
try this one
<Style x:Key="MenuItemIconStyle" TargetType="{x:Type Image}">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
<ContextMenu x:Key="ContextMenu" DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<!-- IsEnabled="False" is only for testing (tested with kaxaml) -->
<MenuItem IsEnabled="False" Header="Open" Command="{Binding Open}" CommandParameter="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
<MenuItem.Icon>
<Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Disambig-dark.svg/25px-Disambig-dark.svg.png"
Style="{StaticResource MenuItemIconStyle}" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
EDIT
here is another solution that works (the button gets the DataContext) with this tip that i found:
How to Solve Execution Problems of RoutedCommands in a WPF ContextMenu
The problem was, that the commands could not be
executed, even if the CommandBinding on the parent window allowed it.
The reason is, that ContextMenus are separate windows with their own
VisualTree and LogicalTree. The reason is that the CommandManager
searches for CommandBindings within the current focus scope. If the
current focus scope has no command binding, it transfers the focus
scope to the parent focus scope. The simplest solution is to initially
set the logical focus of the parent window that is not null. When the
CommandManager searches for the parent focus scope it finds the window
and handels the CommandBinding correctly. Another solution is to
manually bind the CommandTarget to the parent ContextMenu.
<Window.Resources>
<Style x:Key="MenuItemIconStyle"
TargetType="{x:Type Image}">
<Setter Property="Width"
Value="16" />
<Setter Property="Height"
Value="16" />
<Style.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Content="With ContextMenu"
DataContext="{Binding ElementName=window, Path=DataContext}">
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Enabled"
CommandTarget="{Binding RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}, Path=PlacementTarget}"
Command="{Binding Open}"
CommandParameter="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
<MenuItem.Icon>
<Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Disambig-dark.svg/25px-Disambig-dark.svg.png"
Style="{StaticResource MenuItemIconStyle}" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Disabled"
CommandTarget="{Binding RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}, Path=PlacementTarget}"
Command="{Binding NotOpen}"
CommandParameter="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource AncestorType=ContextMenu}}">
<MenuItem.Icon>
<Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Disambig-dark.svg/25px-Disambig-dark.svg.png"
Style="{StaticResource MenuItemIconStyle}" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
</Button>
</Grid>
code behind
public partial class Window11 : Window
{
public static readonly DependencyProperty OpenProperty =
DependencyProperty.Register("Open", typeof(ICommand), typeof(Window11), new PropertyMetadata(default(ICommand)));
public static readonly DependencyProperty NotOpenProperty =
DependencyProperty.Register("NotOpen", typeof(ICommand), typeof(Window11), new PropertyMetadata(default(ICommand)));
public ICommand NotOpen {
get { return (ICommand)this.GetValue(NotOpenProperty); }
set { this.SetValue(NotOpenProperty, value); }
}
public ICommand Open {
get { return (ICommand)this.GetValue(OpenProperty); }
set { this.SetValue(OpenProperty, value); }
}
public Window11() {
this.DataContext = this;
this.InitializeComponent();
this.Open = new RoutedCommand("Open", typeof(Window11));
this.CommandBindings.Add(new CommandBinding(this.Open, null, (sender, args) =>
{
args.CanExecute = true;
}));
this.NotOpen = new RoutedCommand("NotOpen", typeof(Window11));
this.CommandBindings.Add(new CommandBinding(this.NotOpen, null, (sender, args) =>
{
args.CanExecute = false;
}));
}
}
hope this works

Resources