syncfusion-winforms-tile-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing TileLayout in Syncfusion WinForms

在Syncfusion WinForms中实现TileLayout

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.

本指南将指导你实现Syncfusion WinForms TileLayout控件——这是一款灵感来自Windows 8开始屏幕的容器，可容纳按分组组织的磁贴项，支持拖拽重排、带轮播内容的动态磁贴以及灵活的布局自定义功能。

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.

当用户需要实现以下需求时可使用本指南：

创建带分组磁贴的Windows 8 Metro风格磁贴界面
实现带可拖拽、可重排磁贴的仪表板布局
使用ImageStreamer构建带轮播图片或文本的动态磁贴展示
设计按逻辑类别（LayoutGroups）组织的分组磁贴容器
支持运行时在组内或组间拖拽重排磁贴
创建可自定义边距、对齐方式和位置的自定义磁贴布局
实现基于磁贴导航的现代化触控友好界面
构建带磁贴式菜单的应用启动器或开始屏幕
以磁贴格式展示相册或媒体集合
创建带多个信息磁贴的状态仪表盘

TileLayout非常适合需要灵活、可视化、基于磁贴的界面的现代化应用，类似Windows 8/10的开始屏幕。

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)

TileLayout是一个容器控件，用于管理组织在LayoutGroups中的磁贴集合。每个LayoutGroup包含作为单个磁贴的ImageStreamer项。该控件提供以下能力：

LayoutGroups：磁贴的逻辑分组，可配置可选标题
ImageStreamer项：可展示轮播图片/文本的动态磁贴
拖拽功能：运行时在组内/组间重排磁贴
布局自定义：边距、对齐方式、行方向控制
外观选项：主题、扁平父窗体、组标题展示
矩阵定位：在响应式网格中自动排列磁贴

核心层级结构：

TileLayout (容器)
└── LayoutGroup(s) (分组)
    └── ImageStreamer(s) (单个磁贴)

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

📄 阅读： references/getting-started.md

当用户需要以下内容时阅读该参考文档：

所需的程序集依赖和NuGet包
通过设计器或代码创建TileLayout
添加LayoutGroups来组织磁贴
向分组中添加ImageStreamer项
首次实现的基础配置
完整的最小可运行示例
理解TileLayout的层级结构

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

📄 阅读： references/layout-customization.md

当用户需要以下内容时阅读该参考文档：

对齐属性（Near、Far、Center）
水平边距（HorzNearMargin、HorzFarMargin）
垂直边距（TopMargin、BottomMargin）
用ReverseRows修改布局方向
MainLayout属性配置
自定义位置和间距
响应式布局行为

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

📄 阅读： references/appearance-styling.md

当用户需要以下内容时阅读该参考文档：

用SetParentFormFlat实现扁平窗体外观
用ShowGroupTitle展示分组名称
用IgnoreThemeBackground实现自定义背景色
主题集成与样式设置
视觉自定义选项
专业外观配置

ImageStreamer Live Tiles

ImageStreamer动态磁贴

📄 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

📄 阅读： references/image-streamer-tiles.md

当用户需要以下内容时阅读该参考文档：

向ImageStreamer磁贴添加图片
配置SlideShow和SliderSpeed实现动画效果
用ShowNavigator展示导航控件
ImageStreamDirection（5种方向：LeftToRight、RightToLeft、TopToBottom、BottomToTop、HorizontalFlip）
ImageStreamerType（普通 vs 双横版）
用InternalBackColor设置磁贴背景
创建带图片/文本的动态轮播磁贴
配置磁贴动画和转场效果

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

📄 阅读： references/drag-and-drop.md

当用户需要以下内容时阅读该参考文档：

LayoutGroups内的拖拽功能
不同分组间的拖拽功能
运行时用户重排磁贴
用户交互模式
限制条件和最佳实践

Quick Start Example

快速入门示例

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

csharp

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("#fa8c6f5");
        
        // Create second LayoutGroup
        layoutGroup2 = new LayoutGroup();
        layoutGroup2.Text = "Documents";
        layoutGroup2.BackColor = ColorTranslator.FromHtml("#fa8c6f5");
        
        // 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.

以下是一个创建包含两个分组和动态磁贴的TileLayout的最小示例：

csharp

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("#fa8c6f5");
        
        // Create second LayoutGroup
        layoutGroup2 = new LayoutGroup();
        layoutGroup2.Text = "Documents";
        layoutGroup2.BackColor = ColorTranslator.FromHtml("#fa8c6f5");
        
        // 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";
    }
}

效果： 包含两个分组（"Photos"和"Documents"）的磁贴布局，每个分组中都有带轮播图片的动态磁贴。

Common Patterns

常见模式

Dashboard with Multiple Tile Groups

带多磁贴分组的仪表板

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

csharp

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

模式： 创建带多个分组区块的仪表板，用于展示不同类型的内容。

csharp

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

适用场景： 用户需要带多类磁贴的结构化仪表板。

Live Tiles with Custom Animation

带自定义动画的动态磁贴

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

csharp

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

模式： 配置ImageStreamer磁贴实现轮播内容和自定义动画方向。

csharp

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

适用场景： 用户需要带自动轮播内容的磁贴（新闻流、相册、状态展示）。

Customized Layout Positioning

自定义布局定位

Pattern: Control tile layout with custom margins and alignment.

csharp

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

模式： 通过自定义边距和对齐方式控制磁贴布局。

csharp

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

适用场景： 用户需要居中布局、自定义间距或特定位置的布局。

Key Properties

核心属性

TileLayout Properties

TileLayout属性

