This article describes how to programmatically close TabItem through button click in MVVM pattern. TabItemExt can be closed programmatically by passing SelectedIndex as a parameter to RemoveAt method of Collection Class to remove the TabItem at the specified position from tab collection in view model. Adding command and command parameter on the button to close the TabitemExt in a button click in MVVM. Added a Command binding for closing the TabItem in TabControlExt. By Binding ElementName and Path of TabControlExt as a CommandParameter to a button in order to close the selected TabItem in the view model. The following code example demonstrates the same. XAML MainWindow.xaml Tab.xaml C# TabControlModel.cs TabControlViewModel.cs Tab.xaml.cs The output for the above code is shown below:
We can set an Icon from XAML resource in TabItemExt header through Header Template. To achieve this, we can customize the header of each TabItemExt by its Header Template to bind the Icon in header of TabItemExt. The same has been demonstrated in the following code, Resource file: (MetroIcon.xaml) App.xaml: MainPage.xaml: Output:
Tablistcontextmenu can be customized by TabListContextMenuTemplate property for TabcontrolExt with the Target type as ContextMenu. The same has been explained in the following code snippet: XAML: Output:
To set the background and foreground for the selected tabs in the TabControlExt, the TabItemSelectedBackground and TabItemSelectedForeground property of the TabControlExt can be used. The same has been explained in the following code example: XAML: C#:
In TabControlExt, you cannot find the row position of TabItemExt directly. You can find the row position of TabItemExt using TabItemheight and its count, also you can bind the value with TabItemHeader to display. The following workaround code example describes about how to find the row position of TabItemExt in TabControlExt. XAML C# Model.cs ViewModel.cs MainWindow.cs: The following screenshot displays the TabItemHeader with Row position. Figure 1: TabItemHeader with Row position
You can hide or unhide the Tab Item Header in WPF TabControl by setting the HideHeaderOnSingleChild property as true or false respectively. XAML <syncfusion:TabControlExt Name="tabcontolext" HideHeaderOnSingleChild="True" > <syncfusion:TabItemExt Name="tabitem1" Header="TabItem1"> <TextBlock FontSize="18" FontWeight="Bold">Hide Header On Single Child</TextBlock> </syncfusion:TabItemExt> </syncfusion:TabControlExt> C# tabcontolext.HideHeaderOnSingleChild = true; Assigning the HideHeaderOnSingleChild property as false. Figure 1: HideHeaderOnSingleChild property as false Assigning HideHeaderOnSingleChild property as true. Figure 2: HideHeaderOnSingleChild property as trueConclusionI hope you enjoyed learning about how to hide Header having single child in WPF Tab Control.You can refer to our WPF Tab Control feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Tab Control to understand how to present and manipulate data.For current customers, you can check out our WPF Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to cheIf you have any queries or require clarifications, pleack out our WPF Tab Control and other WPF controls.se let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
