syncfusion-wpf-hub-tile

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF Tile Controls

实现WPF磁贴控件

Guide for implementing Syncfusion® WPF Tile Controls — SfHubTile and SfPulsingTile — which create Windows Desktop-style live tile UIs with animated transitions, content cycling, grouping, and freeze support.

本文是实现Syncfusion® WPF磁贴控件——SfHubTile和SfPulsingTile——的指南，这些控件可创建带有动画过渡、内容轮播、分组和冻结功能的Windows桌面风格动态磁贴UI。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create live tile UIs similar to Windows Desktop or Windows Phone start screens
Implement SfHubTile — tiles that cycle between primary and secondary content with Slide/Fade transitions
Implement SfPulsingTile — tiles that zoom/pan content continuously (music/video tile style)
Configure tile header, title, and image display
Set up transition animations and intervals
Group tiles and freeze/unfreeze animations programmatically or via
```
HubTileService
```
Customize appearance with styles, templates, and themes

在以下场景中可使用本技能：

创建类似Windows桌面或Windows Phone开始屏幕的动态磁贴UI
实现SfHubTile——通过滑动/淡入淡出过渡在主内容和次要内容之间切换的磁贴
实现SfPulsingTile——持续缩放/平移内容的磁贴（音乐/视频磁贴风格）
配置磁贴的标题、副标题和图片显示
设置过渡动画和间隔
通过编程或
```
HubTileService
```
实现磁贴分组以及冻结/解冻动画
通过样式、模板和主题自定义外观

Component Overview

组件概述

Control	Style	Key Capability
`SfHubTile`	Live tile	Cycles between primary + secondary content via Slide/Fade transitions
`SfPulsingTile`	Music/video tile	Continuously zooms and pans its content using `PulseScale` , `RadiusX` , `RadiusY`

Both inherit from

HubTileBase

and share:

Header

Title

ImageSource

IsFrozen

GroupName

ScaleDepth

TilePressDuration

Click

Command

Required assemblies:

```
Syncfusion.SfHubTile.WPF
```
```
Syncfusion.SfShared.WPF
```

XAML namespace:

xml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf"

控件	风格	核心能力
`SfHubTile`	动态磁贴	通过滑动/淡入淡出过渡在主内容+次要内容之间切换
`SfPulsingTile`	音乐/视频磁贴	使用 `PulseScale` 、 `RadiusX` 、 `RadiusY` 持续缩放和平移内容

两者均继承自

HubTileBase

，并共享以下属性/事件：

Header

、

Title

、

ImageSource

、

IsFrozen

、

GroupName

、

ScaleDepth

、

TilePressDuration

、

Click

、

Command

。

所需程序集：

```
Syncfusion.SfHubTile.WPF
```
```
Syncfusion.SfShared.WPF
```

XAML命名空间：

xml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf"

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Assembly references and NuGet setup
Adding tiles via Designer, XAML, and C#
Setting Header, Title, and ImageSource
Basic click events and MVVM command binding
Applying built-in themes

📄 阅读： references/getting-started.md

程序集引用和NuGet设置
通过设计器、XAML和C#添加磁贴
设置Header、Title和ImageSource
基础点击事件和MVVM命令绑定
应用内置主题

Hub Tile Features

Hub磁贴功能

📄 Read: references/hub-tile-features.md

Secondary content (image, text, or control)
Slide and Fade transitions with
```
HubTileTransitions
```
Transition interval and
```
HubTileTransitionCompleted
```
event
Press animation (
```
ScaleDepth
```
,
```
TilePressDuration
```
)
MVVM command binding

📄 阅读： references/hub-tile-features.md

次要内容（图片、文本或控件）
使用
```
HubTileTransitions
```
实现滑动和淡入淡出过渡
过渡间隔和
```
HubTileTransitionCompleted
```
事件
按压动画（
```
ScaleDepth
```
、
```
TilePressDuration
```
）
MVVM命令绑定

Pulsing Tile Features

脉冲磁贴功能

📄 Read: references/pulsing-tile-features.md

Scaling animation (
```
PulseScale
```
,
```
PulseDuration
```
)
Horizontal/vertical translation (
```
RadiusX
```
,
```
RadiusY
```
,
```
TranslateDuration
```
)
Press animation (
```
ScaleDepth
```
,
```
TilePressDuration
```
)
```
OverrideDefaultStates
```
note
MVVM command binding

📄 阅读： references/pulsing-tile-features.md

缩放动画（
```
PulseScale
```
、
```
PulseDuration
```
）
水平/垂直平移（
```
RadiusX
```
、
```
RadiusY
```
、
```
TranslateDuration
```
）
按压动画（
```
ScaleDepth
```
、
```
TilePressDuration
```
）
```
OverrideDefaultStates
```
注意事项
MVVM命令绑定

