Syncfusion Winforms Tile Layout

Implementing TileLayout in Syncfusion WinForms

This skill guides you in implementing Syncfusion WinForms TileLayout control—a Windows 8 Start screen-inspired container that holds tile items organized in groups, supports drag-and-drop reordering, live tiles with rotating content, and flexible layout customization.

When to Use This Skill

Use this skill when the user needs to:

• Create Windows 8 Metro-style tile interfaces with grouped tiles
• Implement dashboard layouts with draggable, rearrangeable tiles
• Build live tile displays with rotating images or text using ImageStreamer
• Design grouped tile containers organized by logical categories (LayoutGroups)
• Add drag-and-drop tile reordering at runtime within or between groups
• Create customizable tile layouts with margins, alignment, and positioning
• Implement modern, touch-friendly interfaces with tile-based navigation
• Build application launchers or start screens with tile-based menus
• Display photo galleries or media collections in tile format
• Create status dashboards with multiple information tiles

TileLayout is ideal for modern applications requiring flexible, visual, tile-based interfaces similar to Windows 8/10 Start screens.

Component Overview

TileLayout is a container control that manages a collection of tiles organized into LayoutGroups. Each LayoutGroup contains ImageStreamer items that act as individual tiles. The control provides:

• LayoutGroups: Logical grouping of tiles with optional titles
• ImageStreamer Items: Live tiles that can display rotating images/text
• Drag-and-Drop: Runtime reordering of tiles within/between groups
• Layout Customization: Margins, alignment, row direction control
• Appearance Options: Themes, flat parent form, group title display
• Matrix Positioning: Automatic tile arrangement in responsive grid

Key Hierarchy:

TileLayout (Container)
└── LayoutGroup(s) (Groups)
    └── ImageStreamer(s) (Individual Tiles)

Documentation and Navigation Guide

Getting Started and Basic Setup

📄 Read: references/getting-started.md

Read this reference when users need:

• Assembly dependencies and NuGet packages required
• Creating TileLayout via designer or code
• Adding LayoutGroups to organize tiles
• Adding ImageStreamer items to groups
• Basic configuration for first implementation
• Complete minimal working example
• Understanding the TileLayout hierarchy

Layout Customization

📄 Read: references/layout-customization.md

Read this reference when users need:

• Alignment property (Near, Far, Center)
• Horizontal margins (HorzNearMargin, HorzFarMargin)
• Vertical margins (TopMargin, BottomMargin)
• ReverseRows to change layout direction
• MainLayout property configuration
• Custom positioning and spacing
• Responsive layout behavior

Appearance and Styling

📄 Read: references/appearance-styling.md

Read this reference when users need:

• SetParentFormFlat for flat form appearance
• ShowGroupTitle to display group names
• IgnoreThemeBackground for custom BackColor
• Theme integration and styling
• Visual customization options
• Professional appearance configuration

ImageStreamer Live Tiles

📄 Read: references/image-streamer-tiles.md

Read this reference when users need:

• Adding images to ImageStreamer tiles
• SlideShow and SliderSpeed for animation
• ShowNavigator for navigation controls
• ImageStreamDirection (5 directions: LeftToRight, RightToLeft, TopToBottom, BottomToTop, HorizontalFlip)
• ImageStreamerType (Normal vs DoubleHorizontal)
• InternalBackColor for tile background
• Creating live, rotating tiles with images/text
• Configuring tile animations and transitions

Drag and Drop

📄 Read: references/drag-and-drop.md

Read this reference when users need:

• Drag-and-drop within LayoutGroups
• Drag-and-drop between different groups
• Runtime tile reordering by users
• User interaction patterns
• Restrictions and best practices

Quick Start Example

Here's a minimal example creating a TileLayout with two groups and live tiles:

using Syncfusion.Windows.Forms.Tools;
using System;
using System.Drawing;
using System.Windows.Forms;

public class TileLayoutExample : Form
{
    private TileLayout tileLayout1;
    private LayoutGroup layoutGroup1;
    private LayoutGroup layoutGroup2;
    private ImageStreamer imageStreamer1;
    private ImageStreamer imageStreamer2;
    
    public TileLayoutExample()
    {
        // Create TileLayout
        tileLayout1 = new TileLayout();
        tileLayout1.Dock = DockStyle.Fill;
        tileLayout1.ShowGroupTitle = true;
        
        // Create first LayoutGroup
        layoutGroup1 = new LayoutGroup();
        layoutGroup1.Text = "Photos";
        layoutGroup1.BackColor = ColorTranslator.FromHtml("#8C6FF5");
        
        // Create second LayoutGroup
        layoutGroup2 = new LayoutGroup();
        layoutGroup2.Text = "Documents";
        layoutGroup1.BackColor = ColorTranslator.FromHtml("#8C6FF5");
        
        // Create ImageStreamer tiles with images
        imageStreamer1 = new ImageStreamer();
        imageStreamer1.SlideShow = true;
        imageStreamer1.SliderSpeed = 100;
        imageStreamer1.Images.Add(Image.FromFile("image1.jpg"));
        imageStreamer1.Images.Add(Image.FromFile("image2.jpg"));
        
        imageStreamer2 = new ImageStreamer();
        imageStreamer2.InternalBackColor = Color.LightBlue;
        imageStreamer2.Images.Add(Image.FromFile("doc1.png"));
        
        // Add ImageStreamers to LayoutGroups
        layoutGroup1.Controls.Add(imageStreamer1);
        layoutGroup2.Controls.Add(imageStreamer2);
        
        // Add LayoutGroups to TileLayout
        tileLayout1.Controls.Add(layoutGroup1);
        tileLayout1.Controls.Add(layoutGroup2);
        
        // Add TileLayout to form
        this.Controls.Add(tileLayout1);
        this.Size = new Size(800, 600);
        this.Text = "TileLayout Example";
    }
}

