diff --git a/wpf/Tabbed-Window/getting-started.md b/wpf/Tabbed-Window/getting-started.md index 58ee999129..99417635cd 100644 --- a/wpf/Tabbed-Window/getting-started.md +++ b/wpf/Tabbed-Window/getting-started.md @@ -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 %} - - - - - - - - - - -{% 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: - - - - - - -{% 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 %} - - - - -{% endhighlight %} - -{% endtabs %} - -{% tabs %} - -{% highlight C# %} + + + + + + + + -private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e) -{ - var newItem = new SfTabItem { Header = "New Tab" }; - e.Item = newItem; -} + {% 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 %} - - - - - - - - -{% 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" } + }); - - - - - - - - + Content = tabControl; + } +} {% endhighlight %} {% endtabs %} -![Normal mode](getting-started_images/wpf_normalwindow.png) +![WPF Tabbed Window](getting-started_images/tabbedwindow_csharp.png) diff --git a/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png new file mode 100644 index 0000000000..2f599dba02 Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png differ diff --git a/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png new file mode 100644 index 0000000000..3fb8f71400 Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png differ diff --git a/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png b/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png deleted file mode 100644 index 9adb5bce7d..0000000000 Binary files a/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png and /dev/null differ