syncfusion-wpf-hub-tile

实现 WPF 磁贴控件

Syncfusion® WPF 磁贴控件（SfHubTile 和 SfPulsingTile）实现指南——这些控件可创建具有动画过渡、内容轮播、分组和冻结支持的 Windows 桌面风格实时磁贴 UI。

何时使用此技能

在需要以下功能时使用此技能：

• 创建类似 Windows 桌面或 Windows Phone 开始屏幕的实时磁贴 UI
• 实现 SfHubTile——通过滑动／淡入淡出过渡，在主要内容和次要内容之间轮播的磁贴
• 实现 SfPulsingTile——持续缩放／平移内容的磁贴（音乐／视频磁贴风格）
• 配置磁贴的页眉、标题和图像显示
• 设置过渡动画和间隔
• 通过编程方式或使用 HubTileService 对磁贴进行分组并冻结／取消冻结动画
• 使用样式、模板和主题自定义外观

组件概览

控件	风格	主要功能
SfHubTile	实时磁贴	通过滑动／淡入淡出过渡，在主要内容和次要内容之间轮播
SfPulsingTile	音乐／视频磁贴	使用 PulseScale、RadiusX、RadiusY 持续缩放和平移内容

两者均继承自 HubTileBase，并共享以下成员：Header、Title、ImageSource、IsFrozen、GroupName、ScaleDepth、TilePressDuration、Click、Command。

必需程序集：

• Syncfusion.SfHubTile.WPF
• Syncfusion.SfShared.WPF

XAML 命名空间：

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

文档与导航指南

入门

📄 阅读： references/getting-started.md

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

Hub 磁贴功能

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

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

脉动磁贴功能

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

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

分组与冻结／取消冻结

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

• 用于磁贴分组的 GroupName 属性
• 使用 ListView 和 ItemTemplate 进行数据绑定分组（MVVM）
• 使用 IsFrozen 属性冻结／取消冻结单个磁贴
• 按实例或组名称调用 HubTileService.Freeze / UnFreeze
• System.Windows.Interactivity 依赖项说明

外观与主题

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

• 自定义 HeaderStyle 和 HeaderTemplate
• 自定义 TitleStyle
• SecondaryContent 和 SecondaryContentTemplate（HubTile）
• 通过 SfSkinManager 应用内置主题
• 使用 ThemeStudio 创建自定义主题

快速开始

SfHubTile（带过渡效果的实时磁贴）

<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（缩放／平移动画）

<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# 代码隐藏

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);

常见模式

选择合适的磁贴类型

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

按需冻结磁贴

// Freeze single tile
hubTile.IsFrozen = true;

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

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

MVVM：从集合绑定磁贴

将 ObservableCollection<Model> 绑定到 ListView，并使用包含 SfHubTile 的 ItemTemplate。每个模型都公开 Header、ImageSource 和 Interval 属性。完整的 MVVM 示例请参阅 references/grouping-and-freeze.md。

关键属性

属性	控件	用途
Header	两者	显示在磁贴底部的标签
Title	两者	显示在磁贴顶部的通知文本
ImageSource	两者	主图像路径
Foreground	两者	文本颜色（深色磁贴请设为 White）
IsFrozen	两者	停止／启动动画
GroupName	两者	对磁贴分组，以便批量冻结／取消冻结
Interval	SfHubTile	转场之间的时间间隔
SecondaryContent	SfHubTile	转场期间显示的内容
HubTileTransitions	SfHubTile	转场效果（Slide、Fade）
PulseScale	SfPulsingTile	缩放幅度
PulseDuration	SfPulsingTile	一个缩放周期的持续时间
RadiusX / RadiusY	SfPulsingTile	X/Y 轴上的平移范围
TranslateDuration	SfPulsingTile	一个平移周期的持续时间
ScaleDepth	两者	按压动画的缩放深度
TilePressDuration	两者	按压动画的持续时间