Prepare UG for new WPF TabbedWindow control

wpf-toc.html

@@ -573,6 +573,17 @@
             <li><a href="/wpf/Chromeless-Window/Styling-the-ChromelessWindow">Styling the ChromelessWindow</a></li>
         </ul>
     </li>
+    <li>
+        TabbedWindow
+        <ul>
+            <li><a href="/wpf/TabbedWindow/Overview">Overview</a></li>
+            <li><a href="/wpf/TabbedWindow/Getting-Started">Getting Started</a></li>
+            <li><a href="/wpf/TabbedWindow/Working-With-Tabs">Working with Tabs</a></li>
+            <li><a href="/wpf/TabbedWindow/Events">Events</a></li>
+            <li><a href="/wpf/TabbedWindow/Tab-Reordering">Tab Reordering</a></li>
+            <li><a href="/wpf/TabbedWindow/Customizing-Appearance">Customizing Appearance</a></li>
+        </ul>
+    </li>
     <li>
         SfCircularGauge
         <ul>

wpf/TabbedWindow/Customizing-Appearance.md

@@ -0,0 +1,96 @@
+---
+layout: post
+title: Customizing Appearance — TabbedWindow | Syncfusion®
+description: Templates, new-tab button, and tab state styling guidance for TabbedWindow.
+platform: WPF
+control: TabbedWindow
+documentation: ug
+---
+
+# Customizing Appearance
+
+This page shows how to customize `SfTabItem` header and content templates, style the new‑tab button, and tune tab visual states for the `TabbedWindow` UX.
+
+## Header and Content templates for SfTabItem
+
+Use `ItemTemplate` and `ContentTemplate` to present icons, badges, editable headers, and rich content inside tabs. Keep header templates lightweight to avoid layout overhead when many tabs are open.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+<DataTemplate x:Key="TabHeaderTemplate">
+  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+    <Image Source="/Images/doc.png" Width="16" Height="16"/>
+    <TextBlock Text="{Binding Title}" Margin="6,0,0,0"/>
+  </StackPanel>
+</DataTemplate>
+
+<DataTemplate x:Key="TabContentTemplate">
+  <ContentPresenter Content="{Binding Content}" />
+</DataTemplate>
+
+<syncfusion:SfTabControl ItemsSource="{Binding OpenTabs}"
+                         ItemTemplate="{StaticResource TabHeaderTemplate}"
+                         ContentTemplate="{StaticResource TabContentTemplate}" />
+{% endhighlight %}
+
+{% highlight C# %}
+
+
+{% endtabs %}
+
+![WPF TabbedWindow Customization](Customizing-Appearance_images/wpf_customization.png)
+
+## Styling the new‑tab button
+
+### NewTabButtonTemplate
+
+Control visibility and appearance of the new‑tab button using `EnableNewTabButton` and `NewTabButtonTemplate`. Provide accessible content and keyboard focus visuals for the button.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+<DataTemplate x:Key="NewTabButtonTemplate">
+  <Grid>
+    <Path Data="M0 6.4H12V5.6H0V6.4Z" StrokeThickness="1" Fill="Red"/>
+    <Path Data="M5.6 12H6.4V0H5.6V12Z" StrokeThickness="1" Fill="Red"/>
+</Grid>
+</DataTemplate>
+
+<syncfusion:SfTabControl NewTabButtonTemplate="{StaticResource NewTabButtonTemplate}"
+                         EnableNewTabButton="True" />
+{% endhighlight %}
+{% endtabs %}
+
+![WPF NewButton Customization](Customizing-Appearance_images/wpf-newbutton_customization.png)
+
+### NewTabButtonStyle
+
+`NewTabButtonStyle` targets the internal `Button` used for the new‑tab affordance and controls visual properties such as size, background, border and padding without replacing the element tree. 
+
+{% tabs %}
+
+{% highlight XAML %}
+
+<syncfusion:SfTabControl EnableNewTabButton="True"
+                         x:Name="maintabcontrol">
+    <syncfusion:SfTabControl.NewTabButtonStyle>
+        <Style TargetType="{x:Type Button}">
+            <Setter Property="Background" Value="Red"/>
+            <Setter Property="BorderBrush" Value="Yellow"/>
+            <Setter Property="MinWidth" Value="30"/>
+            <Setter Property="MinHeight" Value="30"/>
+        </Style>
+    </syncfusion:SfTabControl.NewTabButtonStyle>
+    <syncfusion:SfTabItem Header="Tab 1" Content="Tab 1 Content"/>
+    <syncfusion:SfTabItem Header="Tab 2" Content="Tab 2 Content"/>
+    <syncfusion:SfTabItem Header="Tab 3" Content="Tab 3 Content"/>
+</syncfusion:SfTabControl>
+
+{% endhighlight %}
+
+{% endtabs %}
+
+![WPF NewButtonStyle](Customizing-Appearance_images\wpf_newbuttonstyle.png)

wpf/TabbedWindow/Events.md

@@ -0,0 +1,70 @@
+---
+layout: post
+title: Events — TabbedWindow | Syncfusion®
+description: Key events and example handlers for `TabbedWindow`.
+platform: WPF
+control: TabbedWindow
+documentation: ug
+---
+
+# Events
+
+This page lists the events raised by `TabbedWindow` / `SfTabControl` and gives small, named-handler examples to explain the events.
+
+## NewTabRequested
+
+Raised when the user invokes the new‑tab action (new‑tab button) or when the app programmatically requests a new tab. Handle this event to supply the initial `SfTabItem` or to cancel creation.
+
+Common event-args properties:
+
+- `Item` — the `SfTabItem` or view model that will be inserted; assign this to provide default content.
+
+{% tabs %}
+{% highlight C# %}
+
+MainTabControl.NewTabRequested += MainTabControl_NewTabRequested;
+
+private void MainTabControl_NewTabRequested(object sender, NewTabRequestedEventArgs e)
+{
+    e.Item = new SfTabItem { Header = "Untitled", Content = new TextBlock { Text = "New" } };
+}
+{% endhighlight %}
+{% endtabs %}
+
+![WPF New Tab](Events_images/wpf_newtab.gif)
+
+## PreviewTabMerge
+
+Raised before an incoming tab is merged into a target `SfTabControl` (for example when a tab is dropped from another window or tab control). Use this event to validate, transform, or reject incoming tabs.
+
+Event-args properties:
+
+- `ResultingItem` — the tab item as it would appear after the merge.
+- `DraggedItem` — get the original dragged tab item.
+- `SourceControl` — get the originating `SfTabControl`.
+- `TargetControl` — get the receiving `SfTabControl`.
+- `Allow` (bool) — set to `false` to reject the merge.
+
+{% tabs %}
+{% highlight C# %}
+
+MainTabControl.PreviewTabMerge += MainTabControl_PreviewTabMerge;
+
+private void MainTabControl_PreviewTabMerge(object sender, TabMergePreviewEventArgs e)
+{
+    e.Allow = true;
+	if (!(e.ResultingItem is SfTabItem))
+    {
+        e.ResultingItem = new SfTabItem
+        {
+            Header = "NewTab",
+            Content = "NewContent"
+        };
+	}
+}
+{% endhighlight %}
+{% endtabs %}
+
+![WPF TabbedWindow Merging](Events_images/tabbedwindow-merging.gif)
+
+N> If the source and target tab item types are different, the PreviewTabMerge event allows us to replace the resulting item with a compatible type as per our convenience.

wpf/TabbedWindow/Getting-Started.md

@@ -0,0 +1,119 @@
+---
+layout: post
+title: Getting Started with TabbedWindow | Syncfusion®
+description: How to install and create a TabbedWindow using `SfChromelessWindow` and `SfTabControl`.
+platform: WPF
+control: TabbedWindow
+documentation: ug
+---
+
+# Getting Started with WPF TabbedWindow
+
+This guide shows how to add the `TabbedWindow` to a WPF application, create tabs, and configure common behaviors.
+
+## Structure of TabbedWindow
+
+The `TabbedWindow` combines two main pieces:
+
+- `SfChromelessWindow` — the shell that can operate in `Normal` or `Tabbed` mode.
+- `SfTabControl` — the tab host; tabs are `SfTabItem` instances that contain arbitrary content.
+
+## Assembly deployment
+
+Add the NuGet package `Syncfusion.SfChromelessWindow.WPF` to your project. This package contains `SfChromelessWindow`, `SfTabControl` and `SfTabItem`.
+
+Refer to the Control Dependencies and NuGet documentation for additional packaging details.
+
+## Adding TabbedWindow via designer
+
+Drag `SfChromelessWindow` (or the Syncfusion window shell) from the toolbox onto your window in Visual Studio; the required assemblies will be added automatically when using Syncfusion toolbox integration.
+
+Typical dependent assemblies:
+
+- `Syncfusion.SfChromelessWindow.WPF`
+- `Syncfusion.Shared.WPF`
+
+![WPF TabbedWindow designer](Getting-Started_images/wpf_tabbedwindow-toolbox.png)
+
+## Adding TabbedWindow via XAML
+
+To create a TabbedWindow in XAML set `WindowType="Tabbed"` on `SfChromelessWindow`. The following example shows the minimal setup.
+
+{% 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 %}
+
+![WPF TabbedWindow](Getting-Started_images/wpf_tabbedwindow.png)
+
+## Adding TabbedWindow via C#
+
+To create the tabbed window and add tabs in code:
+
+{% 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 %}
+
+## New tab button
+
+Enable the new‑tab button with `SfTabControl.EnableNewTabButton` and customize it with `NewTabButtonTemplate`. Handle `NewTabRequested` to supply default content.
+
+{% tabs %}
+
+{% highlight C# %}
+
+tabControl.EnableNewTabButton = true;
+
+tabControl.NewTabRequested += TabControl_NewTabRequested;
+
+private void TabControl_NewTabRequested(object sender, NewTabRequestedEventArgs e)
+{
+  e.Item = new SfTabItem { Header = "Untitled", Content = new TextBlock { Text = "New" } };
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+![WPF New tab button](Getting-Started_images/wpf_newtab.gif)
+
+## Theme
+
+TabbedWindow supports various built-in themes. Refer to the below links to apply themes for the TabbedWindow,
+
+- [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)
+- [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)
+

wpf/TabbedWindow/Overview.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title: TabbedWindow — Overview | Syncfusion®
+description: Learn here all about introduction of Syncfusion® WPF TabbedWindow control, its elements and more.
+platform: WPF
+control: TabbedWindow
+documentation: ug
+---
+
+# WPF TabbedWindow Overview
+
+The `TabbedWindow` provides a multi‑document (MDI‑style) experience inside a single WPF window. It combines a chromeless window shell (`SfChromelessWindow`) with a tab host (`SfTabControl`) so applications can open, switch and manage multiple documents or views in a single container.
+
+## Key features
+
+**Tabbed window shell** — Integrates `SfTabControl` into a chromeless window (`WindowType = Tabbed`) so the tab strip is visually part of the window chrome.
+
+**Tab management** — Open, close and switch tabs quickly. Tabs are represented by `SfTabItem` and host arbitrary content (views, documents, dashboards).
+
+**Drag & drop** — Reorder tabs within a tab strip by dragging headers.
+
+**Tear‑off / detach** — Drag a tab off the strip to float it into a standalone `SfChromelessWindow`.
+
+**Merge support** — Drop tabs onto another `SfTabControl` to merge; use the `PreviewTabMerge` event to accept or reject cross‑window merges.
+
+**New‑tab flow** — Built‑in new‑tab button and `NewTabRequested` event to create tabs with default content or view models.
+
+**Templating & styling** — Customize header templates, content templates, new‑tab button templates and tab item styles to match application design and Syncfusion themes.

wpf/TabbedWindow/Tab-Reordering.md

@@ -0,0 +1,33 @@
+---
+layout: post
+title: Tab Reordering | Syncfusion®
+description: Explain tab reordering and detach (tear‑off) behaviors for TabbedWindow.
+platform: WPF
+control: TabbedWindow
+documentation: ug
+---
+
+# Tab Reordering
+
+Drag‑and‑drop enable intuitive tab management: users can reorder tabs within a tab strip and tear off a tab to create a standalone window. This page describes those built‑in behaviors.
+
+## Reorder tabs
+
+Reordering is supported out of the box when `SfTabControl.AllowDragDrop` is `true` (default). Users drag a tab header along the strip and drop it at the new position.
+
+![WPF TabbedWindow Reorder](Tab-Reordering_images/tab_reorder.gif)
+
+N> No code is required to enable basic reorder behavior — it works when `AllowDragDrop` is enabled.
+
+## Detach tabs into standalone ChromelessWindow
+
+The control supports tearing off a tab into its own window. Drag a tab away from the tab strip to create a detached `SfChromelessWindow` that hosts the tab's content.
+
+![WPF TabbedWindow Tear-Off](Tab-Reordering_images/tear-off-tabbedwindow.gif)
+
+## Keyboard shortcuts
+
+- `Ctrl + Tab` — move to the next tab.
+- `Ctrl + Shift + Tab` — move to the previous tab.
+- `Ctrl + T` — create a new `SfTabItem` (programmatic shortcut).
+- Mouse middle‑click on a `SfTabItem` header — close that tab.