Grouping & Freeze/Unfreeze

分组与冻结/解冻

📄 Read: references/grouping-and-freeze.md

```
GroupName
```
property for tile grouping
Data binding grouping with ListView + ItemTemplate (MVVM)
```
IsFrozen
```
property to freeze/unfreeze a single tile
```
HubTileService.Freeze
```
/
```
UnFreeze
```
by instance or group name
```
System.Windows.Interactivity
```
dependency notes

📄 阅读： references/grouping-and-freeze.md

用于磁贴分组的
```
GroupName
```
属性
使用ListView + ItemTemplate实现数据绑定分组（MVVM）
用于冻结/解冻单个磁贴的
```
IsFrozen
```
属性
通过实例或组名调用
```
HubTileService.Freeze
```
/
```
UnFreeze
```
```
System.Windows.Interactivity
```
依赖说明

Appearance & Themes

外观与主题

📄 Read: references/appearance-and-themes.md

```
HeaderStyle
```
and
```
HeaderTemplate
```
customization
```
TitleStyle
```
customization

SecondaryContent

and

SecondaryContentTemplate

(HubTile)

Applying built-in themes via
```
SfSkinManager
```
Creating custom themes with ThemeStudio

📄 阅读： references/appearance-and-themes.md

```
HeaderStyle
```
和
```
HeaderTemplate
```
自定义
```
TitleStyle
```
自定义

SecondaryContent

和

SecondaryContentTemplate

（Hub磁贴）

通过
```
SfSkinManager
```
应用内置主题
使用ThemeStudio创建自定义主题

Quick Start

快速开始

SfHubTile (live tile with transitions)

SfHubTile（带过渡效果的动态磁贴）

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf">
  <Grid>
    <syncfusion:SfHubTile Header="Mail"
                          Title="You have 5 new messages"
                          ImageSource="/Assets/mail.png"
                          Foreground="White"
                          Interval="00:00:03">
      <syncfusion:SfHubTile.HubTileTransitions>
        <shared:SlideTransition/>
      </syncfusion:SfHubTile.HubTileTransitions>
      <syncfusion:SfHubTile.SecondaryContent>
        <Image Source="/Assets/mail-preview.png" Stretch="UniformToFill" Margin="-1"/>
      </syncfusion:SfHubTile.SecondaryContent>
    </syncfusion:SfHubTile>
  </Grid>
</Window>

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:shared="clr-namespace:Syncfusion.Windows.Controls;assembly=Syncfusion.SfShared.Wpf">
  <Grid>
    <syncfusion:SfHubTile Header="Mail"
                          Title="You have 5 new messages"
                          ImageSource="/Assets/mail.png"
                          Foreground="White"
                          Interval="00:00:03">
      <syncfusion:SfHubTile.HubTileTransitions>
        <shared:SlideTransition/>
      </syncfusion:SfHubTile.HubTileTransitions>
      <syncfusion:SfHubTile.SecondaryContent>
        <Image Source="/Assets/mail-preview.png" Stretch="UniformToFill" Margin="-1"/>
      </syncfusion:SfHubTile.SecondaryContent>
    </syncfusion:SfHubTile>
  </Grid>
</Window>

SfPulsingTile (zoom/pan animation)

SfPulsingTile（缩放/平移动画）

xml

<syncfusion:SfPulsingTile Header="Music"
                           Title="Now Playing - Song Name"
                           ImageSource="/Assets/album.jpg"
                           Foreground="White"
                           PulseScale="2"
                           PulseDuration="00:00:03"
                           RadiusX="50"
                           RadiusY="50">
  <Image Source="/Assets/album.jpg" Stretch="UniformToFill"/>
</syncfusion:SfPulsingTile>

xml

<syncfusion:SfPulsingTile Header="Music"
                           Title="Now Playing - Song Name"
                           ImageSource="/Assets/album.jpg"
                           Foreground="White"
                           PulseScale="2"
                           PulseDuration="00:00:03"
                           RadiusX="50"
                           RadiusY="50">
  <Image Source="/Assets/album.jpg" Stretch="UniformToFill"/>
</syncfusion:SfPulsingTile>

C# code-behind

C#后台代码

csharp

using Syncfusion.Windows.Controls.Notification;

SfHubTile hubTile = new SfHubTile();
hubTile.Header = "Mail";
hubTile.Title = "You have 5 new messages";
hubTile.Foreground = Brushes.White;
hubTile.ImageSource = new BitmapImage(new Uri(@"/Assets/mail.png", UriKind.RelativeOrAbsolute));
hubTile.HubTileTransitions.Add(new SlideTransition());
hubTile.Interval = TimeSpan.FromSeconds(3.0);
grid.Children.Add(hubTile);

