Skip to content

Restructured the TabbedWindow UG content #2203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harinath-2699 wants to merge 6 commits into
base: hotfix/hotfix-v33.2.3
Choose a base branch
from
Open

Restructured the TabbedWindow UG content #2203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
93220d9
Restructured the TabbedWindow UG content
harinath-2699 Apr 24, 2026
a2c2cec
Modified the getting-started content for tabbed window.
Apr 27, 2026
1457b6a
Changes committed
harinath-2699 Apr 27, 2026
dd84e9c
Create wpf_customization.png
harinath-2699 Apr 27, 2026
54b4cbc
Image and API reference links committed for TabbedWindow Getting Started
harinath-2699 Apr 27, 2026
b98d811
Update getting-started.md
harinath-2699 Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 59 additions & 162 deletions wpf/Tabbed-Window/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,207 +7,104 @@ control: TabbedWindow
documentation: ug
---

# Getting Started with WPF Tabbed Window
# Getting Started with WPF TabbedWindow

## Creating Your First Tabbed Window
This section explains how to create a tabbed window interface using the [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html) and [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) controls. The TabbedWindow provides a browser-style, document-based user interface that integrates tabs directly into the window chrome, similar to modern IDEs and web browsers.

### Step 1: Add References
## Assembly Deployment

To integrate the TabbedWindow in you WPF application, add the following required assemblies or NuGet packages:

Ensure you have the required Syncfusion assemblies referenced in your project:
- Syncfusion.SfChromelessWindow.WPF
- Syncfusion.Shared.WPF

### Step 2: Create XAML

Create a window that inherits from `TabbedWindow`:

{% tabs %}

{% highlight XAML %}

<syncfusion:SfChromelessWindow xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
WindowType="Tabbed"
Height="450" Width="800">
<syncfusion:SfTabControl x:Name="MainTabControl">
<syncfusion:SfTabItem Header="Home" Content="Welcome to Home Tab"/>
<syncfusion:SfTabItem Header="File" Content="Welcome to File Tab"/>
<syncfusion:SfTabItem Header="Edit" Content="Welcome to Edit Tab"/>
<syncfusion:SfTabItem Header="Tools" Content="Welcome to Tools Tab"/>
</syncfusion:SfTabControl>
</syncfusion:SfChromelessWindow>

{% endhighlight %}

{% endtabs %}

### Step 3: Create Code-Behind

Create the C# code-behind file:

{% tabs %}

