syncfusion-winforms-hub-tile

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing HubTiles

实现HubTiles

When to Use This Skill

何时使用本指南

Use this skill when the user needs to implement Syncfusion HubTile control in a Windows Forms application. HubTile provides live tile functionality with animated transitions similar to Windows 8 and Windows Phone.

当用户需要在Windows Forms应用中实现Syncfusion HubTile控件时使用本指南。HubTile提供类似Windows 8和Windows Phone的带动画过渡效果的动态磁贴功能。

Common Use Cases

常见使用场景

Dashboard tiles - Live-updating dashboard panels with animated content
Application launchers - Windows 8-style start screen tiles
Status displays - Animated status indicators with transitions
Live notifications - Content tiles that update with slide/rotate/pulse effects
Media libraries - Music/Video tiles with pulsing animations
News feeds - Tiles that transition between content updates
KPI panels - Key performance indicators with animated updates
Navigation menus - Interactive tile-based navigation similar to Windows Phone

When NOT to use: For static buttons or panels without animation needs, use standard Button or Panel controls. For data grids or tables, use DataGridView or Syncfusion GridControl.

仪表板磁贴 - 带动画内容的实时更新仪表板面板
应用启动器 - Windows 8风格的开始屏幕磁贴
状态显示 - 带过渡效果的动画状态指示器
实时通知 - 带有滑动/旋转/脉冲效果的内容磁贴更新
媒体库 - 带脉冲动画的音乐/视频磁贴
新闻信息流 - 在内容更新之间过渡的磁贴
KPI面板 - 带动画更新的关键性能指标展示
导航菜单 - 类似Windows Phone的交互式磁贴导航

不适用场景： 对于没有动画需求的静态按钮或面板，请使用标准Button或Panel控件。对于数据网格或表格，请使用DataGridView或Syncfusion GridControl。

Component Overview

组件概述

Syncfusion HubTile is a content control that functions as live tiles with automatic animations. Content updates are shown through various transition effects, similar to Windows 8 and Windows Phone live tiles.

Key components:

Title area (top)
Content/Image area (center)
Footer area (bottom)
Optional Banner overlay

Syncfusion HubTile是一种内容控件，可作为带自动动画效果的动态磁贴使用。内容更新通过多种过渡效果展示，类似Windows 8和Windows Phone的动态磁贴。

核心组成部分：

标题区域（顶部）
内容/图片区域（中部）
页脚区域（底部）
可选横幅覆盖层

Tile Types

磁贴类型

HubTile supports three animation styles:

HubTile支持三种动画样式：

1. DefaultTile

Provides notifications through slide transition effects (Bottom-to-Top, Top-to-Bottom, Left-to-Right, Right-to-Left).

Use when:

Displaying sequential content updates
News or status feeds
Content that flows in a specific direction

通过滑动过渡效果（从下到上、从上到下、从左到右、从右到左）提供通知。

适用场景：

展示顺序内容更新
新闻或状态信息流
按特定方向流动的内容

2. RotateTile

Animates by rotating the tile horizontally or vertically, flipping to show alternate content.

Use when:

Showing front/back content (e.g., question/answer)
Dual-state displays
Content that benefits from flip animation

通过水平或垂直旋转磁贴实现动画，翻转后展示备用内容。

适用场景：

展示正面/背面内容（例如问题/答案）
双状态展示
适合使用翻转动画的内容

3. PulsingTile

Creates a zoom in/out effect, similar to Windows Phone Music and Video tiles.

Use when:

Media content (music, videos, photos)
Drawing attention to content
Creating dynamic visual interest

创建放大/缩小效果，类似Windows Phone的音乐和视频磁贴。

适用场景：

媒体内容（音乐、视频、照片）
吸引用户关注内容
打造动态视觉效果

Documentation and Navigation Guide

文档与导航指南

Installation and Setup

安装与设置

📄 Read: references/getting-started.md

When user needs to set up HubTile for the first time. Covers:

Assembly references (Syncfusion.Tools.Windows.dll, Syncfusion.Shared.Base.dll)
NuGet package installation
Namespace imports (Syncfusion.Windows.Forms.Tools)
Designer and code-based setup
Creating basic tile
Adding images, title, and footer
Framework support (.NET Framework 4.5+, .NET 6.0-8.0)

📄 阅读： references/getting-started.md

