syncfusion-wpf-tab-navigation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing TabNavigationControl (WPF)

实现TabNavigationControl（WPF）

When to Use This Skill

适用场景

Use this skill when the user needs to:

Display pages or items with animated transition effects (slide, fade, zoom, blur, etc.)
Build an ad-rotator or banner-style content switcher in WPF
Create tab-based navigation with visual transition between content areas
Bind a collection of items to an animated tab navigator
Control visibility of the header strip, navigation buttons, or tab strip
Switch between pages programmatically with transition animations

当用户需要以下功能时，可使用本技能：

展示带有动画过渡效果（滑动、淡入淡出、缩放、模糊等）的页面或项
在WPF中构建广告轮播或横幅式内容切换器
创建内容区域间带有视觉过渡效果的标签式导航
将项集合绑定到带动画的标签导航器
控制标题栏、导航按钮或标签栏的可见性
通过编程方式切换页面并附带过渡动画

Component Overview

组件概述

TabNavigationControl                    (root container)
└── TabNavigationItem  (×N)            (each page/item)
    ├── Header                          — tab label text
    └── Content                         — page content (any UIElement)

Assemblies:

Syncfusion.Tools.WPF

Syncfusion.Shared.WPF

Namespace:

Syncfusion.Windows.Tools.Controls

XAML schema:

http://schemas.syncfusion.com/wpf

TabNavigationControl                    (根容器)
└── TabNavigationItem  (×N)            (每个页面/项)
    ├── Header                          — 标签文本
    └── Content                         — 页面内容（任意UIElement）

程序集：

Syncfusion.Tools.WPF

Syncfusion.Shared.WPF

命名空间：

Syncfusion.Windows.Tools.Controls

XAML架构：

http://schemas.syncfusion.com/wpf

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly references and NuGet package
XAML namespace (syncfusion schema)
Declarative control setup
Adding TabNavigationItem in XAML and C#
Themes with SfSkinManager

📄 阅读： references/getting-started.md

程序集引用与NuGet包
XAML命名空间（syncfusion架构）
声明式控件设置
在XAML和C#中添加TabNavigationItem
使用SfSkinManager设置主题

Data Binding

数据绑定

📄 Read: references/data-binding.md

Binding ObservableCollection via ItemsSource
Binding from XML data source
Model + ViewModel + MainWindow wiring
XAML ItemsSource binding pattern

📄 阅读： references/data-binding.md

通过ItemsSource绑定ObservableCollection
从XML数据源绑定
Model + ViewModel + MainWindow的关联配置
XAML ItemsSource绑定模式

Transition Effects

过渡效果

📄 Read: references/transition-effects.md

All 7 TransitionEffect values: Slide, Fade, Zoom, Blur, Push, PushIn, Wipe
XAML example per effect
When to choose each effect
Decision guide

📄 阅读： references/transition-effects.md

全部7种TransitionEffect枚举值：Slide、Fade、Zoom、Blur、Push、PushIn、Wipe
每种效果的XAML示例
各效果的适用场景
选择指南

Appearance

外观自定义

📄 Read: references/appearance.md

```
HeaderVisibility
```
— show/hide the header tab strip
```
NavigationButtonVisibility
```
— show/hide prev/next arrows
```
TabStripVisibility
```
— show/hide the tab strip panel
XAML and C# examples

📄 阅读： references/appearance.md

```
HeaderVisibility
```
— 显示/隐藏标题标签栏
```
NavigationButtonVisibility
```
— 显示/隐藏上一页/下一页箭头
```
TabStripVisibility
```
— 显示/隐藏标签栏面板
XAML和C#示例

Quick Start

快速开始

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:TabNavigationControl x:Name="tabNavigation"
                                  TransitionEffect="Slide"
                                  Width="400" Height="300">
    <syncfusion:TabNavigationItem Header="Page 1">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 1" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 2">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 2" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 3">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 3" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
</syncfusion:TabNavigationControl>

csharp

using Syncfusion.Windows.Tools.Controls;

TabNavigationControl tabNavigation = new TabNavigationControl();
tabNavigation.TransitionEffect = TransitionEffect.Slide;

TabNavigationItem item1 = new TabNavigationItem { Header = "Page 1", Content = "Content 1" };
TabNavigationItem item2 = new TabNavigationItem { Header = "Page 2", Content = "Content 2" };
tabNavigation.Items.Add(item1);
tabNavigation.Items.Add(item2);
this.Content = tabNavigation;

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:TabNavigationControl x:Name="tabNavigation"
                                  TransitionEffect="Slide"
                                  Width="400" Height="300">
    <syncfusion:TabNavigationItem Header="Page 1">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 1" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 2">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 2" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 3">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 3" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
</syncfusion:TabNavigationControl>

csharp

using Syncfusion.Windows.Tools.Controls;

TabNavigationControl tabNavigation = new TabNavigationControl();
tabNavigation.TransitionEffect = TransitionEffect.Slide;

TabNavigationItem item1 = new TabNavigationItem { Header = "Page 1", Content = "Content 1" };
TabNavigationItem item2 = new TabNavigationItem { Header = "Page 2", Content = "Content 2" };
tabNavigation.Items.Add(item1);
tabNavigation.Items.Add(item2);
this.Content = tabNavigation;

Common Patterns

常见模式

Scenario	Approach
Static page set	Declarative `TabNavigationItem` in XAML
Dynamic data-driven tabs	`ItemsSource` + `ObservableCollection<TabNavigationItem>`
Smooth slide transition	`TransitionEffect="Slide"`
Fade between content	`TransitionEffect="Fade"`
Hide all chrome (full-screen content)	`HeaderVisibility="Collapsed"` + `TabStripVisibility="Collapsed"` + `NavigationButtonVisibility="Collapsed"`
Auto-rotating banner	Bind `ItemsSource` + control `SelectedIndex` via timer

场景	实现方式
静态页面集合	在XAML中声明 `TabNavigationItem`
动态数据驱动标签	`ItemsSource` + `ObservableCollection<TabNavigationItem>`
平滑滑动过渡	`TransitionEffect="Slide"`
内容淡入淡出切换	`TransitionEffect="Fade"`
隐藏所有边框（全屏内容）	`HeaderVisibility="Collapsed"` + `TabStripVisibility="Collapsed"` + `NavigationButtonVisibility="Collapsed"`
自动轮播横幅	绑定 `ItemsSource` + 通过计时器控制 `SelectedIndex`

Key Properties

关键属性

Property	Type	Description
`TransitionEffect`	`TransitionEffect` enum	Animation when switching items
`ItemsSource`	`IEnumerable`	Data collection for data-bound population
`HeaderVisibility`	`Visibility`	Show/hide the header tab strip
`NavigationButtonVisibility`	`Visibility`	Show/hide prev/next arrow buttons
`TabStripVisibility`	`Visibility`	Show/hide the tab strip panel

TabNavigationItem properties:

Property	Description
`Header`	Tab label text
`Content`	Page content (string or UIElement)

属性	类型	描述
`TransitionEffect`	`TransitionEffect` 枚举	切换项时的动画效果
`ItemsSource`	`IEnumerable`	用于数据绑定填充的数据集
`HeaderVisibility`	`Visibility`	显示/隐藏标题标签栏
`NavigationButtonVisibility`	`Visibility`	显示/隐藏上一页/下一页箭头按钮
`TabStripVisibility`	`Visibility`	显示/隐藏标签栏面板

TabNavigationItem属性：

属性	描述
`Header`	标签文本
`Content`	页面内容（字符串或UIElement）