I have a ContextMenu in a ResourceDictionary. The ContextMenu should hide or show depending on the value of a view-model property, but it does not work.
This is my XAML code (ControlBase derives from UserControl):
<control1:ControlBase>
<UserControl.Resources>
<ResourceDictionary>
<HierarchicalDataTemplate ItemsSource="{Binding InfraNetworkItems}">
<StackPanel>
<StackPanel.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.DataContext,
RelativeSource={RelativeSource Self}}">
<MenuItem Header="Delete"
Visibility="{Binding
DataContext.MyViewModel.DeleteEnabled,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=control1:ControlBase},
Converter={StaticResource
BooleanVisibilityConverter}}" />
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</HierarchicalDataTemplate>
</ResourceDictionary>
</UserControl.Resources>
</control1:ControlBase>
DeleteEnabled is a bool property on the view-model.
My previous attempts of solving the problem are based on this assumptions:
The ContextMenu is inside a HierarchicalDataTemplate which has the ItemsSource set. My property is not a member of this ItemSource, it belongs to the view-model. Therefore I've tried this line of code, but without any effect:
Visibility="{Binding DataContext.MyViewModel.DeleteEnabled,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=control1:ControlBase},
Converter={StaticResource BooleanVisibilityConverter}}"
But if I copy the DeleteEnabled property from the view-model to the ItemSource object, it works:
Visibility="{Binding DeleteEnabled, Converter={StaticResource BooleanVisibilityConverter}}"
what is the DataContext of your view? If it's an instance of MyViewModel you have to change the path of your Binding.
Please try this one:
<Visibility="{Binding DataContext.DeleteEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=control1:ControlBase}, Converter={StaticResource BooleanVisibilityConverter}}" />
With setting the path to DataContext you already have access to your viewmodel and of course to the DeleteEnabled-Property.
Hope this helps.
Related
I have an ItemsControl whose for the ItemTemplate DataTemplate contains a Button. I want the Command on the button to bind to a Command on the DataContext of the ItemsControl, not the ItemTemplate. I think the solution has to do with using RelativeSource, but my attempts so far have failed:
<ItemsControl ItemsSource="{Binding Games}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=GameSelectedCommand, Source={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"
CommandParameter="{Binding}"
Style="{StaticResource MenuButtonStyle}"
Content="{Binding Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
How can I get the Button to bind to the GameSelectedCommand of the ItemsControl's DataContext object?
You're setting the source of the binding to the ItemsControl itself. Therefore, you'll need to dereference the DataContext of the ItemsControl:
Command="{Binding DataContext.GameSelectedCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"
How would you have known this? Take a look at your debug output window when running the app. You'll see a message along the lines of "Cannot resolve property 'GameSelectedCommand' on type 'ItemsControl'".
I have a RadGridView with a GridViewToggleRowDetailsColumn, which can expand a selected item and show more Details. I want to use CaliburnMicro to Display the DetailsView, so I add a property of the DetailsViewModel to my "MainViewModel" and add a ContentControl with a Binding to it.
<telerik:RadGridView ItemsSource="{Binding Products.View}"
SelectedItem="{Binding SelectedProduct}" ... >
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding ProductDetailsViewModel}" />
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
<telerik:RadGridView.Columns>
<telerik:GridViewToggleRowDetailsColumn />
...Columndefinitions...
<telerik:RadGridView.Columns>
</telerik:RadGridView>
The problem is, that the Details are not displayed. From here I read that the binding fails because of the ItemsSource. So i tried
<ContentControl cal:View.Model="{Binding ProductDetailsViewModel, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}" />
but it still does not work.
If the ProductDetailsViewModel property is the defined in the same class as the Products property that the RadGridView is bound to, try this:
<ContentControl cal:View.Model="{Binding DataContext.ProductDetailsViewModel, RelativeSource={RelativeSource FindAncestor, AncestorType=telerik:RadGridView}}" />
I have a TreeView with multiple HierarchicalDataTemplate & DataTemplate items and I'm using Caliburn Micro for mvvm. The ItemsSource for the treeview is pointing to a collection in the viewmodel called 'TreeData' and I tried adding a specific ContextMenu for each HierarchicalDataTemplate & DataTemplate.
In the ContextMenu I use the caliburn functionality "cal:Message.Attach" to call a function in the
I made a smaller example of the treeview to illustrate the problem.
In the ViewModel (the collection object):
public class MyViewModel
{
// TreeData object
public ObservableCollection<TestRoot> TreeData = new ObservableCollection<TestRoot>()
{
new TestRoot()
{
Name = "Root item"
}
};
// the function on the viewmodel that should be called
public void DoSomething(object item)
{
MessageBox.Show("MyViewModel - DoSomething called");
}
}
The collection object:
public class TestRoot
{
public string Name { get; set; }
// caliburn calls this instead of the one on the viewmodel
public void DoSomething(object item)
{
MessageBox.Show("TestRoot - DoSomething called");
}
}
MyView.xaml treeview with only one (Hierarchical)DataTemplate:
<TreeView Margin="5" ItemsSource="{Binding TreeData}">
<TreeView.Resources>
<DataTemplate DataType="{x:Type vm:TestRoot}" >
<StackPanel Orientation="Horizontal">
<StackPanel.ContextMenu>
<ContextMenu>
<!-- caliburn (?) chooses the method on the collection object, not the viewmodel -->
<MenuItem Header="test dosomething" cal:Message.Attach="DoSomething($dataContext)"></MenuItem>
</ContextMenu>
</StackPanel.ContextMenu>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
</TreeView>
In another piece of code, I placed the ContextMenu in the TreeView.ContextMenu. There it worked as it 'should', pointing to the method on the viewmodel.
Looking around for a solution, I see things like "inheritance context". I think it might have something to do with it, but I'm not sure. How can I tell caliburn it must look in the viewmodel for my method, instead of the item in the TreeView I clicked on?
Or is there another possibility? For example: defining the different ContextMenus in the Resources and pointing them to the DataTemplates? But, wont that cause the exact same problem?
Please note that I'd like to keep the code-behind as minimal as possible. Thanks
update
For the completeness, here's the real development code. This should be right, no?
<TreeView ItemsSource="{Binding OrderTreeViewData.OrderTreeViewCategories}"
cal:Message.Attach="[Event SelectedItemChanged] = [Action OnSelectedItemChanged($this)]">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<!-- We have to select the item which is right-clicked on -->
<EventSetter Event="TreeViewItem.PreviewMouseRightButtonDown"
Handler="TreeViewItem_PreviewMouseRightButtonDown"/>
<!-- set expanded -->
<Setter Property="TreeViewItem.IsExpanded" Value="True"/>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<!-- dredge nodes -->
<HierarchicalDataTemplate DataType="{x:Type programs:DredgeRoot}"
ItemsSource="{Binding Dredgezones}">
<StackPanel>
<StackPanel.ContextMenu>
<ContextMenu DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Add dredge zone" cal:Message.Attach="TreeViewAddDredgeZone($datacontext)"></MenuItem>
</ContextMenu>
</StackPanel.ContextMenu>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</HierarchicalDataTemplate>
<!-- omitted other templates -->
</TreeView.Resources>
</TreeView>
Unfortunately there is still one tricky part to deal with. Due to the specific Popup behavior it doesn't inherit DataContext. To access proper context you have to get the PlacementTarget:
<StackPanel Tag="{Binding DataContext, RelativeSource={RelativeSource Self}}">
<StackPanel.ContextMenu>
<ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Header="test dosomething" cal:Message.Attach="DoSomething"/>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
I think you have the nearly same problem as me, maybe see this topic : Bind contextMenu to a different viewmodel from treeview
You can try to use a command :
Try to change you code to :
<ContextMenu x:Key="MyContextMenu">
<MenuItem Header="Add dredge zone" Command="{Binding PlacementTarget.Tag.DataContext.TreeViewAddDredgeZoneCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}"
CommandParameter="{Binding}"></MenuItem>
</ContextMenu>
Then add to your hierarchicalDataTemplate a Tag and ContextMenu
<HierarchicalDataTemplate DataType="{x:Type programs:DredgeRoot}"
ItemsSource="{Binding Dredgezones}" Tag="{Binding RelativeSource={RelativeSource AncestorType=UserControl}} ContextMenu="{StaticResource MyContextMenu}">
And in your viewmodel you can add your command with something like this :
public ICommand TreeViewAddDredgeZoneCommand
{
//your code here
}
I have an ItemsControl that uses a DataTemplate which is located in an external ResourceDictionary.xaml:
<ResourceDictionary ... >
<DataTemplate x:Key="My_UserControl">
<local:MyUserControl/>
</DataTemplate>
MyUserControl.xaml file:
<UserControl ...>
<Button Content="{Binding Path=Test, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
<UserControl/>`
MainWindow.xaml uses that template in an ItemsControl.
The binding to the Window in UserControl doesn't work.
How do I bind from an external file like this UserControl to any parent, using RelativeSource so it works ?
Thanks
Try
<Button Content="{Binding Path=DataContext.Test, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
In my xaml file, I have:
<DataTemplate DataType="{x:Type Configuration:Drivers}">
<ItemsControl ItemsSource="{Binding Cars}" FontWeight="Normal" />
<DataTemplate>
<DataTemplate DataType="{x:Type Configuration:Car}">
<UniformGrid HorizontalAlignment="Stretch" Margin="5,1,5,2" Columns="2">
<CheckBox IsChecked="{Binding Enabled, UpdateSourceTrigger=PropertyChanged}"/>
<CheckBox Visibility="{Binding SaveImage, UpdateSourceTrigger=PropertyChanged}"/>
</UniformGrid>
</DataTemplate>
For each car, it has: Enabled property but does not have SaveImage property.
Car
{
public bool Enabled {}
}
The 'SaveImage' is set in globally. I don't know how to bind that: bool SaveImage inside the DataTemplate?
DataTemplates are an encapsulation boundary, so you cannot allways use FindAncestor to get the desired data. A good solution is to put your ViewModel in your XAML as a StaticResource and then set the DataContext of you LayoutRoot grid to this StaticResource, then all other DataTemplates can access the DataContext via the same StaticResource
EXAMPLE
<Window.Resources>
<local:MyViewModel x:Key="viewmodel" />
<DataTemplate DataType="{x:Type Configuration:Car}">
<UniformGrid HorizontalAlignment="Stretch" Margin="5,1,5,2" Columns="2">
<CheckBox IsChecked="{Binding Enabled, UpdateSourceTrigger=PropertyChanged}"/>
<CheckBox Visibility="{Binding Source={StaticResource viewmodel},
Path=SaveImage, UpdateSourceTrigger=PropertyChanged}"/>
</UniformGrid>
</DataTemplate>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource viewmodel}}">
</Grid>
If SaveImage is available in the DataContext of the ItemsControl you can bind to it this way:
<CheckBox IsChecked="{Binding DataContext.SaveImage, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"/>
Solution 1:
You can try RelativeSource to Bind IsCheck to the abcestor object.
{Binding Path=SaveImage, RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}}
Solution 2:
Add a property SaveImage to view-model class Car and ref to model SaveImage.It's not a good solution.