syncfusion-wpf-tile-view

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WPF TileView Implementation

WPF TileView 实现

The TileViewControl is a WPF container that hosts TileViewItems in a customizable matrix layout. It supports auto-arrangement, drag-drop reordering, maximize/minimize functionality, and rich customization options.

TileViewControl 是一款WPF容器控件，可在可自定义的矩阵布局中承载TileViewItems。它支持自动排列、拖放重排序、最大化/最小化功能，以及丰富的自定义选项。

When to Use This Skill

何时使用此技能

Creating dashboard layouts - Organize information in a flexible grid of tiles
Implementing drag-drop interfaces - Allow users to rearrange tiles freely
Building maximizable/minimizable views - Let tiles expand and collapse
Customizing tile headers and content - Create rich, branded tile presentations
Data-binding scenarios - Dynamically populate tiles from data sources
Responsive dashboard applications - Build modern, interactive WPF interfaces

创建仪表板布局 - 以灵活的磁贴网格组织信息
实现拖放界面 - 允许用户自由重新排列磁贴
构建可最大化/最小化视图 - 让磁贴可以展开和折叠
自定义磁贴标题和内容 - 创建丰富的品牌化磁贴展示效果
数据绑定场景 - 从数据源动态填充磁贴
响应式仪表板应用 - 构建现代化的交互式WPF界面

Documentation Navigation

文档导航

Getting Started

快速入门

📄 Read: references/getting-started.md

Assembly installation and NuGet setup
Adding TileViewControl via designer, XAML, and C#
Basic configuration and initial setup
Creating your first TileView

📄 阅读： references/getting-started.md

程序集安装和NuGet配置
通过设计器、XAML和C#添加TileViewControl
基础配置和初始设置
创建你的第一个TileView

TileViewItem Features

TileViewItem 功能

📄 Read: references/tile-items-features.md

TileViewItem structure and properties
Header customization and styling
Closable items with close buttons
Maximizable and minimizable items
TileViewItem states and behavior

📄 阅读： references/tile-items-features.md

TileViewItem的结构和属性
标题自定义和样式设置
带关闭按钮的可关闭项
可最大化和最小化的项
TileViewItem的状态和行为

Arrangement and Layout

排列与布局

📄 Read: references/arrangement-and-layout.md

Auto-arrangement in matrix positions
Drag-drop support and item reordering
BringIntoView and scroll functionality
Positioning and layout management
Matrix-based tile placement

📄 阅读： references/arrangement-and-layout.md

矩阵位置中的自动排列
拖放支持和项重排序
视图定位和滚动功能
位置和布局管理
基于矩阵的磁贴放置

Data Binding

数据绑定

📄 Read: references/data-binding.md

Binding TileView to data sources
Item templates and data templates
Dynamic tile creation from collections
Master-detail binding patterns

📄 阅读： references/data-binding.md

将TileView绑定到数据源
项模板和数据模板
从集合动态创建磁贴
主从绑定模式

Appearance and Customization

外观与自定义

📄 Read: references/appearance-customization.md

Styling and theming TileView
Custom appearance for minimized/maximized states
Content area customization
Scroll bar and border styling
Visual customization patterns

📄 阅读： references/appearance-customization.md

TileView的样式和主题设置
最小化/最大化状态的自定义外观
内容区域自定义
滚动条和边框样式
视觉自定义模式

Quick Start

快速入门示例

xaml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:TileViewControl Name="tileViewControl" Height="400" Width="600">
            <syncfusion:TileViewItem Header="Tile 1">
                <TextBlock>Content 1</TextBlock>
            </syncfusion:TileViewItem>
            <syncfusion:TileViewItem Header="Tile 2">
                <TextBlock>Content 2</TextBlock>
            </syncfusion:TileViewItem>
            <syncfusion:TileViewItem Header="Tile 3">
                <TextBlock>Content 3</TextBlock>
            </syncfusion:TileViewItem>
        </syncfusion:TileViewControl>
    </Grid>
</Window>

