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:

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

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)

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)

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

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

Freeze tile on demand

csharp

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

syncfusion-wpf-hub-tile

NPX Install

Tags

SKILL.md Content