How to set different types of CloseButton for the Tabs in the TabControlExt?
In WPF TabControlExt, there are five type to display the CloseButton for the tabitems and CloseButton display can be changed by the property CloseButtonType of TabControlExt.
Five type of CloseButton:
- Common
- Individual
- Both
- Hide
- IndividualOnMouseOver.
Common: Common close button displayed at right corner of Tab header panel to close the tabs based on the SelectedItem and it is the default value of CloseButtonType property.
The same has been explained in the following code snippet:
<Window x:Class="Tabitem.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <syncfusion:TabControlExt CloseButtonType="Common"> <syncfusion:TabItemExt Header="TabItem1"/> <syncfusion:TabItemExt Header="TabItem2"/> <syncfusion:TabItemExt Header="TabItem3"/> <syncfusion:TabItemExt Header="TabItem4"/> <syncfusion:TabItemExt Header="TabItem5"/> </syncfusion:TabControlExt> </Window>
using Syncfusion.Windows.Tools.Controls;
namespace Tabitem
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControlExt Tabcontrol = new TabControlExt();
Tabcontrol.CloseButtonType = CloseButtonType.Common;
TabItemExt item1 = new TabItemExt();
item1.Header = "TabItem1";
TabItemExt item2 = new TabItemExt();
item2.Header = "TabItem2";
TabItemExt item3 = new TabItemExt();
item3.Header = "TabItem3";
TabItemExt item4 = new TabItemExt();
item4.Header = "TabItem4";
TabItemExt item5 = new TabItemExt();
item5.Header = "TabItem5";
Tabcontrol.Items.Add(item1);
Tabcontrol.Items.Add(item2);
Tabcontrol.Items.Add(item3);
Tabcontrol.Items.Add(item4);
Tabcontrol.Items.Add(item5);
Grid1.Children.Add(Tabcontrol);
}
}
}
Individual: Close button will display on each of the tab items present in TabControlExt. This can be achieved by setting the CloseButtonType property as Individual
<Window x:Class="Tabitem.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:TabControlExt CloseButtonType="Individual"> <syncfusion:TabItemExt Header="TabItem1"/> <syncfusion:TabItemExt Header="TabItem2"/> <syncfusion:TabItemExt Header="TabItem3"/> <syncfusion:TabItemExt Header="TabItem4"/> <syncfusion:TabItemExt Header="TabItem5"/> </syncfusion:TabControlExt> </Window>
using Syncfusion.Windows.Tools.Controls;
namespace Tabitem
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControlExt Tabcontrol = new TabControlExt();
Tabcontrol.CloseButtonType = CloseButtonType.Individual;
TabItemExt item1 = new TabItemExt();
item1.Header = "TabItem1";
TabItemExt item2 = new TabItemExt();
item2.Header = "TabItem2";
TabItemExt item3 = new TabItemExt();
item3.Header = "TabItem3";
TabItemExt item4 = new TabItemExt();
item4.Header = "TabItem4";
TabItemExt item5 = new TabItemExt();
item5.Header = "TabItem5";
Tabcontrol.Items.Add(item1);
Tabcontrol.Items.Add(item2);
Tabcontrol.Items.Add(item3);
Tabcontrol.Items.Add(item4);
Tabcontrol.Items.Add(item5);
Grid1.Children.Add(Tabcontrol);
}
}
}
Both: Close button will display on each individual tab items and it also display as common close button for all tabitems. It can be achieved by setting CloseButtonType as Both.
<Window x:Class="Tabitem.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:TabControlExt CloseButtonType="Both"> <syncfusion:TabItemExt Header="TabItem1"/> <syncfusion:TabItemExt Header="TabItem2"/> <syncfusion:TabItemExt Header="TabItem3"/> <syncfusion:TabItemExt Header="TabItem4"/> <syncfusion:TabItemExt Header="TabItem5"/> </syncfusion:TabControlExt> </Grid> </Window>
using Syncfusion.Windows.Tools.Controls;
namespace Tabitem
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControlExt Tabcontrol = new TabControlExt();
Tabcontrol.CloseButtonType = CloseButtonType.Both;
TabItemExt item1 = new TabItemExt();
item1.Header = "TabItem1";
TabItemExt item2 = new TabItemExt();
item2.Header = "TabItem2";
TabItemExt item3 = new TabItemExt();
item3.Header = "TabItem3";
TabItemExt item4 = new TabItemExt();
item4.Header = "TabItem4";
TabItemExt item5 = new TabItemExt();
item5.Header = "TabItem5";
Tabcontrol.Items.Add(item1);
Tabcontrol.Items.Add(item2);
Tabcontrol.Items.Add(item3);
Tabcontrol.Items.Add(item4);
Tabcontrol.Items.Add(item5);
Grid1.Children.Add(Tabcontrol);
}
}
}
IndividualOnMouseHover: Close button will display on each of the tabitems on mouse hover. It can be achieved by setting CloseButtonType as IndividualOnMouseHover.
<Window x:Class="Tabitem.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:TabControlExt CloseButtonType="IndividualOnMouseOver"> <syncfusion:TabItemExt Header="TabItem1"/> <syncfusion:TabItemExt Header="TabItem2"/> <syncfusion:TabItemExt Header="TabItem3"/> <syncfusion:TabItemExt Header="TabItem4"/> <syncfusion:TabItemExt Header="TabItem5"/> </syncfusion:TabControlExt> </Grid> </Window>
using Syncfusion.Windows.Tools.Controls;
namespace Tabitem
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControlExt Tabcontrol = new TabControlExt();
Tabcontrol.CloseButtonType = CloseButtonType.IndividualOnMouseOver;
TabItemExt item1 = new TabItemExt();
item1.Header = "TabItem1";
TabItemExt item2 = new TabItemExt();
item2.Header = "TabItem2";
TabItemExt item3 = new TabItemExt();
item3.Header = "TabItem3";
TabItemExt item4 = new TabItemExt();
item4.Header = "TabItem4";
TabItemExt item5 = new TabItemExt();
item5.Header = "TabItem5";
Tabcontrol.Items.Add(item1);
Tabcontrol.Items.Add(item2);
Tabcontrol.Items.Add(item3);
Tabcontrol.Items.Add(item4);
Tabcontrol.Items.Add(item5);
Grid1.Children.Add(Tabcontrol);
}
}
}
Hide: Hide the close button of tabs. It can be achieved by setting the CloseButtonType as Hide.
<Window x:Class="Tabitem.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="Grid1"> <syncfusion:TabControlExt CloseButtonType="Hide"> <syncfusion:TabItemExt Header="TabItem1"/> <syncfusion:TabItemExt Header="TabItem2"/> <syncfusion:TabItemExt Header="TabItem3"/> <syncfusion:TabItemExt Header="TabItem4"/> <syncfusion:TabItemExt Header="TabItem5"/> </syncfusion:TabControlExt> </Grid> </Window>
using Syncfusion.Windows.Tools.Controls;
namespace Tabitem
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControlExt Tabcontrol = new TabControlExt();
Tabcontrol.CloseButtonType = CloseButtonType.Hide;
TabItemExt item1 = new TabItemExt();
item1.Header = "TabItem1";
TabItemExt item2 = new TabItemExt();
item2.Header = "TabItem2";
TabItemExt item3 = new TabItemExt();
item3.Header = "TabItem3";
TabItemExt item4 = new TabItemExt();
item4.Header = "TabItem4";
TabItemExt item5 = new TabItemExt();
item5.Header = "TabItem5";
Tabcontrol.Items.Add(item1);
Tabcontrol.Items.Add(item2);
Tabcontrol.Items.Add(item3);
Tabcontrol.Items.Add(item4);
Tabcontrol.Items.Add(item5);
Grid1.Children.Add(Tabcontrol);
}
}
}
Conclusion
I hope you enjoyed learning about how to set different types of closeButton for the Tabs in the TabControlExt.
You can refer to our WPF TabControl feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our WPF TabControl Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
