Author: Nishant Rana

Continuing the previous post

https://nishantrana.wordpress.com/2012/04/08/creating-dynamic-tabitem-in-wpf/

let us add the Close Context menu to our TabItem.

To do this we need to add the Context Menu tag to the DataTemplate defined for the Tab.

</pre>
<TabControl Height="271" HorizontalAlignment="Left" Margin="123,9,0,0" Name="mainTabControl" VerticalAlignment="Top" Width="441"
 IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding ObservableCollectionTabItems}" Background="White">
 <TabControl.ItemTemplate>
 <DataTemplate>
 <TextBlock Text="{Binding Header}" >
 <TextBlock.ContextMenu>
 <ContextMenu>
 <MenuItem Header="Close" Click="MenuItem_Click">
 </MenuItem>
 </ContextMenu>
 </TextBlock.ContextMenu>
 </TextBlock>
 </DataTemplate>
 </TabControl.ItemTemplate>
 </TabControl>
<pre>

Add the following code to the ViewModel class for the MainWindow.

public void CloseTabItem(Object sender)
 {
 VMParentForViews vmParentForViews = (sender as MenuItem).DataContext as VMParentForViews;
 this.ObservableCollectionTabItems.Remove(vmParentForViews);
 }

Call the above method from the code behind of the MainWindow’s MenuItem_Click event

This is how the Close menu looks like, clicking on it closes the tab item. (i.e. removes it from the ObservableCollection to which tab control is bind)

The sample application link

https://skydrive.live.com/redir.aspx?cid=2312e1103cbe5ecd&resid=2312E1103CBE5ECD!338&parid=root

Hope it helps

Hi,

We recently had a requirement in our project to create dynamic TabItems

something similar to below screen shot.

Here every time when we click on Add View One and Add View Two buttons a new TabItem gets added to the tab control on the right side showing its respective views.

The project structure is like this

Two views, ViewTypeOne and ViewTypeTwo with a simple textblock in them.

Two ViewModel for those views, one for the main window and the fourth one VMParentForView which is the parent of our other two view models.

VMParentForView class

The TabControl in the main window is bind to the ObservableCollection of VMParentForViews viewmodel and the Textblock to the Header property of Views.

<TabControl Height=”271″ HorizontalAlignment=”Left” Margin=”123,9,0,0″ Name=”mainTabControl” VerticalAlignment=”Top” Width=”441″ IsSynchronizedWithCurrentItem=”True” ItemsSource=”{Binding ObservableCollectionTabItems}” Background=”White”>

<TabControl.ItemTemplate>

<DataTemplate>

<TextBlock Text=”{Binding Header}” ></TextBlock>

</DataTemplate>

</TabControl.ItemTemplate>

</TabControl>

Here is the sample code of the demo application.

https://skydrive.live.com/redir.aspx?cid=2312e1103cbe5ecd&resid=2312E1103CBE5ECD!337&parid=root

Hope it helps.

Hi,

Sharing a simple example wherein we are generating dynamic menuitems for the context menu based on the node or treeviewitem selected in the treeview.

If root Packages is selected –

If Package is selected –

If Batch is selected –

The xml file

<br />
&lt;?xml version="1.0" encoding="utf-8" ?&gt;<br />
&lt;Packages&gt;<br />
 &lt;Package Name="Package 1" Type="Package"&gt;<br />
 &lt;Batch Name="Batch 1" Type="Batch"/&gt;<br />
 &lt;Batch Name="Batch 2" Type="Batch"/&gt;<br />
 &lt;/Package&gt;<br />
 &lt;Package Name="Package 2" Type="Package"&gt;<br />
 &lt;Batch Name="Batch 1" Type="Batch"/&gt;<br />
 &lt;Batch Name="Batch 2" Type="Batch"/&gt;<br />
 &lt;/Package&gt;<br />
&lt;/Packages&gt;<br />

XAML

<br />
&lt;Window x:Class="SampleSyncServerAdminTool.MainWindow"<br />
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br />
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br />
 Title="MainWindow" Height="350" Width="525"&gt;<br />
 &lt;Window.Resources&gt;<br />
 &lt;!--Binding TreeView--&gt;<br />
 &lt;XmlDataProvider x:Key="MyList" Source="Packages.xml" XPath="Packages"/&gt;</p>
<p>&lt;HierarchicalDataTemplate DataType="Packages" ItemsSource="{Binding XPath=*}"&gt;<br />
 &lt;TextBlock Text="Packages"&gt;&lt;/TextBlock&gt;<br />
 &lt;/HierarchicalDataTemplate&gt;</p>
