I am implementing an explorer-type view: on the left is a TreeView and on the right is a details view / editor view of the item selected on the left.
The TreeView contains different types of 'leaf' objects. I have defined HierarchialDataTemplates to define how the objects are presented and which context menu should be presented. The MenuItems have Commands which are bound to the view-model.
What I am struggling with is where to implement the Command handlers. The straight-forward place would be in the 'leaf' view-models but they don't know anything about the 'explorer' view-model and how to open the details/editor view.
The simplest solution would be to bind the leaf context menu to the explorer view-model as this is where the action is best executed.
How is this normally handled? Are there any 'well-known' patterns?
Just found the answer to this question - Bind to parent DataContext within DataTemplate - which put me on the right track.
The UserControl get a name and the command binding references this - Source={x:Reference uc}}.
<UserControl x:Class="View.AdminWorkstationView" Name="uc">
<UserControl.Resources>
<DataTemplate DataType="{x:Type vm:RequiredDeviceViewModel}">
<DockPanel>
<DockPanel.ContextMenu>
<ContextMenu>
<MenuItem Command="{Binding DataContext.EditDeviceCommand, Source={x:Reference uc}}"
CommandParameter="{Binding}"
Header="Edit device" />
</ContextMenu>
</DockPanel.ContextMenu>
</DockPanel>
</DataTemplate>
</UserControl.Resources>
Related
Okay I have a mildly complex piece of functionality here. I'd like to know A) If I am doing it properly. If not, what should I change? 2) If it is proper, what is the best solution to my problem?
I have a main window with a ListView of items. If I click one of these, the right hand Grid Column in this window should populate with a DataGrid with information on the item selected. If I click another item in the ListView, it should change to another DataGrid.
I have seen some ContentPresenter examples but I cannot get this to work, so I stripped it out and will show you the code I have so far. Right now, I only have one item setup, so I will stick with this Driver example.
DriverGrid.xaml
<UserControl DataContext="{Binding AdminDriver, Source={StaticResource Locator}}">
<Grid>
<DataGrid>
//stuff here for datagrid
</DataGrid>
<Button Content="Edit" Command="{Binding ShowEditWindow}" />
<Button Content="Add" Command="{Binding ShowAddWindow}"/>
</Grid>
</UserControl>
AdminDriver.cs (VM)
//Contains variables, and is the datacontext for the above usercontrol
AdminMain.xaml (view for all admin stuff)
//Contains a bunch of junk for the min admin screen which has the listview with the options in it. If you require this piece of code, I can trim it down but I don't se currently see it's relevance. The DataGrid belongs in this window, I'm assuming in a Content Presenter. Here is the ListView that is in column 1 of 2.
<ListView ItemsSource="{Binding AdminMenu}"
Name="AdminFields"
SelectionMode="Single">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand CommandParameter="{Binding SelectedItem, ElementName=AdminFields}" Command="{Binding registerSelected}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListView.ItemTemplate>
<ItemContainerTemplate>
<TextBlock Text="{Binding FieldName}"/>
</ItemContainerTemplate>
</ListView.ItemTemplate>
</ListView>
I would take the binding of the DataContext out of the UserControl. This will allow you to use it in other spots if you ever find the need. Instead, just bind the DataContext where you are using it.
<view:YourUserControl DataContext="{Binding AdminDriver}" />
If you are looking to present different UserControls based upon which item is selected in the ListView, then you'll use a ContentPresenter. All the items in your ItemsSource will have the same base class or implement the same interface so that you can put them in the same ObservableCollection. I'll assume AdminDriver would be of that type/interface as well then.
You would set up some DataTemplates at the top of the Window that map the possible real types of the objects in your ItemsSource (AdminMenu) to the UserControl that would represent them.
<Window.Resource>
<DataTemplate DataType="{x:Type model:TypeA}">
<view:UserControlA />
</DataTemplate>
<DataTemplate DataType="{x:Type model:TypeB}">
<view:UserControlB />
</DataTemplate>
//rinse and repeat
</Window.Resource>
Then you'll add a ContentPresenter to the Grid and bind it's DataContext to the AdminDriver property. The UserControl matching the actual type of the selected item as mapped in your DataTemplates will appear.
<ContentPresenter Content="{Binding AdminDriver}" />
I want to know how you would bind a View specific data type to your View from a ViewModel.
To be more concrete I have a ContextMenu as part of a DatagridView. Now I can bind the ItemSource of my ContextMenu to either a List of MenuItems or a List of Strings (<= implementing a Converter on this).
Both options work fine, but I want to know which is the best and why. I am asking cause I have read that I should try to not use the System.Windows.* Namespace in my ViewModel, and when I Bind a List of MenuItems of course I use this Namespace but on the other Hand if I bind strings and just convert it... This feels weird.
SampleCode (using Caliburn):
<DataGrid x:Name="OverviewItems">
<DataGrid.ContextMenu>
<ContextMenu ItemsSource="{Binding AllColumns, Converter={StaticResource String_Menu_Converter}}" >
<!-- Alternative: <ContextMenu ItemsSource="{Binding AllColumns}" >-->
<ContextMenu.ItemContainerStyle>
<Style>
<Setter Property="cal:Message.Attach" Value="[Event Click]=[SetVisibilityExecute($_clickeditem)]" />
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
</DataGrid.ContextMenu>
</DataGrid>
In WPF, we manipulate data object, not UI objects. So it is true that you should not have any UI objects in your view model. The correct way to get around this issue is to manipulate data objects in the view model that we can then data bind with the UI controls that we declare in DataTemplates. So in your case, you could have a collection of custom objects that have a property to bind to the MenuItem.Header property and another to bind to the MenuItem.Command property for example:
<DataTemplate DataType="{x:Type YourPrefix:YourCustomType}">
<MenuItem Header="{Binding Header}" Command="{Binding Command}" />
</DataTemplate>
...
<Menu ItemsSource="{Binding YourCustomTypeCollection}" />
I have my hierarchical treeview binding wonderfully to my ViewModel using Caliburn Micro. (The ViewModel has an Items property that returns an ObservableCollection - the treeview is named to this Items property - nothing wrong with the binding).
However the issue comes up with the context menu. The menu fires a method on an instance of the object that the treenode represents. What I rather want to achieve, is to have the menu fire a method on my root ViewModel, passing to it as a parameter the instance of the object represented by the clicked treenode.
Here is my XAML:
<HierarchicalDataTemplate DataType="{x:Type m:TaskGrouping}"
ItemsSource="{Binding Children}">
<Label Content="{Binding Name}"
FontWeight="Bold">
<Label.ContextMenu>
<ContextMenu>
<MenuItem Header="Add New SubFolder"
cal:Message.Attach="AddNewSubfolder" />
<MenuItem Header="Remove this folder"
cal:Message.Attach="RemoveFolder" />
</ContextMenu>
</Label.ContextMenu>
</Label>
</HierarchicalDataTemplate>
What changes do I need to make to my XAML in order to achieve what I want?
ContextMenus are located in a separate visual tree from everything else - it can be a pain to get the bindings right (I often have 10-15 minutes of fighting the bindings on them to get them right!)
You've got your Message.Attach attached property set, all you need to do is ensure that the action target is pointing to the VM rather than the data item. You can use Action.TargetWithoutContext to specify the target for actions (CM will otherwise use DataContext)
You will also need to get a binding path which points to the other visual tree - try using RelativeSource bindings - the ContextMenu also has a property called PlacementTarget which should point to the element that the ContextMenu is attached to
So possibly:
cal:Action.TargetWithoutContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=Label}}"
or
cal:Action.TargetWithoutContext="{Binding PlacementTarget.DataContext}"
You might have to experiment as I often get this almost right first time!
EDIT by OP(Shawn):
This is what worked for me eventually:
<Label Content="{Binding Name}"
Tag="{Binding DataContext, ElementName=LayoutRoot}">
<Label.ContextMenu>
<ContextMenu
cal:Action.TargetWithoutContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Run Task Now" cal:Message.Attach="SomeRootViewModelMethod($dataContext)" />
I'm working on a WPF application and I'm using the MVVM pattern. I use MVVMLight to help me handle some Events. I need to forward the "Click" event so that I can pass the arguments as well so that I can know for sure which item that sent the event. If I use the "Command" I cant know for sure that it was the selected item that sent the event - as the item doesnt need to be selected to right click on it.
This is my code for displaying a list of "order lines". There are two types of order lines, and for one of the data types; "AccessoryOrderLine" - I want to add a context menu.
My problem is that I cannot access my Window's DataContext. I've named the root node in the Window "root", and I'm trying to access the root's DataContext, but this failes with the following error:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference 'ElementName=root'.
BindingExpression:Path=DataContext.PackAccessory; DataItem=null;
target element is 'EventToCommand' (HashCode=5903270); target property
is 'Command' (type 'ICommand')
<ListBox HorizontalContentAlignment="Stretch" Margin="10,0,10,10" DockPanel.Dock="Bottom" Grid.Row="1" ItemsSource="{Binding OrderLines, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<ListBox.Resources>
<DataTemplate DataType="{x:Type m:UnitOrderLine}">
<v:OrderLine />
</DataTemplate>
<DataTemplate DataType="{x:Type m:AccessoryOrderLine}">
<v:OrderLine>
<v:OrderLine.ContextMenu>
<ContextMenu>
<MenuItem Header="Pack 1" IsCheckable="False">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding ElementName=root, Path=DataContext.PackAccessory }" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</MenuItem>
</ContextMenu>
</v:OrderLine.ContextMenu>
</v:OrderLine>
</DataTemplate>
</ListBox.Resources>
</ListBox>
I've also tried to use "TemplatedParent" and then I get access to my "OrderLine" DataContext, but I cant get one step further back to my "MainWindowModel".
http://www.thomaslevesque.com/2011/03/21/wpf-how-to-bind-to-data-when-the-datacontext-is-not-inherited/
Found a solution to my problem :)
Found a solution. Updated my original post with the link to my solution.
Its not issue with the DataTemplate. Binding with ElemetName works in all cases except in the case of ContextMenu since it does not lies in the same visual tree as of your window. However, there is one hack where you can use the PlacementTarget property of your context menu.
For details refer to this link - http://social.msdn.microsoft.com/Forums/nl/wpf/thread/526ab350-8788-4bc6-a98a-1e4dee6ad33a
It contains exactly what you are trying to achieve here.
Seems like here are answers for your question:
ElementName Binding from MenuItem in
ContextMenu
WPF MenuItem.Command binding to
ElementName..
I have a Shell.xaml file which contains two other UserControls. On the left is my TreeView and on the right is a detail screen.
I want the detailscreen to be switchable based on a selected TreeViewItem. I know this can be achieved by using DataTemplates, because I've done it with simple button clicks and using the <ContentControl Content="{Binding CurrentDetailViewModel}"> tag to accomplish this, but I have no idea how to accomplish this based on a selected TreeViewItem. I also have a separate ViewModel class for my UserControl which holds my TreeView and a separate for each detail screen.
I've been using Josh Smith's tutorial on TreeViews: http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx
So I also do use the TreeViewItemViewModel.cs class of his.
Could someone shed some light onto this?
Thanks,
Grant
If both the treeview and the details are displaying the same object (i.e the ItemsSource of the treeview contains the objects that you want to data template in the custom control) then you should be able to set a property on an underlying ViewModel that both controls share and have the custom control display something relevant with data templates.
for example, in the ViewModel:
object TreeViewSelectedItem
{
get{ return _treeViewSelectedItem;}
set {_treeViewSelectedItem = value; NotifyPropertyChanged("TreeViewSelectedItem");}
}
Treeview xaml
<TreeView ... SelectedItem={Binding TreeViewSelectedItem Mode=OneWayToSource}".../>
custom control xaml
<UserControl>
<Control.Resources>
<DataTemplate DataType="{x:Type Plane}">
....
</DataTemplate>
<DataTemplate DataType="{x:Type Train}">
....
</DataTemplate>
<DataTemplate DataType="{x:Type Automobile}">
....
</DataTemplate>
</Control.Resources>
<ContentControl Content={Binding TreeViewSelectedItem}"/>
</Usercontrol>