Result: A tile layout with two groups ("Photos" and "Documents"), each containing live tiles with rotating images.

Common Patterns

Dashboard with Multiple Tile Groups

Pattern: Create a dashboard with multiple grouped sections for different content types.

// Create main TileLayout
var tileLayout = new TileLayout();
tileLayout.Dock = DockStyle.Fill;
tileLayout.ShowGroupTitle = true;
tileLayout.MainLayout.TopMargin = 20;
tileLayout.MainLayout.HorzNearMargin = 20;

// Create groups for different categories
var socialGroup = new LayoutGroup { Text = "Social" };
var newsGroup = new LayoutGroup { Text = "News" };
var mediaGroup = new LayoutGroup { Text = "Media" };

// Add multiple tiles to each group
for (int i = 0; i < 4; i++)
{
    var tile = new ImageStreamer();
    tile.Images.Add(GetImage($"social{i}.png"));
    tile.SlideShow = true;
    socialGroup.Controls.Add(tile);
}

tileLayout.Controls.Add(socialGroup);
tileLayout.Controls.Add(newsGroup);
tileLayout.Controls.Add(mediaGroup);

When: User needs organized dashboard with multiple categories of tiles.

Live Tiles with Custom Animation

Pattern: Configure ImageStreamer tiles with rotating content and custom animation direction.

// Create live tile with multiple images
var liveTile = new ImageStreamer();
liveTile.SlideShow = true;
liveTile.SliderSpeed = 150; // Slower animation
liveTile.ShowNavigator = true; // Show navigation arrows
liveTile.ImageStreamDirection = ImageStreamer.StreamDirection.BottomToTop;

// Add multiple images for rotation
liveTile.Images.Add(Image.FromFile("slide1.png"));
liveTile.Images.Add(Image.FromFile("slide2.png"));
liveTile.Images.Add(Image.FromFile("slide3.png"));
liveTile.InternalBackColor = Color.FromArgb(0, 120, 215); // Modern blue

layoutGroup.Controls.Add(liveTile);

When: User needs tiles with automatically rotating content (news feeds, photo galleries, status displays).

Customized Layout Positioning

Pattern: Control tile layout with custom margins and alignment.

// Configure MainLayout for custom positioning
tileLayout.MainLayout.Alignment = FlowAlignment.Center;
tileLayout.MainLayout.HorzNearMargin = 50;  // Left margin
tileLayout.MainLayout.HorzFarMargin = 50;   // Right margin
tileLayout.MainLayout.TopMargin = 30;       // Top margin
tileLayout.MainLayout.BottomMargin = 30;    // Bottom margin
tileLayout.MainLayout.ReverseRows = false;  // Standard flow

When: User needs centered layouts, custom spacing, or specific positioning.

Key Properties

TileLayout Properties

LayoutGroup Properties

ImageStreamer (Tile) Properties

Common Use Cases

Application Launcher

Create a Windows 8-style start screen with app tiles:

• Group apps by category (Productivity, Media, Games)
• Each tile shows app icon
• Click tile to launch application
• Drag-and-drop to reorder favorites

Photo Gallery Dashboard

Display photo collections in tile format:

• Group photos by album/date
• ImageStreamers show rotating photos
• SlideShow for automatic cycling
• Click to view full-size image

Status Monitoring Dashboard

Real-time status display with live tiles:

• Group by system/service type
• Tiles show current status/metrics
• Auto-update with new data
• Color-coded tiles for status (green/yellow/red)

News/Social Feed Aggregator

Display multiple content feeds:

• Group by feed source (News, Twitter, RSS)
• Tiles rotate through recent items
• Click tile to open full article
• Automatic refresh at intervals

Implementation Checklist

When implementing TileLayout, ensure:

• ✅ Required assemblies referenced (Syncfusion.Tools.Windows.dll, etc.)
• ✅ TileLayout created and added to form (typically docked)
• ✅ LayoutGroups added to organize tiles by category
• ✅ ImageStreamer items added to LayoutGroups as tiles
• ✅ Images loaded into ImageStreamer.Images collection
• ✅ SlideShow/SliderSpeed configured for live tiles
• ✅ Layout margins/alignment customized if needed
• ✅ Group titles shown/hidden appropriately
• ✅ Drag-and-drop enabled (default behavior)
• ✅ Event handlers added for tile clicks if needed

Troubleshooting Quick Reference

Issue: Tiles not appearing

• Ensure ImageStreamer.Images collection has at least one image
• Check LayoutGroup.Controls contains ImageStreamer instances
• Verify TileLayout.Controls contains LayoutGroups

Issue: SlideShow not animating

• Set ImageStreamer.SlideShow = true
• Ensure multiple images in Images collection
• Check SliderSpeed is reasonable value (50-200 ms)

Issue: Drag-and-drop not working

• Drag-and-drop is enabled by default
• Ensure not handling conflicting mouse events
• Check tiles are ImageStreamer controls, not other types

Issue: Layout not centered/aligned properly

• Use MainLayout.Alignment property
• Adjust HorzNearMargin/HorzFarMargin for horizontal positioning
• Set TopMargin/BottomMargin for vertical spacing

Issue: Theme background overriding custom colors

• Set IgnoreThemeBackground = true
• Then apply custom BackColor to TileLayout/LayoutGroups