WPF - Context menu on a single item in a treeview? - c#

I am not very skilled (if at all) with WPF, and I am faced with the following problem.
I have a treeview control (XAMtreeView) where I am binding a contextmenuitem on. Now, I want the contextmenu to only display for one of the 5 tree node items (e.g. right clicking on the 4th item should pop it on, but right click should do nothing for the other items). I tried using databinding but something tells me that is the wrong way to go - nevertheless, here is what I have so far:
<DataTemplate x:Key="CategoryTreeNodeTemplate">
<TextBlock Tag="{Binding DataContext, ElementName=ScenarioOptions}"
Text="{Binding Data.Name}" Style="{StaticResource ScreenNodeTitleStyle}" VerticalAlignment="Center">
<TextBlock.ContextMenu>
<ContextMenu Visibility="Hidden" cal:Action.TargetWithoutContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<ContextMenu.Style>
<Style TargetType="ContextMenu">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TextBlock}}}" Value="CTS Charts">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContextMenu.Style>
<MenuItem Header="{StaticResource ExternalChartOpenFile}" cal:Message.Attach="OpenExternalFile()">
</MenuItem>
</ContextMenu>
</TextBlock.ContextMenu>
</TextBlock>
</DataTemplate>
As you can see I am trying to play with the visibility tag - and failing miserably while at it :). How do I make the context menu apply on a single treenode item?
Thanks :/

Related

Access a previous sibling element using RelativeSource binding (not ElementName) in WPF Application?

I am trying to access a property of a sibling element that comes directly BEFORE the target element. This is something I will have to duplicate several times in my app so I'd rather use something reproduceable (not elementName) if possible.
Any Ideas?
<Groupbox x:Name="GB1">
<Checkbox x:Name="CB1" IsChecked="True"/>
<TextBlock>
<Style TargetType="TextBlock">
<Style.Triggers>
<Data.Trigger Binding RelativeSource={??? (I want this to access the Checkbox CB1 above), Path=IsChecked}" Value="True>
<Setter Property="*Do a Thing if IsChecked=True*" Value="..."/>
</Style.Triggers>
</Style>
</TextBlock>
</Groupbox>
Maybe this example will give you an idea.
<StackPanel>
<TextBlock x:Name="textBlock1" Text="Text" />
<TextBlock x:Name="textBlock2" Text="Text">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=Children[0].Text}"/>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
Path=Children[0].Text it will look for the first child element of this ancestor and access its Text property.

Two way binding of IsChecked within a nested MenuItem

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

How do I create a "Window" menu in XAML?

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>

WPF: MenuItem icon in the wrong place when using data template

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>

Showing SelectedItem Details to its side

I've a ListView bound to an ObservableCollection<Foo>. On selecting a ListViewItem I display the details of the SelectedItem(Foo members) in a container. It works fine.
Now all I want is to display the details just next to the SelectedItem. ie, If I select the fourth ListViewItem then the Container's Top should be the same as the ListViewItem's Top. How would I sync their position provided it should create any problem even while scrolling the List.
P.S: Scrollbars are hidden
This question is not yet resolved. Can anybody help?
Original Answer
Does the detail need to be in a separate container? I may be misunderstanding your example, but I would have thought you could achieve what you wanted by adding the details section to the item template for your list items and then hiding/showing it based on the IsSelected flag:
<ListView ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<ContentControl DockPanel.Dock="Right" Name="DetailsControl" Content="{Binding}" ContentTemplate="{StaticResource DetailsTemplate}" />
<TextBlock Text="{Binding}" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="False">
<Setter TargetName="DetailsControl" Property="Visibility" Value="Hidden" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if you aren't after exactly this behaviour, I imagine you could get close to what you want by replacing the ContentControl from the example with something else (e.g. a Popup)
Edit in response to comments
The example below will place a Popup to the right hand side of the ListView that is visible only for the selected item:
<ListView ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding}" />
<Popup Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
IsOpen="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}">
<Border Background="Black" Padding="3">
<TextBlock Text="{Binding}" />
</Border>
</Popup>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This uses the Placement attribute to specify that the Popup should appear to the right of the target element, and binds the PlacementTarget property to the first ancestor of type ListViewItem (i.e. the parent container).
This causes an appearance like the example below:

Categories