syncfusion-wpf-hub-tile

Implementing WPF Tile Controls

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.

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

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:

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

Hub Tile Features

📄 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

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

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

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

Quick Start

SfHubTile (live tile with transitions)

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

<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

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

Freeze tile on demand

// Freeze single tile
hubTile.IsFrozen = true;

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

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

MVVM: bind tiles from a collection

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.

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