syncfusion-winforms-xptaskpane

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion XPTaskPane

实现Syncfusion XPTaskPane

The XPTaskPane component is a Microsoft Office XP-inspired container control that hosts multiple task pages with built-in navigation and design-time support. Use it when you need a professional-looking multi-page layout with page browsing via dropdown menu and navigation buttons.
XPTaskPane组件是受Microsoft Office XP启发的容器控件,可承载多个任务页面,内置导航功能和设计时支持。当你需要具备下拉菜单和导航按钮页面浏览功能的专业多页面布局时可使用该组件。

When to Use XPTaskPane

何时使用XPTaskPane

Use XPTaskPane when you need to:
  • Create multi-page layouts inspired by Office XP UI
  • Provide navigation between multiple content panels
  • Allow users to browse pages via dropdown menu or arrow buttons
  • Build collapsible task pane interfaces
  • Organize related functionality into distinct pages
  • Provide design-time drag-and-drop support for pages
当你需要完成以下操作时使用XPTaskPane:
  • 创建受Office XP UI启发的多页面布局
  • 提供多个内容面板之间的导航功能
  • 允许用户通过下拉菜单或箭头按钮浏览页面
  • 构建可折叠的任务窗格界面
  • 将相关功能组织到不同的页面中
  • 为页面提供设计时拖放支持

Component Overview

组件概述

XPTaskPane consists of:
  • XPTaskPane - Main container control
  • WizardContainer - Page container (automatically added)
  • XPTaskPage - Individual pages displayed in the pane
  • Header - Navigation toolbar with buttons, menu, and close icon
XPTaskPane (main control)
├── HeaderLeftToolbar (previous/next buttons)
├── HeaderRightToolbar (menu dropdown + close button)
└── TaskPanePageContainer (WizardContainer)
    ├── XPTaskPage 1
    ├── XPTaskPage 2
    └── XPTaskPage N
XPTaskPane由以下部分组成:
  • XPTaskPane - 主容器控件
  • WizardContainer - 页面容器(自动添加)
  • XPTaskPage - 窗格中显示的单个页面
  • Header - 带有按钮、菜单和关闭图标的导航工具栏
XPTaskPane (main control)
├── HeaderLeftToolbar (previous/next buttons)
├── HeaderRightToolbar (menu dropdown + close button)
└── TaskPanePageContainer (WizardContainer)
    ├── XPTaskPage 1
    ├── XPTaskPage 2
    └── XPTaskPage N

Documentation Navigation Guide

文档导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Assembly dependencies and NuGet installation
  • Adding XPTaskPane via Form Designer
  • Adding XPTaskPane programmatically with code
  • Creating WizardContainer and XPTaskPage instances
  • Basic initialization steps
📄 阅读: references/getting-started.md
  • 程序集依赖项和NuGet安装
  • 通过窗体设计器添加XPTaskPane
  • 通过代码以编程方式添加XPTaskPane
  • 创建WizardContainer和XPTaskPage实例
  • 基础初始化步骤

Page Management

页面管理

📄 Read: references/page-management.md
  • Creating and adding XPTaskPage instances
  • Configuring page title and layout name
  • Adding controls to task pages
  • Accessing the TaskPages collection
  • SelectedPage property usage
📄 阅读: references/page-management.md
  • 创建和添加XPTaskPage实例
  • 配置页面标题和布局名称
  • 向任务页面添加控件
  • 访问TaskPages集合
  • SelectedPage属性用法

Navigation & Header Controls

导航和头部控件

📄 Read: references/navigation-header.md
  • Header toolbar components and items
  • Navigation button visibility and functionality
  • Dropdown menu for page selection
  • Header menu customization
  • Close button configuration
  • Custom images for toolbar buttons
📄 阅读: references/navigation-header.md
  • 头部工具栏组件和项
  • 导航按钮可见性和功能
  • 用于页面选择的下拉菜单
  • 头部菜单自定义
  • 关闭按钮配置
  • 工具栏按钮的自定义图片

Page Reordering & Navigation

页面重排和导航

📄 Read: references/page-reordering.md
  • Reordering pages at design-time
  • NextPage and PreviousPage properties
  • Sequential page navigation at runtime
  • Bring to Front and Send to Back operations
  • Page ordering in collection editor
📄 阅读: references/page-reordering.md
  • 设计时重排页面顺序
  • NextPage和PreviousPage属性
  • 运行时顺序页面导航
  • 置于顶层和置于底层操作
  • 集合编辑器中的页面排序

Appearance & Styling

外观和样式

📄 Read: references/appearance-styling.md
  • Visual styles (OfficeXP and Office2007)
  • Font and foreground color customization
  • Border styles and border properties
  • Header label styling
  • Page-level appearance configuration
  • Custom colors and color schemes
📄 阅读: references/appearance-styling.md
  • 视觉样式(OfficeXP和Office2007)
  • 字体和前景色自定义
  • 边框样式和边框属性
  • 头部标签样式
  • 页面级外观配置
  • 自定义颜色和配色方案

Content Scrolling

内容滚动

📄 Read: references/scrolling-content.md
  • Enabling vertical scrolling on pages
  • ScrollSpeed property configuration
  • Scroll behavior on mouse hover
  • Content overflow handling

📄 阅读: references/scrolling-content.md
  • 在页面上启用垂直滚动
  • ScrollSpeed属性配置
  • 鼠标悬停时的滚动行为
  • 内容溢出处理