适用于用户首次设置HubTile的场景，内容涵盖：

程序集引用（Syncfusion.Tools.Windows.dll、Syncfusion.Shared.Base.dll）
NuGet包安装
命名空间导入（Syncfusion.Windows.Forms.Tools）
设计器和基于代码的设置
创建基础磁贴
添加图片、标题和页脚
框架支持（.NET Framework 4.5+、.NET 6.0-8.0）

DefaultTile (Slide Transitions)

DefaultTile（滑动过渡）

📄 Read: references/default-tile.md

When user needs tiles with slide transition effects. Covers:

DefaultTile configuration
Title, Footer, and ImageSource properties
Transition effects (BottomToTop, TopToBottom, LeftToRight, RightToLeft)
SlideTransition property
ImageTransitionSpeed control
TurnLiveTileOn property
Complete transition examples

📄 阅读： references/default-tile.md

适用于用户需要带滑动过渡效果的磁贴的场景，内容涵盖：

DefaultTile配置
Title、Footer和ImageSource属性
过渡效果（BottomToTop、TopToBottom、LeftToRight、RightToLeft）
SlideTransition属性
ImageTransitionSpeed控制
TurnLiveTileOn属性
完整过渡示例

RotateTile (Flip Animations)

RotateTile（翻转动画）

📄 Read: references/rotate-tile.md

When user needs tiles that rotate/flip. Covers:

RotateTile configuration
Horizontal and vertical rotation
RotationTransition property
TileFlipDirection (Horizontal, Vertical)
RotationTransitionSpeed control
Front/back content setup
Complete rotation examples

📄 阅读： references/rotate-tile.md

适用于用户需要可旋转/翻转的磁贴的场景，内容涵盖：

RotateTile配置
水平和垂直旋转
RotationTransition属性
TileFlipDirection（Horizontal、Vertical）
RotationTransitionSpeed控制
正面/背面内容设置
完整旋转示例

PulsingTile (Zoom Effects)

PulsingTile（缩放效果）

📄 Read: references/pulsing-tile.md

When user needs tiles with zoom animations. Covers:

PulsingTile configuration
Zoom in/out effects
PulseDuration property (interval control)
PulseScale property (zoom level)
Image translation effects
Media tile styling
Complete pulsing examples

📄 阅读： references/pulsing-tile.md

适用于用户需要带缩放动画的磁贴的场景，内容涵盖：

PulsingTile配置
放大/缩小效果
PulseDuration属性（间隔控制）
PulseScale属性（缩放级别）
图片平移效果
媒体磁贴样式设置
完整脉冲效果示例

Appearance and Styling

外观与样式

📄 Read: references/appearance-styling.md

When user wants to customize tile appearance. Covers:

Banner visibility and customization
Banner text, icons, and colors
Selection markers (Windows 8 style)
SelectionMarkerColor property
Hovered border colors
EnableHoverColor property
Expand on hover functionality
Tile press behavior (slide effect)
EnableTileSlideEffect property
Complete styling examples

📄 阅读： references/appearance-styling.md

适用于用户想要自定义磁贴外观的场景，内容涵盖：

横幅可见性与自定义
横幅文字、图标和颜色
选择标记（Windows 8风格）
SelectionMarkerColor属性
悬停边框颜色
EnableHoverColor属性
悬停展开功能
磁贴按下行为（滑动效果）
EnableTileSlideEffect属性
完整样式示例

Freezing and Control

冻结与控制

📄 Read: references/freezing-control.md

When user needs to pause/resume tile animations. Covers:

IsFrozen property
Stopping animations programmatically
Dynamic freeze/unfreeze
Use cases for freezing (loading, user interaction)
State management
Complete control examples

📄 阅读： references/freezing-control.md

适用于用户需要暂停/恢复磁贴动画的场景，内容涵盖：

IsFrozen属性
以编程方式停止动画
动态冻结/解冻
冻结的使用场景（加载、用户交互）
状态管理
完整控制示例

Quick Start Examples

快速入门示例

DefaultTile with Slide Transition

带滑动过渡的DefaultTile

csharp

using Syncfusion.Windows.Forms.Tools;

// Create HubTile
HubTile newsTile = new HubTile();
newsTile.Size = new Size(200, 200);
newsTile.Location = new Point(20, 20);

