I have an application that displays a list of ViewModels as tab control items. The list of items is databound to a property on the parent ViewModel.
Now I want to add a context menu to support actions for each of the TabItems (not the whole TabControl itself).
This is the control in question:
<TabControl x:Name="Items"
Grid.Column="2"
Grid.Row="0"
Margin="3,5,5,3"
Visibility="{Binding Path=TabControlVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DisplayName}" />
<Button Padding="10,0,0,0"
Content="X"
Style="{DynamicResource NoChromeButton}"
cal:Message.Attach="CloseTab($dataContext)" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
When I put the context menu code inside the TabControl tags the context menu iis registered for the TabControl as a whole. This is not the behaviour I want.
If I add it to the StackPanel tags inside the DataTemplate Tags, the DataTriggers registered for each Item is getting executed on the child ViewModel, but the view model does not have the methods and properties to execute the event.
Is there a possibility to solve this problem? How can I add a context menu to each item to support actions like: "Close This", "Save This", "Close Everything Except This"
Some more Infos:
I use Caliburn.Micro as framework and use it's conventions to bind the TabControl to the Items property on the ViewModel, which is an IObservableCollection<LocationDetailsViewModel> created by inheriting my ViewModel from Conductor<LocationDetailsViewModel>.Collection.OneActive. The LocationsDetailsViewModel also inherits from Screen
Everything works as intended. If I add an item to the Items property the TabControl gets updated properly.
I want to add a ContextMenu to each TabControl item, which is accessible by right-clicking the header. The context menu then should contain actions, like "Close This", "Save This", "Close Everything Except This"
For that I added a context menu to the StackPanel which controls the design of the header and used CM to call the appropriate method on the view model. But when I call it, I get an exception telling me that no suitable method can be found.
I double checked and it seems CM wants to call a method on the LocationDetailsViewModel and not the LocationViewModel, even though a similar method call exist in the close button for each tab item.
Here is the code with the context menu:
<UserControl x:Class="RpgTools.LocationPresenter.Views.LocationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:cal="http://www.caliburnproject.org"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:vm="clr-namespace:RpgTools.LocationPresenter.ViewModels"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance Type=vm:LocationViewModel, IsDesignTimeCreatable=True}"
cal:Bind.AtDesignTime="True"
Padding="5">
<!-- Code left out for brevity -->
<TabControl x:Name="Items"
Grid.Column="2"
Grid.Row="0"
Margin="3,5,5,3"
Visibility="{Binding Path=TabControlVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.ContextMenu>
<ContextMenu>
<MenuItem Header="Close This"
cal:Message.Attach="CloseTab($dataContext)">
</MenuItem>
</ContextMenu>
</StackPanel.ContextMenu>
<TextBlock Text="{Binding DisplayName}" />
<Button Padding="10,0,0,0"
Content="X"
Style="{DynamicResource NoChromeButton}"
cal:Message.Attach="CloseTab($dataContext)" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
ContextMenus aren't part of the normal VisualTree the way other controls are, so the .DataContext isn't inherited as expected for binding purposes.
You need to bind the ContextMenu.DataContext to the ContextMenu.PlacementTarget.DataContext, which in this case would be StackPanel.DataContext.
<ContextMenu DataContext="{Binding
RelativeSource={RelativeSource Self},
Path=PlacementTarget.DataContext}">
Related
I'm new to this and can't quit get the correct syntax. This works correctly to capture the Left Mouse click on the textbox within the treeview:
<HierarchicalDataTemplate
DataType="{x:Type r:NetworkViewModel}"
ItemsSource="{Binding Children}"
>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding NetworkIP}" Width="110" >
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftClick"
Command="{Binding DataContext.SelectItem, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding}" />
</TextBlock.InputBindings>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
How can this be done using a Style block in the Resources?
The goal being to use the same style for all TextBoxes in the TreeView. Something that would sit in the Usercontrol.Resources and be refrenced by the HierarchicalDataTemplate.
If I understand you correctly, you could define a template in the controls or windows resources with a target type (opposed to key x:Key=...) to have it automatically applied to all items in the tree view.
Here is a small example with a definition of a template in the window resources, which contains the InputBindings definition. This template will be automatically applied to all objects of type ItemViewModel if no other template is explicitly defined by the ItemsControl or TreeView. In this example, the items are displayed in a simple ItemsControl but it works for the TreeView just the same.
Note that for this to work, all items in the TreeView need to be of the same type. It is not sufficient if they are derived from the same base type. The template will only be applied, if the type defined in Template.DataType is exactly the same as the type of the ViewModel. If your TreeViews ItemsScources contain mixed type, you would need to specify the template for every type separately.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc="clr-namespace:WpfApplication2"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type loc:ItemViewModel}">
<TextBlock Text="{Binding Name}" Width="110" >
<TextBlock.InputBindings>
<MouseBinding
MouseAction="LeftClick"
Command="{Binding SelectItem}" />
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding Items}" />
</Grid>
</Window>
I'm interested in creating an app that displays some buttons and changes a viewport according to the selected button. The viewport in my app is a ContentControl and I thought of changing its content whenever a button is clicked. However, I believe there's a better approach, by perhaps injecting the ViewModels of each of the Views I want to present to the ContentControl and styling them using DataTemplates (Since I want to avoid having a grid with many controls and just setting their Visibility property whenever I want to show a particular view). Which of the approaches seems better to you? Do you have a different approach for this?
The view should be something similar to this:
Thanks!
Usually have a ViewModel behind the window which contains:
ObservableCollection<IViewModel> AvailableViewModels
IViewModel SelectedViewModel
ICommand SetCurrentViewModelCommand
I display the AvailableViewModels using an ItemsControl, which has its ItemTemplate set to a Button. The Button.Command is bound to the SetCurrentViewModelCommand, and it passes the current data item from the AvailableViewModels collection in through the CommandParameter
To display the content area, I use a ContentControl with ContentControl.Content bound to SelectedViewModel, and DataTemplates get used to tell WPF how to render each ViewModel.
The end result is my XAML looks something like this:
<Window.Resources>
<DataTemplate DataType="{x:Type local:ViewModelA}">
<local:ViewA />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ViewModelB}">
<local:ViewB />
</DataTemplate>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">
<ItemsControl ItemsSource="{Binding AvailableViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.SetCurrentViewModelCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<ContentControl Content="{Binding SelectedViewModel}" />
</DockPanel>
You can view an example of the full code used for such a setup on my blog
I have an odd scenario.
I need to create a StackPanel in codebehind. I then need to have that stackpanel bound to the UI in xaml.
Normally I would just use a ContentControl for this. But it has focus issues (it cannot blocked from the tab order Focusable="False" has no effect). I also tried a usercontrol, but that had the same issues.
So I need to use some other kind of control. I have decided on a Panel. (StackPanel seems as good as any of the panels.)
However, I can't seem to find a way to bind to my "In Code" stack panel in my Xaml?
Is there a way to do this? (WITHOUT using a contentcontrol or usercontrol)
it cannot blocked from the tab order Focusable="False" has no effect
What about IsTabStop?
Also the most lightweight thing to use is a ContentPresenter which is what i would use.
Tested this in KAXAML, and the focus doesn't go to any of the items defined in the ContentPresenter or ContentControl when TAB is pressed.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBox>aaaaa</TextBox>
<TextBox>bbbbb</TextBox>
<ContentControl Focusable="False">
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel Focusable="False" Background="Red" Width="100" Height="50"></StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<ContentControl Focusable="False">
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBox Focusable="False">hello</TextBox>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<ContentPresenter Focusable="False">
<ContentPresenter.Content>
<TextBox Focusable="False">hello</TextBox>
</ContentPresenter.Content>
</ContentPresenter>
<TextBox>ccccc</TextBox>
<TextBox>ddddd</TextBox>
</StackPanel>
</Page>
I'm in the process of creating a simple user control; just an ImageButton.
I've already successfully bound the Image to the button and so I've decided to add a tooltip. Now I'm having troubles. It seems that I can hard-code the text for the tooltip in the XAML for the control, but when it's bound it's returning an empty string.
Here's the XAML for my control:
<Button x:Class="BCOCB.DACMS.Controls.ImageButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Name="this"
Style="{StaticResource DisabledButton}">
<Image Source="{Binding ElementName=this, Path=Source}" />
<Button.ToolTip>
<TextBlock Text="{Binding ElementName=this, Path=ToolTipText}" />
</Button.ToolTip>
</Button>
And here's the dependency property info for the tooltip text:
public static readonly DependencyProperty ToolTipTextProperty = DependencyProperty.Register("ToolTipText", typeof(string), typeof(ImageButton));
public string ToolTipText
{
get
{
return this.GetValue(ToolTipTextProperty) as string;
}
set
{
this.SetValue(ToolTipTextProperty, value);
}
}
And, finally, the declaration of the control in my Window:
<controls:ImageButton x:Name="btnAdd" Source="/DACMS;component/Resources/plus.png" ToolTipText="Add New Item" Click="btnAdd_Click" />
As I mentioned before, the image binds just fine and I've done it in exactly the same manner.
Any ideas?
Thanks,
Sonny
EDIT: I have it working now. I've removed the ElementName from the binding and set the TextBlock's DataContext = this in the code behind on instanciation. Still, I'd like to know how to fix this in the XAML, instead.
I'm unable to test this right now, but you can try:
<Button.ToolTip
DataContext=”{Binding Path=PlacementTarget.Parent.Parent,
RelativeSource={x:Static RelativeSource.Self}}"
>
<TextBlock Text="{Binding Path=ToolTipText}" />
</Button.ToolTip>
You may have to experiment a little with the number of "Parent" in PlacementTarget.
Hopefully this works. I don't like giving answers that I haven't tested, but I don't have VS on this computer. :)
I've had this same problem with binding to a ContextMenu. After my research I think that it is because the ToolTip and ContextMenu do not exist within the visual tree of your page/window/control. And therefore the DataContext is not inherited and makes binding troublesome.
Here is a Xaml hack I found that worked for me.
Binding to a MenuItem in a WPF Context Menu
The way to set the data context to "this" through xaml looks like this:
<Control DataContext={Binding RelativeSource={RelativeSource Self}}>
As another point, wpf buttons allow their content to be just about any (single) thing you want. If you want something other than text (ie, text and an image), it looks like this:
<Button Name="SampleButton" Click="SampleButton_Click">
<Grid Width="70" Height="62">
<Label Content="SampleText"/>
<Image Margin="3,3,3,3" Source="Graphics/sample.ico"/>
</Grid>
</Button>
Since you aren't changing anything but the Text on the tooltip TextBlock you can just use an inline declaration which will generate the TextBlock for you and doesn't require any hacking to get around the name scoping issue you're running into otherwise:
<Button ... ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=ToolTipText}">...
You could alternately set the ToolTip on the Image and use the control as the DataContext, which gets around the name scoping problem. The DataContext will be passed to the ToolTip, allowing normal binding:
<Image DataContext="{Binding ElementName=this}" Source="{Binding Source}">
<Image.ToolTip>
<TextBlock FontSize="18" Text="{Binding Path=ToolTipText}" />
</Image.ToolTip>
</Image>
This way allows additional settings on the TextBlock or more complex visuals.
This fixes the Problem with the Tooltip Bindings and Dependencies Properties:
<UserControl x:Class="Extended.InputControls.TextBoxUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Extended.InputControls"
x:Name="UserControl"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<TextBox x:Name="textBox">
<TextBox.ToolTip>
<ToolTip Content="{Binding Path=CustomToolTip}" Background="Yellow"/>
</TextBox.ToolTip>
</TextBox>
</UserControl>
Instead of this ( doesnt Work ):
<UserControl x:Class="Extended.InputControls.TextBoxUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Extended.InputControls"
x:Name="UserControl">
<TextBox x:Name="textBox">
<TextBox.ToolTip>
<ToolTip Content="{Binding ElementName=UserControl, Path=CustomToolTip}" Background="Yellow"/>
</TextBox.ToolTip>
</TextBox>
</UserControl>
I'm creating an error list control similar to the in Visual Studio. Each error is represented by a class with three values: type (enum: Error/Warning/Message), text (string) and time (DateTime). The class has also two more read only getters: TimeString (returns time as HH:MM) and Icon (returns icon path based on type).
I have an ItemsControl bound to an ObservableCollection of objects via ItemsSource property.
I now want to implement a context menu for each of the items with two actions: Copy to clipboard and Delete from list.
How can I access the original item from the collection from the context menu item click handler?
Here is my XAML code:
<ItemsControl Name="itemsControl" ItemsSource="{Binding Items, ElementName=ConsoleWindow}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="Console.Items">
<Border Name="itemBorder" BorderBrush="LightGray" BorderThickness="0,0,0,1" SnapsToDevicePixels="True" Padding="4">
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Copy to clipboard" />
<MenuItem Header="Delete" />
</ContextMenu>
</Border.ContextMenu>
<DockPanel>
<Image Width="16" Height="16" Source="{Binding Icon}" Margin="0,3,4,0" VerticalAlignment="Top" DockPanel.Dock="Left" />
<TextBlock VerticalAlignment="Center" TextWrapping="Wrap" DockPanel.Dock="Left">
<Run Text="{Binding Text}" />
<TextBlock Foreground="Gray" FontSize="9">
<Run Text=" (" /><Run Text="{Binding TimeString, Mode=OneWay}" /><Run Text=") " />
</TextBlock>
</TextBlock>
</DockPanel>
Thanks for any help
The DataContext property of any of the FrameworkElement derived elements (i.e. the TextBlock or Image or MenuItem) in the DataTemplate should have the original data item (the child automatically inherits the datasource of its parent unless otherwise set).
As part of the click event handler you get the element that is the source of the event, so cast it to MenuItem and check its DataContext property.
#slugster's answer would work. A more WPF-esque way of doing this would be to use a command for each menu item and set the parameter to {Binding}. WPF comes with commands for copy and possibly delete, so you might reuse those.