Quick Start Example

快速开始示例

csharp
using Syncfusion.Windows.Forms.Tools;

// Step 1: Create XPTaskPane
XPTaskPane xpTaskPane1 = new XPTaskPane();
this.Controls.Add(xpTaskPane1);

// Step 2: Create and add WizardContainer
WizardContainer wizardContainer1 = new WizardContainer();
xpTaskPane1.Controls.Add(wizardContainer1);
xpTaskPane1.TaskPanePageContainer = wizardContainer1;

// Step 3: Create task pages
XPTaskPage page1 = new XPTaskPage();
page1.Title = "Page 1";
wizardContainer1.Controls.Add(page1);

XPTaskPage page2 = new XPTaskPage();
page2.Title = "Page 2";
wizardContainer1.Controls.Add(page2);

// Step 4: Set pages in TaskPages collection
xpTaskPane1.TaskPages = new XPTaskPage[] { page1, page2 };

// Step 5: Add controls to pages
Button btn = new Button() { Text = "Click Me" };
page1.Controls.Add(btn);
csharp
using Syncfusion.Windows.Forms.Tools;

// Step 1: Create XPTaskPane
XPTaskPane xpTaskPane1 = new XPTaskPane();
this.Controls.Add(xpTaskPane1);

// Step 2: Create and add WizardContainer
WizardContainer wizardContainer1 = new WizardContainer();
xpTaskPane1.Controls.Add(wizardContainer1);
xpTaskPane1.TaskPanePageContainer = wizardContainer1;

// Step 3: Create task pages
XPTaskPage page1 = new XPTaskPage();
page1.Title = "Page 1";
wizardContainer1.Controls.Add(page1);

XPTaskPage page2 = new XPTaskPage();
page2.Title = "Page 2";
wizardContainer1.Controls.Add(page2);

// Step 4: Set pages in TaskPages collection
xpTaskPane1.TaskPages = new XPTaskPage[] { page1, page2 };

// Step 5: Add controls to pages
Button btn = new Button() { Text = "Click Me" };
page1.Controls.Add(btn);

Common Patterns

常见模式

Pattern 1: Designer-Based Setup

模式1:基于设计器的设置

  1. Drag XPTaskPane from toolbox to form
  2. Click "Add Page" in Smart Tags
  3. Design each page visually
  4. No code required for basic setup
  1. 将XPTaskPane从工具箱拖到窗体
  2. 在智能标签中点击“添加页面”
  3. 可视化设计每个页面
  4. 基础设置无需编写代码

Pattern 2: Runtime Page Creation

模式2:运行时页面创建

  • Create pages dynamically in response to data or conditions
  • Use TaskPages property to update collection
  • Useful for dynamic layouts
  • 响应数据或条件动态创建页面
  • 使用TaskPages属性更新集合
  • 适用于动态布局

Pattern 3: Navigation Between Pages

模式3:页面间导航

  • Set NextPage and PreviousPage properties
  • Define page sequence programmatically
  • Control order independent of collection
  • 设置NextPage和PreviousPage属性
  • 通过编程方式定义页面顺序
  • 控制顺序独立于集合

Pattern 4: Custom Styling

模式4:自定义样式

  • Set VisualStyle to Office2007 or OfficeXP
  • Customize Font and ForeColor globally
  • Override individual page appearance
  • 将VisualStyle设置为Office2007或OfficeXP
  • 全局自定义字体和前景色
  • 覆盖单个页面的外观

Key Properties at a Glance

关键属性速览

PropertyTypePurpose
TaskPages
XPTaskPage[]Array of all task pages
SelectedPage
XPTaskPageCurrently active page
TaskPanePageContainer
ControlContainer for pages (WizardContainer)
VisualStyle
VisualStyleOffice theme (OfficeXP or Office2007)
ScrollSpeed
intScroll speed for page content
VerticalScroll
boolEnable vertical scrolling
Font
FontGlobal font for task pane
ForeColor
ColorGlobal text color
HeaderLabel
LabelHeader text control
HeaderLeftToolbar
ToolBarPrevious/next navigation buttons
HeaderRightToolbar
ToolBarMenu and close button

属性类型用途
TaskPages
XPTaskPage[]所有任务页面的数组
SelectedPage
XPTaskPage当前激活的页面
TaskPanePageContainer
Control页面容器(WizardContainer)
VisualStyle
VisualStyleOffice主题(OfficeXP或Office2007)
ScrollSpeed
int页面内容的滚动速度
VerticalScroll
bool启用垂直滚动
Font
Font任务窗格全局字体
ForeColor
Color全局文本颜色
HeaderLabel
Label头部文本控件
HeaderLeftToolbar
ToolBar上一步/下一步导航按钮
HeaderRightToolbar
ToolBar菜单和关闭按钮

Typical Use Cases

典型使用场景

  1. Multi-Step Wizard - Create step-by-step workflows
  2. Settings Dashboard - Organize settings into logical sections
  3. Document Viewer - Browse multiple document sections
  4. Feature Explorer - Group related features into pages
  5. Task Organization - Display related tasks in collapsible pages
  1. 多步骤向导 - 创建分步工作流
  2. 设置面板 - 将设置整理为逻辑区块
  3. 文档查看器 - 浏览多个文档章节
  4. 功能探索器 - 将相关功能分组到不同页面
  5. 任务组织 - 在可折叠页面中展示相关任务