// Set tile type
newsTile.TileType = HubTileType.DefaultTile;

// Configure content
newsTile.Title.Text = "Breaking News";
newsTile.Title.TextColor = Color.White;
newsTile.Footer.Text = "CNN";
newsTile.Footer.TextColor = Color.White;
newsTile.BackColor = Color.FromArgb(17, 158, 218);

// Set background image
newsTile.ImageSource = Image.FromFile("news.jpg");

// Enable live tile with transition
newsTile.TurnLiveTileOn = true;
newsTile.SlideTransition = TransitionDirection.BottomToTop;
newsTile.ImageTransitionSpeed = 3;

// Add to form
this.Controls.Add(newsTile);

csharp

using Syncfusion.Windows.Forms.Tools;

// Create HubTile
HubTile newsTile = new HubTile();
newsTile.Size = new Size(200, 200);
newsTile.Location = new Point(20, 20);

// Set tile type
newsTile.TileType = HubTileType.DefaultTile;

// Configure content
newsTile.Title.Text = "Breaking News";
newsTile.Title.TextColor = Color.White;
newsTile.Footer.Text = "CNN";
newsTile.Footer.TextColor = Color.White;
newsTile.BackColor = Color.FromArgb(17, 158, 218);

// Set background image
newsTile.ImageSource = Image.FromFile("news.jpg");

// Enable live tile with transition
newsTile.TurnLiveTileOn = true;
newsTile.SlideTransition = TransitionDirection.BottomToTop;
newsTile.ImageTransitionSpeed = 3;

// Add to form
this.Controls.Add(newsTile);

RotateTile with Flip Animation

带翻转动画的RotateTile

csharp

// Create rotating tile
HubTile rotateTile = new HubTile();
rotateTile.Size = new Size(200, 200);
rotateTile.Location = new Point(240, 20);

// Set tile type
rotateTile.TileType = HubTileType.RotateTile;

// Configure content
rotateTile.Title.Text = "Weather";
rotateTile.Title.TextColor = Color.White;
rotateTile.Footer.Text = "72°F Sunny";
rotateTile.Footer.TextColor = Color.White;
rotateTile.BackColor = Color.FromArgb(255, 140, 0);

// Configure rotation
rotateTile.TurnLiveTileOn = true;
rotateTile.RotationTransition = TileFlipDirection.Horizontal;
rotateTile.RotationTransitionSpeed = 2;

// Add image
rotateTile.ImageSource = Image.FromFile("weather.jpg");

this.Controls.Add(rotateTile);

csharp

// Create rotating tile
HubTile rotateTile = new HubTile();
rotateTile.Size = new Size(200, 200);
rotateTile.Location = new Point(240, 20);

// Set tile type
rotateTile.TileType = HubTileType.RotateTile;

// Configure content
rotateTile.Title.Text = "Weather";
rotateTile.Title.TextColor = Color.White;
rotateTile.Footer.Text = "72°F Sunny";
rotateTile.Footer.TextColor = Color.White;
rotateTile.BackColor = Color.FromArgb(255, 140, 0);

// Configure rotation
rotateTile.TurnLiveTileOn = true;
rotateTile.RotationTransition = TileFlipDirection.Horizontal;
rotateTile.RotationTransitionSpeed = 2;

// Add image
rotateTile.ImageSource = Image.FromFile("weather.jpg");

this.Controls.Add(rotateTile);

PulsingTile for Media

适用于媒体的PulsingTile

csharp

// Create pulsing tile
HubTile mediaTile = new HubTile();
mediaTile.Size = new Size(200, 200);
mediaTile.Location = new Point(460, 20);

// Set tile type
mediaTile.TileType = HubTileType.PulsingTile;

// Configure content
mediaTile.Title.Text = "Now Playing";
mediaTile.Title.TextColor = Color.White;
mediaTile.Footer.Text = "Music";
mediaTile.Footer.TextColor = Color.White;
mediaTile.BackColor = Color.FromArgb(139, 0, 139);

// Configure pulsing effect
mediaTile.TurnLiveTileOn = true;
mediaTile.PulseDuration = 2;
mediaTile.PulseScale = 1.5f;

// Add album art
mediaTile.ImageSource = Image.FromFile("album.jpg");

this.Controls.Add(mediaTile);

csharp

