In my scenario, I have an ItemsControl where the DataTemplate needs to change in a few ways depending on the properties of the item. One of the things that needs to change is the context menu for the item.
I've put together this example to show my situation. Take the following classes:
Class MainWindow
Public Property Things As New List(Of Thing) From {New Thing With {.Name = "Thing 1", .Type = ThingType.A},
New Thing With {.Name = "Thing 2", .Type = ThingType.B},
New Thing With {.Name = "Thing 3", .Type = ThingType.C}}
End Class
Public Class Thing
Public Property Name As String
Public Property Type As ThingType
End Class
Public Enum ThingType
A
B
C
End Enum
Thing has some data to display (Name), and something that should influence the template (Type).
Now take the following XAML:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:VBTest"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<ContextMenu x:Key="DefaultMenu">
<MenuItem Header="A or C"/>
</ContextMenu>
<ContextMenu x:Key="BMenu">
<MenuItem Header="B Only"/>
</ContextMenu>
</Window.Resources>
<ItemsControl ItemsSource="{Binding Things}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="local:Thing">
<TextBlock Name="Title" Text="{Binding Name}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Type}" Value="B">
<Setter TargetName="Title" Property="FontWeight" Value="Bold"/>
<Setter Property="ContextMenu" Value="{StaticResource BMenu}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
In DataTemplate.Triggers, I define a trigger for items of type B. For these items, I want to change some aspects of the template, so I use TargetName on the Setter to change the FontWeight of a TextBlock (in the real code I change a number of properties for a number of elements). But I also want to change the ContextMenu for the entire item. To do this, I use a Setter without TargetName and the property ContextMenu.
The above works somehow. If you run this and right-click "Thing 2" you see BMenu. But how does this work? What object is the Setter being applied to? DataTemplate has no ContextMenu property.
And I ask this for more than just curiosity. I want all other types of items (A and C) to use DefaultMenu. That should be the default, with the DataTrigger overriding it for B items. But I don't even know what object I'm Setter-ing at this point, so I don't know where or how to set this default.
What object is the Setter being applied to?
It's applied to the ContentPresenter item container that wraps each element in the Things source collection.
You can set the default ContextMenu using an ItemContainerStyle:
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="ContextMenu" Value="{StaticResource DefaultMenu}"/>
</Style>
</ItemsControl.ItemContainerStyle>
Related
Desired: set border properties of a listview depending on conditions in displayed items. For example:
Set the border of an entire ListView red if any one of its (string) items begins with "S". So the problem is how to address a parent listview from its items (within xaml preferably)
Something like
<ListView Name="lv" Grid.Row="2" ItemsSource="{Binding TheItemList}" Height="100" BorderBrush="Black">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding }">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Converter={StaticResource StringToBoolean}}
Value="True">
<Setter ???? Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
(where the converter is the obvious thing) does not work: I can' use
TargetName="lv" in the ???? part of the setter, that's outside the scope. Neither can I use <Style TargetType="ListView"> in the style declaration. I could of course go up and back through the view model, but how does one do this in .xaml?
Must be having a bad day, this seems like an obvious thing. My googling hasn't yielded much unfortunately.
A setter in a Style can only set a property of the element to which the Style is applied, i.e. a Style for a TextBlock cannot set the property of the parent ListView.
You could "move" the Style to the ListView and implement the converter to return true if ListBox.Items.OfType<string>().Any(x => x?.StartsWith("s") == true) or something similar.
But a Style for a child element cannot set a property of the parent element.
I am trying to bind a property of a RibbonTabHeader to a property of its corresponding RibbonTab. However, it seems that the RibbonTab is not an ancestor of the RibbonTabHeader. I'm trying to bind on custom dependency properties, but for simplicity's sake we'll suppose this is what I want to do:
<Style x:Key="DynamicHeader" TargetType="r:RibbonTabHeader">
<Setter Property="Tooltip"
Value="{Binding Name,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type r:RibbonTab}}/>
Knowing that this equivalent produces the expected result, where the tooltip is "rbnTab1":
<Style x:Key="DynamicHeader" TargetType="r:RibbonTabHeader">
<Setter Property="Tooltip"
Value="{Binding Name,
ElementName=rbnTab1}/>
How could I recreate this behaviour directly in the style so that I can apply it to any header of any desired tab? Like so:
<r:RibbonTab Name="rbnTab2" Header="Tab 2" HeaderStyle="{StaticResource DynamicHeader}">
<r:RibbonTab Name="rbnTab3" Header="Tab 3" HeaderStyle="{StaticResource DynamicHeader}">
In order to provide closure to this topic, here is what I ended up doing:
In the end, I couldn't find a binding path to a property from the tab itself. Instead, rather than binding to a property from the tab, I define a custom style for the tab header which is BasedOn the original style, and I set the property for the header itself within that style. For good measure, my example also includes the custom dependency property I was using (although I don't think the issue is there because I use other custom dependency properties just fine):
MainWindow.xaml:
<Style x:Key="DynamicHeader" TargetType="r:RibbonTabHeader">
<Setter Property="BorderBrush" Value="{Binding Path=(ext:Tab.TabColor),
RelativeSource={RelativeSource Self},
Converter={core:StringToBrushConverter}}"/>
[...]
</Style>
[...]
<r:RibbonTab Name="rbnTab2" Header="Tab 2">
<r:RibbonTab.HeaderStyle>
<Style TargetType="RibbonTabHeader" BasedOn="{StaticResource DynamicHeader}">
<Setter Property="ext:Tab.TabColor" Value="CornflowerBlue"/>
</Style>
</r:RibbonTab.HeaderStyle>
</r:RibbonTab>
ControlExtensions.cs: (Custom Dependency Property)
public class Tab {
public static readonly DependencyProperty TabColorProperty =
DependencyProperty.RegisterAttached("TabColor", typeof(string), typeof(Tab), new
PropertyMetadata(default(string)));
public static void SetTabColor(UIElement element, string value) {
element.SetValue(TabColorProperty, value);
}
public static string GetTabColor(UIElement element)
{
return (string)element.GetValue(TabColorProperty);
}
}
Okay, I have a relatively involved problem. I'm trying to create a Window in WPF. The main element on this window is a DataGrid. Each one of the rows in the DataGrid has a DetailsPane which I set using DataGrid.RowDetailsTemplate. Depending on certain row-specific values, I need the DetailsPane to display different elements. To accomplish this I placed a ContentControl at the root of the DataTemplate and used a Style with DataTriggers to set its Content property. Now, inside one of these Setters is a ComboBox. This ComboBox needs to have its ItemsSource bound to a list, which is stored in a dependency property on the Window level (because its the same list regardless of the row). Below is a simplified version of what I'm looking at:
<Window>
...
<DataGrid>
...
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<ContentControl>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding RowSpecificBooleanProperty}" Value="False">
<Setter Property="Content">
<Setter.Value>
...
<ComboBox ItemsSource={HowDoIBindThisToTheWindowProperty}/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Window>
So what I'm trying to figure out is how to bind the ItemsSource of that ComboBox to a dependency property of the top-level window. Andy idea how to accomplish that?
EDIT:
I should have mentioned this before but I've already tried using {RelativeSource AncestorType=Window} and ElementName in the binding. In both cases the list in the ComboBox is blank at runtime.
ItemsSource="{Binding WhateverList, RelativeSource={RelativeSource AncestorType=Window}}"
I'm trying to give a context menu items with different look and functionality, but I cannot find a way to bind commands to these items. Each menu item's view model is derived from one class AbstractEntryViewModel. Here is a shortened example of my current project's structure. Using ContextMenu.Resources is the only way I found to bind a template to a certain type.
<ContextMenu ItemsSource="{Binding Entries}">
<ContextMenu.Resources>
<DataTemplate DataType="{x:Type local:NopEntryViewModel}">
<!-- Content -->
</DataTemplate>
<HierarchicalDataTemplate
DataType="{x:Type local:GroupEntryViewModel}"
ItemsSource="{Binding Entries}">
<!-- Content -->
</HierarchicalDataTemplate>
<!-- More templates -->
</ContextMenu.Resources>
</ContextMenu>
internal abstract AbstractEntryViewModel : INotifyPropertyChanged {
public abstract void Invoke ();
// ...
}
internal NopEntryViewModel : AbstractEntryViewModel {
public override void Invoke () {}
}
internal GroupEntryViewModel : AbstractEntryViewModel {
public override void Invoke () { /* ... */ }
// ...
}
// More view models
Normally I can bind a command to a MenuItem like so
<MenuItem Command="{Binding StaticResourceOrViewModelProperty}" />
How can I do the same thing with data templates? Is there an invisible container, a wrapper for the data template's content, that I can use to bind a command to?
For simplicity, suppose 2 derived ViewModels, VM1 and VM2, with respectively a Command Command1 and a Command2.
Two steps:
1) Define in the base ViewModel this property:
public Type Type
{
get { return GetType(); }
}
We cannot use GetType() directly, we need a wrapping property since WPF Bindings work only with properties.
2) Use this property to set a DataTrigger on the Style for the ContextMenu MenuItem:
<ContextMenu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding Type}" Value="{x:Type local:VM1}">
<Setter Property="Command" Value="{Binding Command1}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Type}" Value="{x:Type local:VM2}">
<Setter Property="Command" Value="{Binding Command2}"/>
</DataTrigger>
<!-- add other DataTriggers, one for every ViewModel -->
</Style.Triggers>
</Style>
</ContextMenu.Resources>
The DataTemplates are set as you do, with:
<DataTemplate DataType="{x:Type local:VM1}">
<!-- Content -->
</DataTemplate>
<DataTemplate DataType="{x:Type local:VM2}">
<!-- Content -->
</DataTemplate>
When I bind Menu Items with an ObservableCollection, only the "inner" area of the MenuItem is clickable:
alt text http://tanguay.info/web/external/mvvmMenuItems.png
In my View I have this menu:
<Menu>
<MenuItem
Header="Options" ItemsSource="{Binding ManageMenuPageItemViewModels}"
ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>
Then I bind it with this DataTemplate:
<DataTemplate x:Key="MainMenuTemplate">
<MenuItem
Header="{Binding Title}"
Command="{Binding DataContext.SwitchPageCommand,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}"
Background="Red"
CommandParameter="{Binding IdCode}"/>
</DataTemplate>
Since each ViewModel in the ObservableCollection ManageMenuPageItemViewModels has a property Title and IdCode, the above code works fine at first sight.
HOWEVER, the problem is that the MenuItem in the DataTemplate is actually inside another MenuItem (as if it is being bound twice) so that in the above DataTemplate with Background="Red" there is a Red box inside each menu item and only this area can be clicked, not the whole menu item area itself (e.g. if the user clicks on the area where the checkmark is or to the right or left of the inner clickable area, then nothing happens, which, if you don't have a separate color is very confusing.)
What is the correct way to bind MenuItems to an ObservableCollection of ViewModels so that the whole area inside each MenuItem is clickable?
UPDATE:
So I made the following changes based on advice below and now have this:
alt text http://tanguay.info/web/external/mvvmMenuItemsYellow.png
I have only a TextBlock inside my DataTemplate, but I still can't "color the whole MenuItem" but just the TextBlock:
<DataTemplate x:Key="MainMenuTemplate">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
And I put the Command binding into Menu.ItemContainerStyle but they don't fire now:
<Menu DockPanel.Dock="Top">
<Menu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Command" Value="{Binding DataContext.SwitchPageCommand,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}"/>
<Setter Property="CommandParameter" Value="{Binding IdCode}"/>
</Style>
</Menu.ItemContainerStyle>
<MenuItem
Header="MVVM" ItemsSource="{Binding MvvmMenuPageItemViewModels}"
ItemTemplate="{StaticResource MainMenuTemplate}"/>
<MenuItem
Header="Application" ItemsSource="{Binding ApplicationMenuPageItemViewModels}"
ItemTemplate="{StaticResource MainMenuTemplate}"/>
<MenuItem
Header="Manage" ItemsSource="{Binding ManageMenuPageItemViewModels}"
ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>
I found using MVVM with MenuItems to be very challenging. The rest of my application uses DataTemplates to pair the View with the ViewModel, but that just doesn't seem to work with Menus because of exactly the reasons you've described. Here's how I eventually solved it. My View looks like this:
<DockPanel>
<Menu DockPanel.Dock="Top" ItemsSource="{Binding Path=(local:MainViewModel.MainMenu)}">
<Menu.ItemContainerStyle>
<Style>
<Setter Property="MenuItem.Header" Value="{Binding Path=(contracts:IMenuItem.Header)}"/>
<Setter Property="MenuItem.ItemsSource" Value="{Binding Path=(contracts:IMenuItem.Items)}"/>
<Setter Property="MenuItem.Icon" Value="{Binding Path=(contracts:IMenuItem.Icon)}"/>
<Setter Property="MenuItem.IsCheckable" Value="{Binding Path=(contracts:IMenuItem.IsCheckable)}"/>
<Setter Property="MenuItem.IsChecked" Value="{Binding Path=(contracts:IMenuItem.IsChecked)}"/>
<Setter Property="MenuItem.Command" Value="{Binding}"/>
<Setter Property="MenuItem.Visibility" Value="{Binding Path=(contracts:IMenuItem.Visible),
Converter={StaticResource BooleanToVisibilityConverter}}"/>
<Setter Property="MenuItem.ToolTip" Value="{Binding Path=(contracts:IMenuItem.ToolTip)}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(contracts:IMenuItem.IsSeparator)}" Value="true">
<Setter Property="MenuItem.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Separator Style="{DynamicResource {x:Static MenuItem.SeparatorStyleKey}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Menu.ItemContainerStyle>
</Menu>
</DockPanel>
If you notice, I defined an interface called IMenuItem, which is the ViewModel for a MenuItem. Here's the code for that:
public interface IMenuItem : ICommand
{
string Header { get; }
IEnumerable<IMenuItem> Items { get; }
object Icon { get; }
bool IsCheckable { get; }
bool IsChecked { get; set; }
bool Visible { get; }
bool IsSeparator { get; }
string ToolTip { get; }
}
Notice that the IMenuItem defines IEnumerable Items, which is how you get sub-menus. Also, the IsSeparator is a way to define separators in the menu (another tough little trick). You can see in the xaml how it uses a DataTrigger to change the style to the existing separator style if IsSeparator is true. Here's how MainViewModel defines the MainMenu property (that the view binds to):
public IEnumerable<IMenuItem> MainMenu { get; set; }
This seems to work well. I assume you could use an ObservableCollection for the MainMenu. I'm actually using MEF to compose the menu out of parts, but after that the items themselves are static (even though the properties of each menu item are not). I also use an AbstractMenuItem class that implements IMenuItem and is a helper class to instantiate menu items in the various parts.
UPDATE:
Regarding your color problem, does this thread help?
Don't put the MenuItem in the DataTemplate. The DataTemplate defines the content of the MenuItem. Instead, specify extraneous properties for the MenuItem via the ItemContainerStyle:
<Menu>
<Menu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Title}"/>
...
</Style>
</Menu.ItemContainerStyle>
<MenuItem
Header="Options" ItemsSource="{Binding ManageMenuPageItemViewModels}"
ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>
Also, take a look at HierarchicalDataTemplates.
Here is how I have done my menus. It may not be precisely what you need, but I think it is pretty close.
<Style x:Key="SubmenuItemStyle" TargetType="MenuItem">
<Setter Property="Header" Value="{Binding MenuName}"></Setter>
<Setter Property="Command" Value="{Binding Path=MenuCommand}"/>
<Setter Property="ItemsSource" Value="{Binding SubmenuItems}"></Setter>
</Style>
<DataTemplate DataType="{x:Type systemVM:TopMenuViewModel}" >
<Menu>
<MenuItem Header="{Binding MenuName}"
ItemsSource="{Binding SubmenuItems}"
ItemContainerStyle="{DynamicResource SubmenuItemStyle}" />
</Menu>
</DataTemplate>
<Menu DockPanel.Dock="Top" ItemsSource="{Binding Menus}" />
TopMenuViewModel is a collection of the menus that will appear on the menu bar. They each contain the MenuName that will be displayed and a collection called SubMenuItems that I set to be the ItemsSource.
I control the way the SubMenuItems are displayed by way of the style SumMenuItemStyle. Each SubMenuItem has its own MenuName property, Command property of type ICommand, and possibly another collection of SubMenuItems.
The result is that I am able to store all my menu information in a database and dynamically switch what menus are displayed at runtime. The entire menuitem area is clickable and displays correctly.
Hope this helps.
Just make your DataTemplate to be a TextBlock (or maybe a stack panel with an icon and a TextBlock).