|
1 | | -# Getting Started with WPF Tabcontrol (TabControlExt) |
| 1 | +# Getting Started with WPF TabControl (TabControlExt) |
| 2 | + |
| 3 | +This sample demonstrates the basic steps to integrate and use the **Syncfusion WPF TabControlExt** control in a WPF application. It shows how to add the control via XAML and C#, configure its size, and create multiple tab items with custom headers and content. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Prerequisites |
| 8 | +- **Visual Studio** (latest version recommended) |
| 9 | +- **.NET Framework / .NET Core** |
| 10 | +- Syncfusion WPF assemblies: |
| 11 | + - `Syncfusion.Tools.WPF` |
| 12 | + - `Syncfusion.Shared.WPF` |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +## Steps to Add TabControlExt |
| 17 | + |
| 18 | +### 1. Create a WPF Project |
| 19 | +Open Visual Studio and create a new WPF application. |
| 20 | + |
| 21 | +### 2. Add Required Assemblies |
| 22 | +Add references to: |
| 23 | +- `Syncfusion.Tools.WPF` |
| 24 | +- `Syncfusion.Shared.WPF` |
| 25 | + |
| 26 | +### 3. Import Syncfusion Namespace |
| 27 | +Add the following namespace in your XAML file: |
| 28 | +```xml |
| 29 | +xmlns:syncfusion="http://schemas.syncfusion.com/wpf" |
| 30 | +``` |
| 31 | + |
| 32 | +--- |
| 33 | + |
| 34 | +## Adding TabControl via XAML |
| 35 | + |
| 36 | +```xml |
| 37 | +<Window x:Class="TabControlDemo.MainWindow" |
| 38 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 39 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 40 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 41 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 42 | + xmlns:syncfusion="http://schemas.syncfusion.com/wpf" |
| 43 | + mc:Ignorable="d" |
| 44 | + Title="TabControl Demo" Height="450" Width="800"> |
| 45 | + <Grid> |
| 46 | + <syncfusion:TabControlExt Name="tabControl" |
| 47 | + ShowTabListContextMenu="True" |
| 48 | + ShowTabItemContextMenu="True" |
| 49 | + TabScrollStyle="Extended" |
| 50 | + TabScrollButtonVisibility="Visible" |
| 51 | + CloseButtonType="Both" |
| 52 | + IsNewButtonEnabled="True" |
| 53 | + NewButtonClick="TabControl_NewButtonClick" |
| 54 | + TabStripPlacement="Top"> |
| 55 | + |
| 56 | + <syncfusion:TabItemExt Header="tabItem1"> |
| 57 | + <TextBlock Text="This is the first tab item." /> |
| 58 | + <syncfusion:TabItemExt.ContextMenuItems> |
| 59 | + <syncfusion:CustomMenuItem Header="Menu1" /> |
| 60 | + </syncfusion:TabItemExt.ContextMenuItems> |
| 61 | + </syncfusion:TabItemExt> |
| 62 | + |
| 63 | + <syncfusion:TabItemExt Header="tabItem2" IsSelected="True" CanClose="False" CloseButtonState="Collapsed"> |
| 64 | + <TextBlock Text="This is the second tab item." /> |
| 65 | + <syncfusion:TabItemExt.ContextMenuItems> |
| 66 | + <syncfusion:CustomMenuItem Header="Menu2" /> |
| 67 | + </syncfusion:TabItemExt.ContextMenuItems> |
| 68 | + </syncfusion:TabItemExt> |
| 69 | + |
| 70 | + <syncfusion:TabItemExt Header="tabItem3"> |
| 71 | + <TextBlock Text="This is the third tab item." /> |
| 72 | + <syncfusion:TabItemExt.ContextMenuItems> |
| 73 | + <syncfusion:CustomMenuItem Header="Menu3" /> |
| 74 | + </syncfusion:TabItemExt.ContextMenuItems> |
| 75 | + </syncfusion:TabItemExt> |
| 76 | + |
| 77 | + </syncfusion:TabControlExt> |
| 78 | + </Grid> |
| 79 | +</Window> |
| 80 | +``` |
| 81 | + |
| 82 | +--- |
| 83 | + |
| 84 | +## Adding TabControl via C# |
| 85 | + |
| 86 | +```csharp |
| 87 | +using Syncfusion.Windows.Tools.Controls; |
| 88 | + |
| 89 | +public partial class MainWindow : Window { |
| 90 | + public MainWindow() { |
| 91 | + InitializeComponent(); |
| 92 | + |
| 93 | + // Create TabControlExt instance |
| 94 | + TabControlExt tabControlExt = new TabControlExt { |
| 95 | + Height = 100, |
| 96 | + Width = 280 |
| 97 | + }; |
| 98 | + |
| 99 | + // Add TabControl to window |
| 100 | + this.Content = tabControlExt; |
| 101 | + } |
| 102 | +} |
| 103 | +``` |
| 104 | +--- |
| 105 | + |
| 106 | +## Key Features Demonstrated |
| 107 | +- Adding **TabControlExt** via XAML and C# |
| 108 | +- Adding multiple **TabItemExt** with custom headers and content |
| 109 | +- Enabling **context menus** for individual tabs |
| 110 | +- Configuring **close button visibility** |
| 111 | +- Adding **New Tab button** with event handling |
| 112 | +- Supporting **tab scrolling and placement** |
| 113 | + |
| 114 | +--- |
| 115 | + |
| 116 | +## Run the Sample |
| 117 | +- **Option 1:** Open the solution in Visual Studio and run. |
| 118 | +- **Option 2:** From the project folder (PowerShell): |
| 119 | + - **Build:** `dotnet build` |
| 120 | + - **Run:** `dotnet run` |
| 121 | + |
| 122 | +--- |
| 123 | + |
| 124 | +## Documentation |
| 125 | +- [Syncfusion WPF Documentation](https://help.syncfusion.com/wpf/tabcontrol/getting-started) |
| 126 | +- [TabControlExt API Reference](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabControlExt.html) |
2 | 127 |
|
3 | | -This repository contains the sample to get started with the Syncfusion's Tabcontrol for WPF. |
|
0 commit comments