xaml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:TileViewControl Name="tileViewControl" Height="400" Width="600">
            <syncfusion:TileViewItem Header="Tile 1">
                <TextBlock>Content 1</TextBlock>
            </syncfusion:TileViewItem>
            <syncfusion:TileViewItem Header="Tile 2">
                <TextBlock>Content 2</TextBlock>
            </syncfusion:TileViewItem>
            <syncfusion:TileViewItem Header="Tile 3">
                <TextBlock>Content 3</TextBlock>
            </syncfusion:TileViewItem>
        </syncfusion:TileViewControl>
    </Grid>
</Window>

Common Patterns

常见模式

Pattern 1: Basic Tile Grid

模式1：基础磁贴网格

Simple tiles in a matrix layout with auto-arrangement:

xaml

<syncfusion:TileViewControl>
    <syncfusion:TileViewItem Header="Dashboard" MinimizedHeight="100" MinimizedWidth="100"/>
    <syncfusion:TileViewItem Header="Reports" MinimizedHeight="100" MinimizedWidth="100"/>
    <syncfusion:TileViewItem Header="Settings" MinimizedHeight="100" MinimizedWidth="100"/>
</syncfusion:TileViewControl>

采用自动排列的矩阵布局简单磁贴：

xaml

<syncfusion:TileViewControl>
    <syncfusion:TileViewItem Header="Dashboard" MinimizedHeight="100" MinimizedWidth="100"/>
    <syncfusion:TileViewItem Header="Reports" MinimizedHeight="100" MinimizedWidth="100"/>
    <syncfusion:TileViewItem Header="Settings" MinimizedHeight="100" MinimizedWidth="100"/>
</syncfusion:TileViewControl>

Pattern 2: Maximizable/Minimizable Tiles

模式2：可最大化/最小化磁贴

Tiles that expand when selected:

xaml

<syncfusion:TileViewItem Header="Expandable"
                         CanMaximize="True"
                         CanMinimize="True"
                         MaximizedHeight="300"
                         MaximizedWidth="400"/>

选中时可展开的磁贴：

xaml

<syncfusion:TileViewItem Header="Expandable"
                         CanMaximize="True"
                         CanMinimize="True"
                         MaximizedHeight="300"
                         MaximizedWidth="400"/>

Pattern 3: Closable Tiles

模式3：可关闭磁贴

Allow users to close tiles with a close button:

xaml

<syncfusion:TileViewItem Header="Closable" 
                         CanClose="True"
                         Close="TileViewItem_Close"/>

允许用户通过关闭按钮关闭磁贴：

xaml

<syncfusion:TileViewItem Header="Closable" 
                         CanClose="True"
                         Close="TileViewItem_Close"/>

Pattern 4: Drag-Drop Arrangement

模式4：拖放排列

Enable users to drag and reorder tiles:

csharp

tileViewControl.AllowDragDrop = true;

允许用户拖动并重排序磁贴：

csharp

tileViewControl.AllowDragDrop = true;

Key Properties

关键属性

Property	Type	Purpose
`Header`	Object	Tile header content/title
`Content`	Object	Main tile content area
`CanMaximize`	bool	Enable maximize functionality
`CanMinimize`	bool	Enable minimize functionality
`CanClose`	bool	Show close button
`MinimizedHeight` / `MinimizedWidth`	double	Size when minimized
`MaximizedHeight` / `MaximizedWidth`	double	Size when maximized
`AllowDragDrop`	bool	Allow tile reordering

属性	类型	用途
`Header`	Object	磁贴标题内容/名称
`Content`	Object	磁贴主要内容区域
`CanMaximize`	bool	启用最大化功能
`CanMinimize`	bool	启用最小化功能
`CanClose`	bool	显示关闭按钮
`MinimizedHeight` / `MinimizedWidth`	double	最小化时的尺寸
`MaximizedHeight` / `MaximizedWidth`	double	最大化时的尺寸
`AllowDragDrop`	bool	允许磁贴重排序

Next Steps

后续步骤

New to TileView? Start with Getting Started
Need specific item features? See TileViewItem Features
Building custom layouts? Read Arrangement and Layout
Working with data? Check Data Binding
Styling tiles? Explore Appearance and Customization

首次接触TileView？ 从快速入门开始
需要特定项功能？ 查看TileViewItem 功能
构建自定义布局？ 阅读排列与布局
处理数据？ 查阅数据绑定
设置磁贴样式？ 探索外观与自定义