syncfusion-winforms-hub-tile

# Implementing HubTiles ## When to Use This Skill Use this skill when the user needs to implement Syncfusion **HubTile control** in a Windows Forms application. HubTile provides live tile functionality with animated transitions similar to Windows 8 and Windows Phone. ### Common Use Cases 1. **Dashboard tiles** - Live-updating dashboard panels with animated content 2. **Application launchers** - Windows 8-style start screen tiles 3. **Status displays** - Animated status indicators with transitions 4. **Live notifications** - Content tiles that update with slide/rotate/pulse effects 5. **Media libraries** - Music/Video tiles with pulsing animations 6. **News feeds** - Tiles that transition between content updates 7. **KPI panels** - Key performance indicators with animated updates 8. **Navigation menus** - Interactive tile-based navigation similar to Windows Phone **When NOT to use:** For static buttons or panels without animation needs, use standard Button or Panel controls. For data grids or tables, use DataGridView or Syncfusion GridControl. ## Component Overview Syncfusion **HubTile** is a content control that functions as **live tiles** with automatic animations. Content updates are shown through various transition effects, similar to Windows 8 and Windows Phone live tiles. **Key components:** - Title area (top) - Content/Image area (center) - Footer area (bottom) - Optional Banner overlay ### Tile Types HubTile supports **three animation styles**: #### 1. DefaultTile Provides notifications through **slide transition effects** (Bottom-to-Top, Top-to-Bottom, Left-to-Right, Right-to-Left). **Use when:** - Displaying sequential content updates - News or status feeds - Content that flows in a specific direction #### 2. RotateTile Animates by **rotating the tile** horizontally or vertically, flipping to show alternate content. **Use when:** - Showing front/back content (e.g., question/answer) - Dual-state displays - Content that benefits from flip animation #### 3. PulsingTile Creates a **zoom in/out effect**, similar to Windows Phone Music and Video tiles. **Use when:** - Media content (music, videos, photos) - Drawing attention to content - Creating dynamic visual interest ## Documentation and Navigation Guide ### Installation and Setup 📄 **Read:** [references/getting-started.md](references/getting-started.md) When user needs to set up HubTile for the first time. Covers: - Assembly references (Syncfusion.Tools.Windows.dll, Syncfusion.Shared.Base.dll) - NuGet package installation - Namespace imports (Syncfusion.Windows.Forms.Tools) - Designer and code-based setup - Creating basic tile - Adding images, title, and footer - Framework support (.NET Framework 4.5+, .NET 6.0-8.0) ### DefaultTile (Slide Transitions) 📄 **Read:** [references/default-tile.md](references/default-tile.md) When user needs tiles with slide transition effects. Covers: - DefaultTile configuration - Title, Footer, and ImageSource properties - Transition effects (BottomToTop, TopToBottom, LeftToRight, RightToLeft) - SlideTransition property - ImageTransitionSpeed control - TurnLiveTileOn property - Complete transition examples ### RotateTile (Flip Animations) 📄 **Read:** [references/rotate-tile.md](references/rotate-tile.md) When user needs tiles that rotate/flip. Covers: - RotateTile configuration - Horizontal and vertical rotation - RotationTransition property - TileFlipDirection (Horizontal, Vertical) - RotationTransitionSpeed control - Front/back content setup - Complete rotation examples ### PulsingTile (Zoom Effects) 📄 **Read:** [references/pulsing-tile.md](references/pulsing-tile.md) When user needs tiles with zoom animations. Covers: - PulsingTile configuration - Zoom in/out effects - PulseDuration property (interval control) - PulseScale property (zoom level) - Image translation effects - Media tile styling - Complete pulsing examples ### Appearance and Styling 📄 **Read:** [references/appearance-styling.md](references/appearance-styling.md) When user wants to customize tile appearance. Covers: - Banner visibility and customization - Banner text, icons, and colors - Selection markers (Windows 8 style) - SelectionMarkerColor property - Hovered border colors - EnableHoverColor property - Expand on hover functionality - Tile press behavior (slide effect) - EnableTileSlideEffect property - Complete styling examples ### Freezing and Control 📄 **Read:** [references/freezing-control.md](references/freezing-control.md) When user needs to pause/resume tile animations. Covers: - IsFrozen property - Stopping animations programmatically - Dynamic freeze/unfreeze - Use cases for freezing (loading, user interaction) - State management - Complete control examples ## Quick Start Examples ### DefaultTile with Slide Transition ```csharp using Syncfusion.Windows.Forms.Tools; // Create HubTile HubTile newsTile = new HubTile(); newsTile.Size = new Size(200, 200); newsTile.Location = new Point(20, 20); // Set tile type newsTile.TileType = HubTileType.DefaultTile; // Configure content newsTile.Title.Text = "Breaking News"; newsTile.Title.TextColor = Color.White; newsTile.Footer.Text = "CNN"; newsTile.Footer.TextColor = Color.White; newsTile.BackColor = Color.FromArgb(17, 158, 218); // Set background image newsTile.ImageSource = Image.FromFile("news.jpg"); // Enable live tile with transition newsTile.TurnLiveTileOn = true; newsTile.SlideTransition = TransitionDirection.BottomToTop; newsTile.ImageTransitionSpeed = 3; // Add to form this.Controls.Add(newsTile); ``` ### RotateTile with Flip Animation ```csharp // Create rotating tile HubTile rotateTile = new HubTile(); rotateTile.Size = new Size(200, 200); rotateTile.Location = new Point(240, 20); // Set tile type rotateTile.TileType = HubTileType.RotateTile; // Configure content rotateTile.Title.Text = "Weather"; rotateTile.Title.TextColor = Color.White; rotateTile.Footer.Text = "72°F Sunny"; rotateTile.Footer.TextColor = Color.White; rotateTile.BackColor = Color.FromArgb(255, 140, 0); // Configure rotation rotateTile.TurnLiveTileOn = true; rotateTile.RotationTransition = TileFlipDirection.Horizontal; rotateTile.RotationTransitionSpeed = 2; // Add image rotateTile.ImageSource = Image.FromFile("weather.jpg"); this.Controls.Add(rotateTile); ``` ### PulsingTile for Media ```csharp // Create pulsing tile HubTile mediaTile = new HubTile(); mediaTile.Size = new Size(200, 200); mediaTile.Location = new Point(460, 20); // Set tile type mediaTile.TileType = HubTileType.PulsingTile; // Configure content mediaTile.Title.Text = "Now Playing"; mediaTile.Title.TextColor = Color.White; mediaTile.Footer.Text = "Music"; mediaTile.Footer.TextColor = Color.White; mediaTile.BackColor = Color.FromArgb(139, 0, 139); // Configure pulsing effect mediaTile.TurnLiveTileOn = true; mediaTile.PulseDuration = 2; mediaTile.PulseScale = 1.5f; // Add album art mediaTile.ImageSource = Image.FromFile("album.jpg"); this.Controls.Add(mediaTile); ``` ## Tile Type Selection Guide | Need | Use This Type | Why | |------|--------------|-----| | Sequential content updates | **DefaultTile** | Smooth slide transitions show progression | | Directional flow (news feed) | **DefaultTile** (BottomToTop) | Natural reading flow for updates | | Dual-state content | **RotateTile** | Flip reveals alternate information | | Front/back content | **RotateTile** | Perfect for question/answer, info/details | | Media content display | **PulsingTile** | Matches Windows Phone music/video style | | Draw attention | **PulsingTile** | Zoom effect creates visual interest | | Static animated tile | Any type with `IsFrozen = false` | Automatic animations | | Interactive tile | DefaultTile + `EnableTileSlideEffect` | Press feedback effect | ## Common Patterns ### Pattern 1: Dashboard with Multiple Tile Types ```csharp // Create dashboard layout FlowLayoutPanel dashboard = new FlowLayoutPanel(); dashboard.Dock = DockStyle.Fill; dashboard.BackColor = Color.FromArgb(30, 30, 30); dashboard.Padding = new Padding(10); // News tile (DefaultTile with slide) HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218)); newsTile.SlideTransition = TransitionDirection.BottomToTop; dashboard.Controls.Add(newsTile); // Weather tile (RotateTile with flip) HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0)); weatherTile.RotationTransition = TileFlipDirection.Horizontal; dashboard.Controls.Add(weatherTile); // Media tile (PulsingTile with zoom) HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139)); mediaTile.PulseScale = 1.3f; dashboard.Controls.Add(mediaTile); this.Controls.Add(dashboard); ``` ### Pattern 2: Tile with Banner Notification ```csharp HubTile notificationTile = new HubTile(); notificationTile.TileType = HubTileType.DefaultTile; notificationTile.Size = new Size(200, 200); // Main content notificationTile.Title.Text = "Messages"; notificationTile.Footer.Text = "Inbox"; notificationTile.BackColor = Color.FromArgb(0, 120, 215); // Enable banner notificationTile.ShowBanner = true; notificationTile.Banner.Text = "5 new messages"; notificationTile.Banner.TextColor = Color.White; notificationTile.BannerColor = Color.FromArgb(255, 0, 0); // Optional banner icon notificationTile.ShowBannerIcon = true; notificationTile.BannerIcon = Image.FromFile("notification.png"); // Enable transition notificationTile.TurnLiveTileOn = true; notificationTile.SlideTransition = TransitionDirection.LeftToRight; ``` ### Pattern 3: Interactive Tile with Hover Effects ```csharp HubTile interactiveTile = new HubTile(); interactiveTile.TileType = HubTileType.DefaultTile; interactiveTile.Size = new Size(200, 200); // Content interactiveTile.Title.Text = "Documents"; interactiveTile.Footer.Text = "Recent Files"; interactiveTile.BackColor = Color.FromArgb(0, 150, 136); // Enable hover effects interactiveTile.EnableHoverColor = true; interactiveTile.HoveredBorderColor = Color.White; interactiveTile.ExpandOnHover = true; // Enable press effect interactiveTile.EnableTileSlideEffect = true; // Selection marker interactiveTile.IsSelectionMarked = true; interactiveTile.SelectionMarkerColor = Color.Yellow; // Click handler interactiveTile.Click += (s, e) => { MessageBox.Show("Tile clicked!"); }; ``` ### Pattern 4: Freeze/Unfreeze on Interaction ```csharp HubTile controlledTile = new HubTile(); controlledTile.TileType = HubTileType.RotateTile; controlledTile.TurnLiveTileOn = true; // Freeze on mouse enter controlledTile.MouseEnter += (s, e) => { controlledTile.IsFrozen = true; }; // Unfreeze on mouse leave controlledTile.MouseLeave += (s, e) => { controlledTile.IsFrozen = false; }; ``` ## Key Properties ### Common Properties (All Tile Types) | Property | Type | Description | |----------|------|-------------| | `TileType` | HubTileType | DefaultTile, RotateTile, or PulsingTile | | `TurnLiveTileOn` | bool | Enable/disable animations | | `IsFrozen` | bool | Freeze animations temporarily | | `Title.Text` | string | Title text (top of tile) | | `Title.TextColor` | Color | Title text color | | `Footer.Text` | string | Footer text (bottom of tile) | | `Footer.TextColor` | Color | Footer text color | | `ImageSource` | Image | Background image | | `BackColor` | Color | Tile background color | ### DefaultTile Properties | Property | Type | Description | |----------|------|-------------| | `SlideTransition` | TransitionDirection | BottomToTop, TopToBottom, LeftToRight, RightToLeft | | `ImageTransitionSpeed` | int | Transition speed (1-10, higher = faster) | | `ShowBanner` | bool | Display banner overlay | | `Banner.Text` | string | Banner notification text | | `BannerColor` | Color | Banner background color | | `ShowBannerIcon` | bool | Display icon in banner | | `BannerIcon` | Image | Banner icon image | | `IsSelectionMarked` | bool | Show selection marker (Windows 8 style) | | `SelectionMarkerColor` | Color | Selection marker border color | | `EnableHoverColor` | bool | Enable hover border highlight | | `HoveredBorderColor` | Color | Border color on hover | | `ExpandOnHover` | bool | Expand tile on mouse hover | | `EnableTileSlideEffect` | bool | Slide effect on mouse press | ### RotateTile Properties | Property | Type | Description | |----------|------|-------------| | `RotationTransition` | TileFlipDirection | Horizontal or Vertical rotation | | `RotationTransitionSpeed` | int | Rotation speed (1-10, higher = faster) | ### PulsingTile Properties | Property | Type | Description | |----------|------|-------------| | `PulseDuration` | int | Interval between zoom in/out (seconds) | | `PulseScale` | float | Zoom level (1.0 = 100%, 2.0 = 200%) | ## Common Use Cases ### 1. Application Dashboard **Scenario:** Windows 8-style start screen with multiple app tiles **Solution:** FlowLayoutPanel with multiple HubTiles using different tile types and transitions ### 2. Live News Feed **Scenario:** News tiles that slide in updates from bottom **Solution:** DefaultTile with BottomToTop transition, periodic content updates via timer ### 3. Media Library **Scenario:** Music/Video tiles with pulsing animations **Solution:** PulsingTile with appropriate PulseScale and album/video art ### 4. Status Monitor **Scenario:** System status tiles that rotate to show details