// Create pulsing tile
HubTile mediaTile = new HubTile();
mediaTile.Size = new Size(200, 200);
mediaTile.Location = new Point(460, 20);

// Set tile type
mediaTile.TileType = HubTileType.PulsingTile;

// Configure content
mediaTile.Title.Text = "Now Playing";
mediaTile.Title.TextColor = Color.White;
mediaTile.Footer.Text = "Music";
mediaTile.Footer.TextColor = Color.White;
mediaTile.BackColor = Color.FromArgb(139, 0, 139);

// Configure pulsing effect
mediaTile.TurnLiveTileOn = true;
mediaTile.PulseDuration = 2;
mediaTile.PulseScale = 1.5f;

// Add album art
mediaTile.ImageSource = Image.FromFile("album.jpg");

this.Controls.Add(mediaTile);

Tile Type Selection Guide

磁贴类型选择指南

Need	Use This Type	Why
Sequential content updates	DefaultTile	Smooth slide transitions show progression
Directional flow (news feed)	DefaultTile (BottomToTop)	Natural reading flow for updates
Dual-state content	RotateTile	Flip reveals alternate information
Front/back content	RotateTile	Perfect for question/answer, info/details
Media content display	PulsingTile	Matches Windows Phone music/video style
Draw attention	PulsingTile	Zoom effect creates visual interest
Static animated tile	Any type with `IsFrozen = false`	Automatic animations
Interactive tile	DefaultTile + `EnableTileSlideEffect`	Press feedback effect

需求	适用类型	原因
顺序内容更新	DefaultTile	平滑的滑动过渡展示内容变化
定向信息流（新闻 feed）	DefaultTile（BottomToTop）	符合更新内容的自然阅读流
双状态内容	RotateTile	翻转展示备用信息
正面/背面内容	RotateTile	完美适配问题/答案、信息/详情场景
媒体内容展示	PulsingTile	匹配Windows Phone音乐/视频风格
吸引用户注意力	PulsingTile	缩放效果打造视觉吸引力
静态动画磁贴	任意类型 + `IsFrozen = false`	自动播放动画
交互式磁贴	DefaultTile + `EnableTileSlideEffect`	按下反馈效果

Common Patterns

常用模式

Pattern 1: Dashboard with Multiple Tile Types

模式1：包含多种磁贴类型的仪表板

csharp

// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
dashboard.BackColor = Color.FromArgb(30, 30, 30);
dashboard.Padding = new Padding(10);

// News tile (DefaultTile with slide)
HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218));
newsTile.SlideTransition = TransitionDirection.BottomToTop;
dashboard.Controls.Add(newsTile);

// Weather tile (RotateTile with flip)
HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0));
weatherTile.RotationTransition = TileFlipDirection.Horizontal;
dashboard.Controls.Add(weatherTile);

// Media tile (PulsingTile with zoom)
HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139));
mediaTile.PulseScale = 1.3f;
dashboard.Controls.Add(mediaTile);

this.Controls.Add(dashboard);

csharp

// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
dashboard.BackColor = Color.FromArgb(30, 30, 30);
dashboard.Padding = new Padding(10);

// News tile (DefaultTile with slide)
HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218));
newsTile.SlideTransition = TransitionDirection.BottomToTop;
dashboard.Controls.Add(newsTile);

// Weather tile (RotateTile with flip)
HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0));
weatherTile.RotationTransition = TileFlipDirection.Horizontal;
dashboard.Controls.Add(weatherTile);

// Media tile (PulsingTile with zoom)
HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139));
mediaTile.PulseScale = 1.3f;
dashboard.Controls.Add(mediaTile);

this.Controls.Add(dashboard);

Pattern 2: Tile with Banner Notification

模式2：带横幅通知的磁贴

csharp

HubTile notificationTile = new HubTile();
notificationTile.TileType = HubTileType.DefaultTile;
notificationTile.Size = new Size(200, 200);

// Main content
notificationTile.Title.Text = "Messages";
notificationTile.Footer.Text = "Inbox";
notificationTile.BackColor = Color.FromArgb(0, 120, 215);

// Enable banner
notificationTile.ShowBanner = true;
notificationTile.Banner.Text = "5 new messages";
notificationTile.Banner.TextColor = Color.White;
notificationTile.BannerColor = Color.FromArgb(255, 0, 0);

