I have an array of strings. For each of these strings, I'd like to create a seperate xaml element (<menuitem> is from an external library):
<MenuItem Header="Update">
<MenuItem Header="arrayvalue1" Command="{Binding UpdateCommand}" />
<MenuItem Header="arrayvalue2" Command="{Binding UpdateCommand}" />
<MenuItem Header="arrayvalue3" Command="{Binding UpdateCommand}" />
</MenuItem>
Instead of hardcoding 3 elements, I'd like to create these from the array of strings.
Is this possible and if so, how?
MenuItem is an ItemsControl, so you can bind any collection to the ItemsSource property and it will generate the children for you. In the case of MenuItem, the children generated are also MenuItems. To apply bound values to properties on those children you can set an ItemContainerStyle which will be applied to each. Since the Command you want to use is on the top level DataContext you will need to use more of an indirect binding, which may be different depending on which technology you're using. Here's how it looks for WPF:
<MenuItem Header="Update" ItemsSource="{Binding Strings}">
<MenuItem.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding Path=DataContext.UpdateCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Menu}}}" />
<Setter Property="Header" Value="{Binding}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
What you're looking for is called an ItemsControl. You can use it to present a bunch of items in whatever form you like by adding an ItemTemplate to it.
Related
I'm trying to write just some sample application using MVVM. In my view, I have two MenuItems with submenus
<Menu >
<--!first submenu-->
<MenuItem Header="{Binding AppViewModel.AppSubtitles[top_menu_navigation]}" >
<MenuItem Header="{Binding AppViewModel.AppSubtitles[top_menu_go_forward]}" Command="{Binding NavigateForward}" />
<MenuItem Header="{Binding AppViewModel.AppSubtitles[top_menu_go_back]}" Command="{Binding NavigateBack}" />
</MenuItem>
<--!second submenu-->
<MenuItem ItemsSource="{Binding AppViewModel.AllLanguagesItems}" Header="{Binding AppViewModel.AppSubtitles[top_menu_language]}" >
<MenuItem.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}" >
<Setter Property="Header" Value="{Binding DisplayName}"/>
<Setter Property="Command" Value="{Binding ChangeLanguage}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
</Menu>
(items in AllLanguagesItems list have properties DisplayName and ChangeLanguage)
I also dynamically change application style by adding/removing ResourceDictionaries (with styles for buttons, menuitems etc.) to/from application MergedDictionaries.
The problem is that changing styles works well with first submenu, menuitems styles are updated correctly, but in second submenu, only partially - mainly, OnHover effect doesn't change.
Before adding dictionary
First submenu beforeSecond submenu before
After adding dictionary
First submenu afterSecond submenu after
I assume it has something to do with overwriting styles, but how would you define bindings otherwise?
I tried
<MenuItem ItemsSource="{Binding AppViewModel.AllLanguagesItems}" Header="{Binding AppViewModel.AppSubtitles[top_menu_language]}" >
<MenuItem.ItemTemplate>
<DataTemplate >
<MenuItem Header="{Binding DisplayName}" MaxWidth="200" MaxHeight="20"/>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
but it just creates MenuItem inside MenuItem
MenuItem inside MenuItem
EDIT:
Styles: https://github.com/Kaszub09/MVVM-WPF-DI-Sample/tree/master/WPFSampleApplication/ApplicationData/Themes
Use the BasedOn property in your style
I would like to have global Context Menu that can be used in all datagrids. I defined ContextMenu and style in App.xaml. Main Window is build with many UserControl.
<Application.Resources>
<ContextMenu x:Key="contextCommonMenu">
<MenuItem Header="Import from Excel" Command={???} />
<MenuItem Header="Export table to .csv file"/>
<MenuItem Header="Save to Database"/>
<MenuItem Header="Clear Data" />
<MenuItem Header="Synchronize with DB"/>
</ContextMenu>
<Style TargetType="DataGrid">
<Setter Property="ContextMenu" Value="{StaticResource contextCommonMenu}"/>
</Style>
</Application.Resources>
My problem is how can I bind a command from ViewModel to ContextMenu ?
If the ContextMenu was created in UI Control, then it is simple, because Binding see the ViewModel but I do not have access to ViewModel?
The trick here is to use the PlacementTarget property, that contains the element, the ContextMenu is aligned to, what is the DataGrid in our case.
But this is only half of the solution. Because of the data template, the DataContext is set to a dataitem, and not the view model. So you need another relative source lookup, to find the view model. Trick Number 2 is to use the Tag property to bind the view model from outside to the grid, which is the PlacementTarget used above. And there we are.
You can always set the context menu by traversing through the Relative source. For example you set the datacontext of the context menu like below:
<Application.Resources>
<ContextMenu x:Key="contextCommonMenu" DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Import from Excel" Command="{Binding MyCommand}"/>
<MenuItem Header="Export table to .csv file"/>
<MenuItem Header="Save to Database"/>
<MenuItem Header="Clear Data" />
<MenuItem Header="Synchronize with DB"/>
</ContextMenu>
<Style TargetType="{x:Type DataGrid}">
<Setter Property="ContextMenu" Value="{StaticResource contextCommonMenu}"/>
</Style>
</Application.Resources>
Now in the view where you declare your datagrid you can place the tag for the context menu to understand its binding:
<DataGrid Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}" />
I hope this works for you. The context menu will automatically bind to your command that you have defined in the view model.
I have a nested context menu like this:
<ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Thing Count" ItemsSource="{Binding ThingsProvider}">
NB the Thing Count parent MenuItem with children from ThingsProvider.
ThingsProvider provides a List of ThingViewModel which contains properties Thing and IsChecked. I want to be able to control IsChecked from my main view model and from the user via the MenuItem but I have hit a problem; If I use an ItemContainerStyle like this.
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Path=Thing, Mode=OneWay}"/>
<Setter Property="IsChecked" Value="{Binding Path=IsChecked, UpdateSourceTrigger=PropertyChanged}"/>
</Style>
</MenuItem.ItemContainerStyle>
then (predictably I suppose as it's a style) it will observe the ViewModel's IsChecked but will not set it.
If I use an ItemTemplate like so
<MenuItem.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Thing, Mode=OneWay}"/>
</DataTemplate>
</MenuItem.ItemTemplate>
I can't get to the MenuItem's IsChecked property as I've only got the TextBlock. If I put a MenuItem in the ItemTemplate then I end up with nested MenuItems in my UI and it looks bad.
There must be a way to do this but I'm stumped at the moment, can anyone help?
Cheers
Rich
I am creating an MVVM Wpf client application. I want create menu in the main View for the application that his a menu item called "Window" on it. That menu item will dynamically update itself with a submenu of menuitems who are made up of the list of active windows running in the application. I created a ViewManager whom each View registers itself with to compile a list of active windows.
I am trying to do this in XAML but getting an error when I click on "Window"
<MenuItem Header="Window">
<ItemsControl ItemsSource="{Binding ViewMgr.Views}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Command" Value="{Binding DataContext.OpenWindowCmd ,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
<Setter Property="CommandParameter" Value="{Binding}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</MenuItem>
How do I create a dynamically updated list of menuitems on my menu in XAML using a MVVM style of data bindings and commands?
You are adding a new ItemsControl as a single child of the menu item, instead of adding each view as one child of the menu item itself. You probably get the error because the styles TargetType doesn't match. MenuItem inherits from ItemsControl itself and exposes a property ItemsSource. Try the following:
<MenuItem ItemsSource="{Binding ViewMgr.Views}" DisplayMemberPath="Title">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Command" Value="{Binding DataContext.OpenWindowCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
<Setter Property="CommandParameter" Value="{Binding}"/>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
I have the following code:
<Menu>
<MenuItem ItemsSource="{Binding SomethingMenuItems}" Header="Something"/>
</Menu>
Where MenuItems is a collection of objects of type SomethingMenuItem.
I also have:
<DataTemplate DataType="{x:Type SomethingMenuItem}">
<MenuItem Header="{Binding OrderTypeName}">
<MenuItem.Icon>
<Image Source="{Binding IconName}"/>
</MenuItem.Icon>
</MenuItem>
</DataTemplate>
I'd expect to get (I get something like this when I hardcode the menu items):
What I get instead is:
What am I doing wrong?
You might want to use ItemContainerStyle instead of DataTemplate. You have to style the container of the data item than just providing a template for data item.
With your DataTemplate, you basically displaying another nested MenuItem as content for each MenuItem generated for your Menu Something, and your inner MenuItem has the image in the correct place. I am attaching VisualTree from Snoop here for your reference.
Below is the Style for the container of the data item (in this case a MenuItem):
<MenuItem ItemsSource="{Binding SomethingMenuItems}"
Header="Something">
<MenuItem.Resources>
<Image Source="{Binding IconPath}" x:Key="IconImage" x:Shared="False"/>
<Style TargetType="MenuItem" >
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="Icon" Value="{StaticResource IconImage}" />
</Style>
</MenuItem.Resources>
</MenuItem>
You can see no nested MenuItems when you apply the above style, have added image here
With the above style applied, this is how the Menu looks:
Refer to this MSDN page to know more about ItemContainerStyle.
So, sthotakura's answer set me on the right track, but the code he posted didn't quite work because the style got applied to the parent menuitem as well.
In case someone else has a similar problem and stumbles on this question, here's the code that works:
<MenuItem ItemsSource="{Binding SomethingMenuItems}"
Header="Something">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem" >
<Style.Resources>
<Image Source="{Binding IconPath}" x:Key="IconImage" x:Shared="False"/>
</Style.Resources>
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="Icon" Value="{StaticResource IconImage}" />
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>