<p>&lt;HierarchicalDataTemplate DataType="Package" ItemsSource="{Binding XPath=*}"&gt;<br />
 &lt;TextBlock Text="{Binding XPath=@Name}"&gt;&lt;/TextBlock&gt;<br />
 &lt;/HierarchicalDataTemplate&gt;</p>
<p>&lt;HierarchicalDataTemplate DataType="Batch" ItemsSource="{Binding XPath=*}"&gt;<br />
 &lt;TextBlock Text="{Binding XPath=@Name}"&gt;&lt;/TextBlock&gt;<br />
 &lt;/HierarchicalDataTemplate&gt;</p>
<p>&lt;!-- Resources for Right Hand Side detail grid--&gt;</p>
<p>&lt;DataTemplate x:Key="ClosableTabItemTemplate"&gt;<br />
 &lt;DockPanel Width="120"&gt;<br />
 &lt;Button<br />
 Command="{Binding Path=CloseCommand}"<br />
 Content="X"<br />
 Cursor="Hand"<br />
 DockPanel.Dock="Right"<br />
 Focusable="False"<br />
 FontFamily="Courier"<br />
 FontSize="9"<br />
 FontWeight="Bold"<br />
 Margin="0,1,0,0"<br />
 Padding="0"<br />
 VerticalContentAlignment="Bottom"<br />
 Width="16" Height="16"<br />
 /&gt;<br />
 &lt;ContentPresenter<br />
 Content="{Binding Path=DisplayName}"<br />
 VerticalAlignment="Center"<br />
 /&gt;<br />
 &lt;/DockPanel&gt;<br />
 &lt;/DataTemplate&gt;</p>
<p>&lt;DataTemplate x:Key="WorkspacesTemplate"&gt;<br />
 &lt;TabControl<br />
 IsSynchronizedWithCurrentItem="True"<br />
 ItemsSource="{Binding}"<br />
 ItemTemplate="{StaticResource ClosableTabItemTemplate}"<br />
 Margin="4"<br />
 /&gt;<br />
 &lt;/DataTemplate&gt;</p>
<p>&lt;/Window.Resources&gt;<br />
 &lt;Grid&gt;<br />
 &lt;DockPanel&gt;<br />
 &lt;TreeView DockPanel.Dock="Left" Width="150" Name="treeViewPackages"</p>
<p> ItemsSource="{Binding Source={StaticResource MyList}}"&gt;<br />
 &lt;TreeView.Resources&gt;<br />
 &lt;ContextMenu x:Key="TestMenu"&gt;<br />
 &lt;/ContextMenu&gt;<br />
 &lt;/TreeView.Resources&gt;<br />
 &lt;TreeView.ItemContainerStyle&gt;<br />
 &lt;Style TargetType="{x:Type TreeViewItem}"&gt;<br />
 &lt;Setter Property="IsExpanded" Value="True"/&gt;<br />
 &lt;EventSetter Event="PreviewMouseRightButtonDown"<br />
 Handler="OnPreviewMouseRightButtonDown" /&gt;<br />
 &lt;/Style&gt; &lt;/TreeView.ItemContainerStyle&gt;<br />
 &lt;/TreeView&gt;<br />
 &lt;Grid DockPanel.Dock="Right"&gt;<br />
 &lt;HeaderedContentControl<br />
 Content="{Binding Path=Workspaces}"<br />
 ContentTemplate="{StaticResource WorkspacesTemplate}"<br />
 Header="Workspaces"<br />
 /&gt;<br />
 &lt;/Grid&gt;<br />
 &lt;/DockPanel&gt;<br />
 &lt;/Grid&gt;<br />
&lt;/Window&gt;<br />

XAML.cs