// Optional banner icon
notificationTile.ShowBannerIcon = true;
notificationTile.BannerIcon = Image.FromFile("notification.png");

// Enable transition
notificationTile.TurnLiveTileOn = true;
notificationTile.SlideTransition = TransitionDirection.LeftToRight;

csharp

HubTile notificationTile = new HubTile();
notificationTile.TileType = HubTileType.DefaultTile;
notificationTile.Size = new Size(200, 200);

// Main content
notificationTile.Title.Text = "Messages";
notificationTile.Footer.Text = "Inbox";
notificationTile.BackColor = Color.FromArgb(0, 120, 215);

// Enable banner
notificationTile.ShowBanner = true;
notificationTile.Banner.Text = "5 new messages";
notificationTile.Banner.TextColor = Color.White;
notificationTile.BannerColor = Color.FromArgb(255, 0, 0);

// Optional banner icon
notificationTile.ShowBannerIcon = true;
notificationTile.BannerIcon = Image.FromFile("notification.png");

// Enable transition
notificationTile.TurnLiveTileOn = true;
notificationTile.SlideTransition = TransitionDirection.LeftToRight;

Pattern 3: Interactive Tile with Hover Effects

模式3：带悬停效果的交互式磁贴

csharp

HubTile interactiveTile = new HubTile();
interactiveTile.TileType = HubTileType.DefaultTile;
interactiveTile.Size = new Size(200, 200);

// Content
interactiveTile.Title.Text = "Documents";
interactiveTile.Footer.Text = "Recent Files";
interactiveTile.BackColor = Color.FromArgb(0, 150, 136);

// Enable hover effects
interactiveTile.EnableHoverColor = true;
interactiveTile.HoveredBorderColor = Color.White;
interactiveTile.ExpandOnHover = true;

// Enable press effect
interactiveTile.EnableTileSlideEffect = true;

// Selection marker
interactiveTile.IsSelectionMarked = true;
interactiveTile.SelectionMarkerColor = Color.Yellow;

// Click handler
interactiveTile.Click += (s, e) => {
    MessageBox.Show("Tile clicked!");
};

csharp

HubTile interactiveTile = new HubTile();
interactiveTile.TileType = HubTileType.DefaultTile;
interactiveTile.Size = new Size(200, 200);

// Content
interactiveTile.Title.Text = "Documents";
interactiveTile.Footer.Text = "Recent Files";
interactiveTile.BackColor = Color.FromArgb(0, 150, 136);

// Enable hover effects
interactiveTile.EnableHoverColor = true;
interactiveTile.HoveredBorderColor = Color.White;
interactiveTile.ExpandOnHover = true;

// Enable press effect
interactiveTile.EnableTileSlideEffect = true;

// Selection marker
interactiveTile.IsSelectionMarked = true;
interactiveTile.SelectionMarkerColor = Color.Yellow;

// Click handler
interactiveTile.Click += (s, e) => {
    MessageBox.Show("Tile clicked!");
};

Pattern 4: Freeze/Unfreeze on Interaction

模式4：交互时冻结/解冻

csharp

HubTile controlledTile = new HubTile();
controlledTile.TileType = HubTileType.RotateTile;
controlledTile.TurnLiveTileOn = true;

// Freeze on mouse enter
controlledTile.MouseEnter += (s, e) => {
    controlledTile.IsFrozen = true;
};

// Unfreeze on mouse leave
controlledTile.MouseLeave += (s, e) => {
    controlledTile.IsFrozen = false;
};

csharp

HubTile controlledTile = new HubTile();
controlledTile.TileType = HubTileType.RotateTile;
controlledTile.TurnLiveTileOn = true;

// Freeze on mouse enter
controlledTile.MouseEnter += (s, e) => {
    controlledTile.IsFrozen = true;
};

// Unfreeze on mouse leave
controlledTile.MouseLeave += (s, e) => {
    controlledTile.IsFrozen = false;
};

Key Properties

核心属性

Common Properties (All Tile Types)

通用属性（所有磁贴类型）

Property	Type	Description
`TileType`	HubTileType	DefaultTile, RotateTile, or PulsingTile
`TurnLiveTileOn`	bool	Enable/disable animations
`IsFrozen`	bool	Freeze animations temporarily
`Title.Text`	string	Title text (top of tile)
`Title.TextColor`	Color	Title text color
`Footer.Text`	string	Footer text (bottom of tile)
`Footer.TextColor`	Color	Footer text color
`ImageSource`	Image	Background image
`BackColor`	Color	Tile background color