{% highlight C# %}

using Syncfusion.Windows.Controls;

public partial class MainWindow : SfChromelessWindow
{
public MainWindow()
{
InitializeComponent();

this.WindowType = WindowType.Tabbed;

var tabControl = new SfTabControl();
var tab = new SfTabItem { Header = "Document 1", Content = new TextBlock { Text = "Doc 1" } };
tabControl.Items.Add(tab);
this.Content = tabControl;
}
}
{% endhighlight %}

{% endtabs %}

![WPF Tabbed Window](getting-started_images/wpf_tabbedwindow.png)

## Key Properties
## Adding TabbedWindow via XAML

| Property | Description |
|----------|-------------|
| `AllowDragDrop` | Enable/disable drag-drop reordering of tabs |
| `EnableNewTabButton` | Show/hide the new tab (+) button |
| `SelectedItem` | Get/set the currently active tab |
| `ItemsSource` | Bind tabs to a collection for data-driven scenarios |
| `WindowType` | Choose between "Tabbed" or "Normal" mode |
To add the TabbedWindow manually in XAML, follow these steps:

## Basic Examples
1. Create a new WPF project in Visual Studio with required .NET Framework or .NET Core version.

### With Close Buttons
2. Add the required assembly references or NuGet packages mentioned in the Assembly Deployment section.

{% tabs %}

{% highlight XAML %}
3. Import the Syncfusion WPF schema in your XAML file:

<syncfusion:SfTabControl>
<syncfusion:SfTabItem Header="Document 1" CloseButtonVisibility="Visible">
<TextBlock Text="Content" />
</syncfusion:SfTabItem>
</syncfusion:SfTabControl>

{% endhighlight %}

{% endtabs %}
```XML
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
```

### With New Tab Handler
4. Create a window that uses [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html) and set its [WindowType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html#Syncfusion_Windows_Controls_SfChromelessWindow_WindowType) property to `Tabbed`, and include an [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) with the required tab items.

{% tabs %}

{% highlight XAML %}

<syncfusion:SfTabControl
EnableNewTabButton="True"
NewTabRequested="OnNewTabRequested">
<!-- Tab items -->
</syncfusion:SfTabControl>

{% endhighlight %}

{% endtabs %}

{% tabs %}

{% highlight C# %}
<syncfusion:SfChromelessWindow
x:Class="TabbedWindowDemo.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"
WindowType="Tabbed"
Height="450"
Width="800">

<syncfusion:SfTabControl>
<syncfusion:SfTabItem Header="Home" Content="Welcome to Home Tab"/>
<syncfusion:SfTabItem Header="File" Content="Welcome to File Tab"/>
<syncfusion:SfTabItem Header="Edit" Content="Welcome to Edit Tab"/>
<syncfusion:SfTabItem Header="Tools" Content="Welcome to Tools Tab"/>
</syncfusion:SfTabControl>

private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
{
var newItem = new SfTabItem { Header = "New Tab" };
e.Item = newItem;
}
</syncfusion:SfChromelessWindow>

{% endhighlight %}

{% endtabs %}

## Window Type Modes
![WPF Tabbed Window](getting-started_images/tabbedwindow_xaml.png)

The Tabbed Window supports two distinct modes that control how tabs are integrated into the window layout. Choose the mode that best fits your application's requirements.
## Adding WPF TabbedWindow via C#

### Tabbed Mode
To add the TabbedWindow control manually in C#, follow these steps:

In Tabbed mode, tabs are integrated into the window's chrome area (the title bar area), similar to modern web browsers. This creates a unified interface where tabs and the window controls appear together.
1. Create a new WPF project in Visual Studio with the required .NET Framework or .NET Core version.

#### When to Use Tabbed Mode
2. Add the required assembly references or NuGet packages mentioned in the Assembly Deployment section.

- Building browser-style applications
- Creating document editors (similar to Visual Studio)
- Tabs are the primary navigation method
- Want integrated chrome appearance with tabs

#### Example
3. Include the required namespace, create a window that inherits from [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html), set its [WindowType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html#Syncfusion_Windows_Controls_SfChromelessWindow_WindowType) to `Tabbed`, and include an [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) with the required tab items.

{% tabs %}

{% highlight XAML %}

<syncfusion:SfChromelessWindow
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
x:Class="TabbedWindowApp.MainWindow"
WindowType="Tabbed"
Height="600"
Width="900">
<syncfusion:SfTabControl AllowDragDrop="True" EnableNewTabButton="True">
<syncfusion:SfTabItem Header="Document 1" CloseButtonVisibility="Visible"
Content="Tabs are integrated into window chrome"/>
<syncfusion:SfTabItem Header="Document 2" CloseButtonVisibility="Visible"
Content="Similar to browser interface"/>
</syncfusion:SfTabControl>
</syncfusion:SfChromelessWindow>

{% endhighlight %}

{% endtabs %}

![WPF Tabbed Window](getting-started_images/tabbedwindow.png)

#### Layout Characteristics

- Tabs appear in the window chrome area
- Window title and tabs share the top area
- Compact layout
- Professional browser-like appearance

### Normal Mode
{% highlight C# %}

In Normal mode, the SfTabControl is displayed as regular content within the window. The tabs occupy the content area rather than being integrated into the window chrome, providing a traditional tab navigation interface.
using Syncfusion.Windows.Controls;

#### When to Use Normal Mode
public partial class MainWindow : SfChromelessWindow
{
public MainWindow()
{
InitializeComponent();
WindowType = WindowType.Tabbed;

- Tabs are secondary navigation
- Need additional UI elements above tabs (toolbar, menu)
- Creating traditional MDI applications
- Want flexible layout control
var tabControl = new SfTabControl();

{% tabs %}
tabControl.Items.Add(new SfTabItem
{
Header = "Document 1",
Content = new TextBlock { Text = "Document 1 Content" }
});

{% highlight XAML %}
tabControl.Items.Add(new SfTabItem
{
Header = "Document 2",
Content = new TextBlock { Text = "Document 2 Content" }
});

<syncfusion:SfChromelessWindow
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
x:Class="TabbedWindowApp.MainWindow"
Title="View Manager"
WindowType="Normal"
Height="600"
Width="900">
<Grid>
<syncfusion:SfTabControl AllowDragDrop="True">
<syncfusion:SfTabItem Header="View 1" Content="Tab control is regular content"/>
<syncfusion:SfTabItem Header="View 2" Content="Not integrated into chrome"/>
</syncfusion:SfTabControl>
</Grid>
</syncfusion:SfChromelessWindow>
Content = tabControl;
}
}

{% endhighlight %}

{% endtabs %}

![Normal mode](getting-started_images/wpf_normalwindow.png)
![WPF Tabbed Window](getting-started_images/tabbedwindow_csharp.png)
Binary file added wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png
View file
Open in desktop
Binary file not shown.