<br />
using System;<br />
using System.Collections.Generic;<br />
using System.Linq;<br />
using System.Text;<br />
using System.Windows;<br />
using System.Windows.Controls;<br />
using System.Windows.Data;<br />
using System.Windows.Documents;<br />
using System.Windows.Input;<br />
using System.Windows.Media;<br />
using System.Windows.Media.Imaging;<br />
using System.Windows.Navigation;<br />
using System.Windows.Shapes;<br />
using System.Xml;</p>
<p>namespace SampleSyncServerAdminTool<br />
{<br />
 /// &lt;summary&gt;<br />
 /// Interaction logic for MainWindow.xaml<br />
 /// &lt;/summary&gt;<br />
 public partial class MainWindow : Window<br />
 {<br />
 public MainWindow()<br />
 {<br />
 InitializeComponent();<br />
 }</p>
<p>void OnPreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)<br />
 {</p>
<p>DependencyObject obj = e.OriginalSource as DependencyObject;<br />
 TreeViewItem item = GetDependencyObjectFromVisualTree(obj, typeof(TreeViewItem)) as TreeViewItem;<br />
 XmlElement selectedElement = (XmlElement)item.Header;</p>
<p>string header = selectedElement.Name;<br />
 if (header.ToUpper() == "PACKAGES")<br />
 {<br />
 // Packages root node<br />
 MenuItem mnuItem = new MenuItem();<br />
 mnuItem.Header = "New Package";<br />
 ContextMenu menu = new ContextMenu() { };<br />
 menu.Items.Add(mnuItem);<br />
 (sender as TreeViewItem).ContextMenu = menu;<br />
 }</p>
<p>else<br />
 {<br />
 string attName = selectedElement.Attributes["Name"].Value;<br />
 string type = selectedElement.Attributes["Type"].Value;</p>
<p>string fullNodeInfo = "Header: " + header + " Attribute Name: " + attName + " Type: " + type;</p>
<p>if (type.ToUpper() == "PACKAGE")<br />
 {<br />
 MenuItem mnuItem1 = new MenuItem();<br />
 mnuItem1.Header = "New Package";<br />
 MenuItem mnuItem2 = new MenuItem();<br />
 mnuItem2.Header = "Show Package Details";<br />
 MenuItem mnuItem3 = new MenuItem();<br />
 mnuItem3.Header = "Edit Package";<br />
 MenuItem mnuItem4 = new MenuItem();<br />
 mnuItem4.Header = "Delete Package";<br />
 MenuItem mnuItem5 = new MenuItem();<br />
 mnuItem5.Header = "Add to Queue";</p>
<p>ContextMenu menu = new ContextMenu() { };<br />
 menu.Items.Add(mnuItem1);<br />
 menu.Items.Add(mnuItem2);<br />
 menu.Items.Add(mnuItem3);<br />
 menu.Items.Add(mnuItem4);<br />
 menu.Items.Add(mnuItem5);</p>
<p>(sender as TreeViewItem).ContextMenu = menu;<br />
 }<br />
 else if (type.ToUpper() == "BATCH")<br />
 {<br />
 MenuItem mnuItem1 = new MenuItem();<br />
 mnuItem1.Header = "Show Batch Details";<br />
 MenuItem mnuItem2 = new MenuItem();<br />
 mnuItem2.Header = "Edit Batch";<br />
 MenuItem mnuItem3 = new MenuItem();<br />
 mnuItem3.Header = "Delete Batch";</p>
<p>ContextMenu menu = new ContextMenu() { };<br />
 menu.Items.Add(mnuItem1);<br />
 menu.Items.Add(mnuItem2);<br />
 menu.Items.Add(mnuItem3);</p>
<p>(sender as TreeViewItem).ContextMenu = menu;<br />
 }<br />
 }<br />
 }</p>
<p>private static DependencyObject GetDependencyObjectFromVisualTree(DependencyObject startObject, Type type)<br />
 {<br />
 var parent = startObject;<br />
 while (parent != null)<br />
 {<br />
 if (type.IsInstanceOfType(parent))<br />
 break;<br />
 parent = VisualTreeHelper.GetParent(parent);<br />
 }<br />
 return parent;<br />
 }<br />
 }<br />
}<br />

Bye.

Just sharing a simple example that shows how to bind the XML data to TreeView using HierarchicalDataTemplate.

Suppose this is our XML file named Packages.xml

This is the XAML used

<Window x:Class="SampleSyncServerAdminTool.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>

 <XmlDataProvider x:Key="MyList" Source="Packages.xml" XPath="Packages"/>

<HierarchicalDataTemplate DataType="Packages" ItemsSource="{Binding XPath=*}">
 <TextBlock Text="Packages"></TextBlock>
 </HierarchicalDataTemplate>

<HierarchicalDataTemplate DataType="Package" ItemsSource="{Binding XPath=*}">
 <TextBlock Text="{Binding XPath=@Name}"></TextBlock>
 </HierarchicalDataTemplate>

<HierarchicalDataTemplate DataType="Batch" ItemsSource="{Binding XPath=*}">
 <TextBlock Text="{Binding XPath=@Name}"></TextBlock>
 </HierarchicalDataTemplate>

</Window.Resources>
 <Grid>
 <DockPanel>
 <TreeView DockPanel.Dock="Left" Width="150" Name="treeViewPackages"
 ItemsSource="{Binding Source={StaticResource MyList}}">
 </TreeView>
 <Grid DockPanel.Dock="Right">
 </Grid>
 </DockPanel>
 </Grid>
</Window>

The TreeView showing package information.

Bye.