属性	类型	描述
`TileType`	HubTileType	DefaultTile、RotateTile或PulsingTile
`TurnLiveTileOn`	bool	启用/禁用动画
`IsFrozen`	bool	临时冻结动画
`Title.Text`	string	标题文本（磁贴顶部）
`Title.TextColor`	Color	标题文本颜色
`Footer.Text`	string	页脚文本（磁贴底部）
`Footer.TextColor`	Color	页脚文本颜色
`ImageSource`	Image	背景图片
`BackColor`	Color	磁贴背景色

DefaultTile Properties

DefaultTile属性

Property	Type	Description
`SlideTransition`	TransitionDirection	BottomToTop, TopToBottom, LeftToRight, RightToLeft
`ImageTransitionSpeed`	int	Transition speed (1-10, higher = faster)
`ShowBanner`	bool	Display banner overlay
`Banner.Text`	string	Banner notification text
`BannerColor`	Color	Banner background color
`ShowBannerIcon`	bool	Display icon in banner
`BannerIcon`	Image	Banner icon image
`IsSelectionMarked`	bool	Show selection marker (Windows 8 style)
`SelectionMarkerColor`	Color	Selection marker border color
`EnableHoverColor`	bool	Enable hover border highlight
`HoveredBorderColor`	Color	Border color on hover
`ExpandOnHover`	bool	Expand tile on mouse hover
`EnableTileSlideEffect`	bool	Slide effect on mouse press

属性	类型	描述
`SlideTransition`	TransitionDirection	BottomToTop、TopToBottom、LeftToRight、RightToLeft
`ImageTransitionSpeed`	int	过渡速度（1-10，数值越大速度越快）
`ShowBanner`	bool	展示横幅覆盖层
`Banner.Text`	string	横幅通知文本
`BannerColor`	Color	横幅背景色
`ShowBannerIcon`	bool	在横幅中展示图标
`BannerIcon`	Image	横幅图标图片
`IsSelectionMarked`	bool	展示选择标记（Windows 8风格）
`SelectionMarkerColor`	Color	选择标记边框颜色
`EnableHoverColor`	bool	启用悬停边框高亮
`HoveredBorderColor`	Color	悬停时的边框颜色
`ExpandOnHover`	bool	鼠标悬停时展开磁贴
`EnableTileSlideEffect`	bool	鼠标按下时的滑动效果

RotateTile Properties

RotateTile属性

Property	Type	Description
`RotationTransition`	TileFlipDirection	Horizontal or Vertical rotation
`RotationTransitionSpeed`	int	Rotation speed (1-10, higher = faster)

属性	类型	描述
`RotationTransition`	TileFlipDirection	水平或垂直旋转
`RotationTransitionSpeed`	int	旋转速度（1-10，数值越大速度越快）

PulsingTile Properties

PulsingTile属性

Property	Type	Description
`PulseDuration`	int	Interval between zoom in/out (seconds)
`PulseScale`	float	Zoom level (1.0 = 100%, 2.0 = 200%)

属性	类型	描述
`PulseDuration`	int	缩放间隔时间（秒）
`PulseScale`	float	缩放级别（1.0 = 100%，2.0 = 200%）

Common Use Cases

常见使用场景

1. Application Dashboard

1. 应用仪表板

Scenario: Windows 8-style start screen with multiple app tiles
Solution: FlowLayoutPanel with multiple HubTiles using different tile types and transitions

场景： Windows 8风格的开始屏幕，包含多个应用磁贴
解决方案： FlowLayoutPanel搭配多个使用不同磁贴类型和过渡效果的HubTile

2. Live News Feed

2. 实时新闻信息流

Scenario: News tiles that slide in updates from bottom
Solution: DefaultTile with BottomToTop transition, periodic content updates via timer

场景： 从底部滑入更新内容的新闻磁贴
解决方案： 采用BottomToTop过渡的DefaultTile，通过定时器定期更新内容

3. Media Library

3. 媒体库

Scenario: Music/Video tiles with pulsing animations
Solution: PulsingTile with appropriate PulseScale and album/video art