csharp

using Syncfusion.Windows.Controls.Notification;

SfHubTile hubTile = new SfHubTile();
hubTile.Header = "Mail";
hubTile.Title = "You have 5 new messages";
hubTile.Foreground = Brushes.White;
hubTile.ImageSource = new BitmapImage(new Uri(@"/Assets/mail.png", UriKind.RelativeOrAbsolute));
hubTile.HubTileTransitions.Add(new SlideTransition());
hubTile.Interval = TimeSpan.FromSeconds(3.0);
grid.Children.Add(hubTile);

Common Patterns

常见模式

Choose the right tile type

选择合适的磁贴类型

User wants live tile that cycles content → use
```
SfHubTile
```
with
```
SecondaryContent
```
+ transitions
User wants continuously animated background (music/video style) → use
```
SfPulsingTile
```
with
```
PulseScale
```
+
```
RadiusX
```
/
```
RadiusY
```
User wants both → each is independent; can mix in same layout

用户需要可轮播内容的动态磁贴 → 使用带有
```
SecondaryContent
```
和过渡效果的
```
SfHubTile
```
用户需要持续动画背景（音乐/视频风格）→ 使用带有
```
PulseScale
```
和
```
RadiusX
```
/
```
RadiusY
```
的
```
SfPulsingTile
```
用户同时需要两者 → 两者相互独立，可在同一布局中混合使用

Freeze tile on demand

按需冻结磁贴

csharp

// Freeze single tile
hubTile.IsFrozen = true;

// Freeze entire group
HubTileService.Freeze("GroupName");

// Unfreeze entire group
HubTileService.UnFreeze("GroupName");

csharp

// 冻结单个磁贴
hubTile.IsFrozen = true;

// 冻结整个分组
HubTileService.Freeze("GroupName");

// 解冻整个分组
HubTileService.UnFreeze("GroupName");

MVVM: bind tiles from a collection

MVVM：从集合绑定磁贴

Bind an

ObservableCollection<Model>

to a

ListView

and use

ItemTemplate

with

SfHubTile

. Each model exposes

Header

ImageSource

, and

Interval

properties. See

references/grouping-and-freeze.md

for the full MVVM example.

将

ObservableCollection<Model>

绑定到

ListView

，并在

ItemTemplate

中使用

SfHubTile

。每个模型需暴露

Header

、

ImageSource

和

Interval

属性。完整MVVM示例请查看

references/grouping-and-freeze.md

。

Key Properties

核心属性

Property	Control	Purpose
`Header`	Both	Label displayed at tile bottom
`Title`	Both	Notification text at tile top
`ImageSource`	Both	Primary image path
`Foreground`	Both	Text color (set to White for dark tiles)
`IsFrozen`	Both	Stop/start animation
`GroupName`	Both	Group tiles for bulk freeze/unfreeze
`Interval`	SfHubTile	Time between transitions
`SecondaryContent`	SfHubTile	Content shown during transition
`HubTileTransitions`	SfHubTile	Transition effects (Slide, Fade)
`PulseScale`	SfPulsingTile	Zoom magnitude
`PulseDuration`	SfPulsingTile	Duration of one zoom cycle
`RadiusX` / `RadiusY`	SfPulsingTile	Translation range on X/Y axes
`TranslateDuration`	SfPulsingTile	Duration of one translation cycle
`ScaleDepth`	Both	Press animation zoom depth
`TilePressDuration`	Both	Press animation duration

属性	控件	用途
`Header`	两者	磁贴底部显示的标签
`Title`	两者	磁贴顶部显示的通知文本
`ImageSource`	两者	主图片路径
`Foreground`	两者	文本颜色（深色磁贴建议设为白色）
`IsFrozen`	两者	停止/启动动画
`GroupName`	两者	对磁贴进行分组，以便批量冻结/解冻
`Interval`	SfHubTile	过渡效果的时间间隔
`SecondaryContent`	SfHubTile	过渡时显示的内容
`HubTileTransitions`	SfHubTile	过渡效果（滑动、淡入淡出）
`PulseScale`	SfPulsingTile	缩放幅度
`PulseDuration`	SfPulsingTile	单次缩放周期的时长
`RadiusX` / `RadiusY`	SfPulsingTile	X/Y轴上的平移范围
`TranslateDuration`	SfPulsingTile	单次平移周期的时长
`ScaleDepth`	两者	按压动画的缩放深度
`TilePressDuration`	两者	按压动画的时长