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

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=

SfPulsingTile (zoom/pan animation)

C# code-behind

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

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