场景： 带脉冲动画的音乐/视频磁贴
解决方案： 设置合适PulseScale并搭配专辑/视频封面的PulsingTile

4. Status Monitor

4. 状态监控器

Scenario: System status tiles that rotate to show details
Solution: RotateTile with front showing status icon, back showing detailed metrics

场景： 旋转展示详情的系统状态磁贴
解决方案： RotateTile，正面展示状态图标，背面展示详细指标

5. Notification Center

5. 通知中心

Scenario: Tiles with banner notifications for alerts
Solution: DefaultTile with ShowBanner enabled, update Banner.Text dynamically

场景： 带横幅通知提醒的磁贴
解决方案： 启用ShowBanner的DefaultTile，动态更新Banner.Text

6. Interactive Menu

6. 交互式菜单

Scenario: Touch-friendly navigation tiles
Solution: DefaultTile with EnableTileSlideEffect, ExpandOnHover, and click handlers

场景： 适配触摸操作的导航磁贴
解决方案： 启用EnableTileSlideEffect、ExpandOnHover并绑定点击事件的DefaultTile

Best Practices

最佳实践

Choose appropriate tile type - DefaultTile for sequential content, RotateTile for dual-state, PulsingTile for media
Set reasonable transition speeds - Speed 2-4 provides smooth animations without being jarring
Use consistent sizing - Standard Windows 8 tiles are 150x150, 310x150, or 310x310
Apply cohesive color schemes - Use related colors for tiles in same category
Enable live tiles selectively - Don't animate all tiles simultaneously to avoid distraction
Provide clear title/footer - Help users identify tile purpose at a glance
Use banners for urgent notifications - Reserve banner space for important updates
Freeze on interaction - Consider freezing tiles when user hovers to prevent distraction
Test transition directions - Ensure slide direction matches content flow logic
Handle click events - Make tiles interactive with meaningful click actions

选择合适的磁贴类型 - 顺序内容用DefaultTile，双状态内容用RotateTile，媒体内容用PulsingTile
设置合理的过渡速度 - 速度2-4可实现平滑动画，不会过于突兀
使用统一的尺寸 - 标准Windows 8磁贴尺寸为150x150、310x150或310x310
应用统一的配色方案 - 同类磁贴使用相关联的颜色
选择性启用动态磁贴 - 不要同时让所有磁贴播放动画，避免分散用户注意力
提供清晰的标题/页脚 - 帮助用户快速识别磁贴用途
横幅仅用于紧急通知 - 保留横幅空间展示重要更新
交互时冻结动画 - 可考虑在用户悬停时冻结磁贴，避免分散注意力
测试过渡方向 - 确保滑动方向匹配内容流逻辑
处理点击事件 - 为磁贴绑定有意义的点击操作，实现交互性

Tile Styling Guidelines

磁贴样式指南

Windows 8 Color Palette

Windows 8调色板

csharp

// Microsoft-inspired colors
Color TealBlue = Color.FromArgb(0, 120, 215);      // Default blue
Color LimeGreen = Color.FromArgb(16, 137, 62);     // Success/positive
Color OrangeRed = Color.FromArgb(202, 80, 16);     // Warning
Color CrimsonRed = Color.FromArgb(232, 17, 35);    // Error/urgent
Color Purple = Color.FromArgb(107, 105, 214);      // Media/entertainment
Color Teal = Color.FromArgb(0, 153, 188);          // Information

csharp

// Microsoft-inspired colors
Color TealBlue = Color.FromArgb(0, 120, 215);      // Default blue
Color LimeGreen = Color.FromArgb(16, 137, 62);     // Success/positive
Color OrangeRed = Color.FromArgb(202, 80, 16);     // Warning
Color CrimsonRed = Color.FromArgb(232, 17, 35);    // Error/urgent
Color Purple = Color.FromArgb(107, 105, 214);      // Media/entertainment
Color Teal = Color.FromArgb(0, 153, 188);          // Information

Size Recommendations

尺寸建议

csharp

// Small tile (single)
Size smallTile = new Size(150, 150);

// Wide tile (horizontal)
Size wideTile = new Size(310, 150);

// Large tile
Size largeTile = new Size(310, 310);

csharp

// Small tile (single)
Size smallTile = new Size(150, 150);

// Wide tile (horizontal)
Size wideTile = new Size(310, 150);

// Large tile
Size largeTile = new Size(310, 310);