Property	Type	Description	When to Use
`ShowGroupTitle`	bool	Shows/hides group titles	Display category names above groups
`SetParentFormFlat`	bool	Applies flat look to parent form	Modern, minimalist appearance
`IgnoreThemeBackground`	bool	Use BackColor instead of theme	Custom background colors
`MainLayout.Alignment`	FlowAlignment	Near, Center, Far alignment	Control tile group positioning
`MainLayout.HorzNearMargin`	int	Left margin (pixels)	Custom left spacing
`MainLayout.HorzFarMargin`	int	Right margin (pixels)	Custom right spacing
`MainLayout.TopMargin`	int	Top margin (pixels)	Custom top spacing
`MainLayout.BottomMargin`	int	Bottom margin (pixels)	Custom bottom spacing
`MainLayout.ReverseRows`	bool	Reverse layout direction	Right-to-left or bottom-to-top flow

属性	类型	描述	适用场景
`ShowGroupTitle`	bool	显示/隐藏分组标题	在分组上方展示分类名称
`SetParentFormFlat`	bool	为父窗体应用扁平外观	现代化极简外观
`IgnoreThemeBackground`	bool	使用自定义BackColor代替主题背景	自定义背景色
`MainLayout.Alignment`	FlowAlignment	左对齐、居中、右对齐	控制磁贴分组的位置
`MainLayout.HorzNearMargin`	int	左边距（像素）	自定义左侧间距
`MainLayout.HorzFarMargin`	int	右边距（像素）	自定义右侧间距
`MainLayout.TopMargin`	int	上边距（像素）	自定义顶部间距
`MainLayout.BottomMargin`	int	下边距（像素）	自定义底部间距
`MainLayout.ReverseRows`	bool	反转布局方向	从右到左或从下到上的流布局

LayoutGroup Properties

LayoutGroup属性

Property	Type	Description	When to Use
`Text`	string	Group title text	Label for tile category
`BackColor`	Color	Group background color	Visual distinction between groups
`Items`	Collection	ImageStreamer items in group	Access/manage tiles in group

属性	类型	描述	适用场景
`Text`	string	分组标题文本	磁贴分类的标签
`BackColor`	Color	分组背景色	不同分组的视觉区分
`Items`	Collection	分组中的ImageStreamer项集合	访问/管理分组中的磁贴

ImageStreamer (Tile) Properties

ImageStreamer（磁贴）属性

Property	Type	Description	When to Use
`Images`	ImageCollection	Collection of images to display	Add images for live tiles
`SlideShow`	bool	Enable image rotation	Animate tiles with multiple images
`SliderSpeed`	int	Animation speed (ms)	Control rotation speed
`ShowNavigator`	bool	Show navigation arrows	Allow manual image navigation
`ImageStreamDirection`	StreamDirection	Animation direction	Control slide direction
`Type`	ImageStreamerType	Normal or DoubleHorizontal	Display 1 or 2 images
`InternalBackColor`	Color	Tile background color	Customize individual tile colors

属性	类型	描述	适用场景
`Images`	ImageCollection	要展示的图片集合	为动态磁贴添加图片
`SlideShow`	bool	启用图片轮播	为多图片磁贴添加动画
`SliderSpeed`	int	动画速度（毫秒）	控制轮播速度
`ShowNavigator`	bool	展示导航箭头	允许手动切换图片
`ImageStreamDirection`	StreamDirection	动画方向	控制滑动方向
`Type`	ImageStreamerType	普通或双横版	展示1张或2张图片
`InternalBackColor`	Color	磁贴背景色	自定义单个磁贴的颜色

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

创建Windows 8风格的带应用磁贴的开始屏幕：

按类别分组应用（生产力、媒体、游戏）
每个磁贴展示应用图标
点击磁贴启动应用
拖拽重排收藏的应用

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

以磁贴格式展示照片集合：

按相册/日期分组照片
ImageStreamer展示轮播照片
开启SlideShow实现自动轮播
点击查看全尺寸图片

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

展示多个内容流：

按信息源分组（新闻、Twitter、RSS）
磁贴轮播最新条目
点击磁贴打开完整文章
定期自动刷新

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

实现TileLayout时，请确保：

✅ 引用了所需的程序集（Syncfusion.Tools.Windows.dll等）
✅ 创建了TileLayout并添加到窗体中（通常设置为停靠）
✅ 添加了LayoutGroups按类别组织磁贴
✅ 向LayoutGroups中添加了ImageStreamer项作为磁贴
✅ 将图片加载到ImageStreamer.Images集合中
✅ 为动态磁贴配置了SlideShow/SliderSpeed
✅ 按需自定义了布局边距/对齐方式
✅ 按需设置了分组标题的显示/隐藏
✅ 启用了拖拽功能（默认已开启）
✅ 按需为磁贴点击添加了事件处理程序

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

问题： 磁贴不显示

确保ImageStreamer.Images集合中至少有一张图片
检查LayoutGroup.Controls是否包含ImageStreamer实例
确认TileLayout.Controls中包含LayoutGroups

问题： 轮播不生效

设置
```
ImageStreamer.SlideShow = true
```
确保Images集合中有多张图片
检查SliderSpeed的值是否合理（50-200毫秒）

问题： 拖拽功能不生效

拖拽功能默认已开启
确保没有处理冲突的鼠标事件
检查磁贴是ImageStreamer控件，不是其他类型的控件

问题： 布局未正确居中/对齐

使用
```
MainLayout.Alignment
```
属性
调整HorzNearMargin/HorzFarMargin控制水平位置
设置TopMargin/BottomMargin调整垂直间距

问题： 主题背景覆盖了自定义颜色

设置
```
IgnoreThemeBackground = true
```
然后为TileLayout/LayoutGroups应用自定义BackColor