How to add a Close button on the WPF Dynamic Tab Management tab

Question

I have a WPF Tab tab.

I add tabs in that TabControl is dynamically

Now I want to give the "Close" button in each tab "Tab Management".

So please tell me to add the Close button in this tab control.

Code to add a tab

private void AddTab(ITabbedMDI mdiChild) { if (_mdiChildren.ContainsKey(mdiChild.UniqueTabName)) { //user control is already opened in tab. //So set focus to the tab item where the control hosted foreach (object item in tcMdi.Items) { TabItem ti = (TabItem)item; if (ti.Name == mdiChild.UniqueTabName) { ucChildLoc = (UserControl)mdiChild; ti.Focus(); //tcMdi.Width = this.ucChildLoc.Width; //tcMdi.Height = this.ucChildLoc.Height; break; } } } } 

Code for closing a tab

 private void CloseTab(ITabbedMDI tab, EventArgs e) { TabItem ti = null; foreach(TabItem item in tcMdi.Items) { if (tab.UniqueTabName == ((ITabbedMDI)item.Content).UniqueTabName) { ti = item; break; } } if (ti != null) { _mdiChildren.Remove(((ITabbedMDI)ti.Content).UniqueTabName); tcMdi.Items.Remove(ti); } } 

I use the tabcontrol of this article

http://www.codeproject.com/Articles/32362/Tabbed-MDI-in-WPF

Thanks at Advance ..

Answer 1

TabControl does not provide the ability to close TabItems.

You can add an x ​​button and set the visibility to Minimized / Hidden as a hack.

OR You can view XamTabControl using Infragistics or any other vendor product that supports tab closing.

Answer 2

if you make the tab control as a custom control and inherit the functionality from the tab control, then add a close button and handle its events, then it will work

  <UserControl x:Class="CloseableHeader" 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="23" d:DesignWidth="81" Margin="0"> <Grid> <Button Content="X" Height="19" HorizontalAlignment="Right" Margin="0,3,4,0" Name="button_close" VerticalAlignment="Top" Width="20" FontFamily="Courier" FontWeight="Bold" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" FontStretch="Normal" Visibility="Visible" FontSize="14" Padding="0" ToolTip="Close"/> <Label Content="TabItem" Height="23" HorizontalAlignment="Left" Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" /> </Grid> 

  class ClosableTab : TabItem { // Constructor public ClosableTab() { // Create an instance of the usercontrol closableTabHeader = new CloseableHeader(); // Assign the usercontrol to the tab header this.Header = closableTabHeader; } } 

For more details see this article http://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem this may be useful

Answer 3

I tried several solutions and struggled to find something that looked beautiful, and also highlighted the “X” in the button when the mouse crashed. Finally, I am done with this. It also does not require too much code. Hope this helps:

 <TabControl> <TabItem> <TabItem.Header> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0">Output</TextBlock> <Button Grid.Column="1" Name="button_close" Click="button_close_Click"> <Button.Template> <ControlTemplate TargetType="Button"> <Path Data="M0,0 L8,8 M8,0 L0,8" StrokeThickness="3" VerticalAlignment="Center" Margin="5,4,0,2"> <Path.Style> <Style TargetType="{x:Type Path}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="False"> <Setter Property="Stroke" Value="LightGray" /> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Stroke" Value="Black" /> </Trigger> </Style.Triggers> </Style> </Path.Style> </Path> </ControlTemplate> </Button.Template> </Button> </Grid> </TabItem.Header> <TabItem.Content> </TabItem.Content>