企业官网建设流程全解析

1. 从一个被忽视的控件说起：为什么我选择 TileControl 做文件上传

做桌面端项目这些年，文件上传这个功能我做过不下几十次。大多数时候，大家的做法都差不多：一个按钮，点一下弹出文件选择框，选完了在某个列表或者文本框里显示一下路径，顶多加个进度条。功能上没问题，但界面看起来就是一股“能用就行”的味道。直到有一次做一个资料归档模块，用户群体偏设计和新媒体方向，对界面的容忍度极低，我才认真去翻 DevExpress 的控件库，重新审视了TileControl这个平时容易被忽略的控件。

TileControl 本质上是一个磁贴容器，最初的设计意图是模仿那种块状导航面板，每个磁贴可以放图标、文字、背景色，支持分组、拖拽、动态增删。很多人拿它做首页导航或者仪表盘入口，但我发现它有一个非常适合文件上传场景的特性：每个磁贴可以独立承载一个文件对象，并且磁贴本身支持自定义绘制和状态切换。这意味着我可以把“已选文件”这件事可视化成一个一个的磁贴块，而不是一行一行的文字列表。

这个思路解决的核心问题是：文件上传过程中的状态感知。传统列表式上传，用户看到的是文件名和进度百分比，信息密度高但缺乏直观性。而磁贴式布局，每个文件是一个独立的视觉单元，可以通过颜色、图标、角标、动画来表达“等待中”“上传中”“已完成”“失败”这几种状态，用户扫一眼就知道整体情况。对于需要批量上传几十个文件的场景，这种视觉反馈的价值非常明显。

这篇文章适合两类人看：一类是正在用 DevExpress 做 WinForms 或 WPF 项目，想给文件上传模块换个皮、提升一下交互质感的开发者；另一类是对 TileControl 不熟悉，想看看这个控件除了做导航还能玩出什么花样的朋友。我会从设计思路、核心属性、实操步骤、状态管理、常见坑这几个维度，把整个实现过程拆开讲清楚。代码以 WinForms 为主，WPF 的思路相通，只是 XAML 写法有差异。

提示：TileControl 在 DevExpress 的 WinForms 套件里属于DevExpress.XtraEditors命名空间，WPF 版本在DevExpress.Xpf.LayoutControl下，两者 API 设计理念一致但具体类名有区别，本文以 WinForms 为主轴，WPF 关键差异会单独标注。

2. 整体设计思路：把文件变成磁贴的四个关键决策

2.1 为什么不用 ListBox 或 GridControl 而选 TileControl

先说选型逻辑。文件上传的展示层，常见方案有三种：ListBox、GridControl、TileControl。ListBox 最轻量，但样式定制能力弱，每个项的布局基本固定，想在里面塞进度条和状态图标会很别扭。GridControl 适合表格化数据，列头、排序、筛选都很强，但它的视觉语言是“数据表”，不是“文件卡片”，做出来的效果偏管理后台风格。TileControl 的定位正好卡在中间：它比 ListBox 灵活，每个磁贴的布局可以自由设计；又比 GridControl 轻，不需要定义列和绑定复杂的数据结构。

更关键的一点是，TileControl 的Tile对象本身就是一个容器，你可以在里面放 Panel、Label、ProgressBar、PictureEdit 等任意子控件。这就意味着，一个磁贴可以同时展示文件图标、文件名、文件大小、上传进度、状态标记，而且这些元素的排列方式完全由你控制。这种“一个磁贴就是一个完整的信息卡片”的特性，是 ListBox 和 GridControl 给不了的。

还有一个实际考量：动画和状态切换。TileControl 支持磁贴的选中态、悬停态、按下态，并且可以通过TileItem.Appearance系列属性分别设置不同状态下的背景色和边框。配合 Timer 或者异步回调，可以做出很顺滑的状态过渡效果。比如上传中磁贴背景是浅蓝色，完成后变成浅绿色，失败变成浅红色，用户不需要盯着进度条数字看，颜色变化本身就是反馈。

2.2 磁贴布局方案：流式排列 vs 固定网格

TileControl 的布局由TileControl.LayoutMode属性控制，常用的是Default和Flow两种。Default模式下磁贴按行列对齐，适合规整的网格；Flow模式下磁贴像文字一样从左到右排列，换行自动折行，适合数量不固定的场景。文件上传的数量是不确定的，可能 3 个也可能 30 个，所以我选了Flow模式，配合TileControl.ItemSize设置统一的磁贴尺寸，视觉上整齐但不死板。

磁贴尺寸我设的是120 x 120像素。这个尺寸是试出来的：太小了放不下文件名和进度条，太大了屏幕上显示不了几个。120 的宽度可以容纳大约 10 个中文字符，文件名超出部分用省略号处理，鼠标悬停时用 Tooltip 显示全名。高度 120 里面，上面 60 像素放文件类型图标，下面 40 像素放文件名，最底下 20 像素放进度条或状态文字，布局刚好不拥挤。

注意：TileControl.ItemSize设置的是默认尺寸，单个磁贴可以通过TileItem.Size单独覆盖。但我不建议混用不同尺寸，除非你有明确的视觉层级需求，否则统一尺寸看起来更整洁。

2.3 状态模型设计：四个状态与对应的视觉表达

文件上传的生命周期我拆成了四个状态：待上传（Pending）、上传中（Uploading）、已完成（Completed）、失败（Failed）。每个状态对应一套视觉参数，包括背景色、边框色、图标、进度条可见性、状态文字。这套映射关系是整个界面的核心逻辑，我把它定义成一个枚举加一个配置表，后面代码里直接查表应用样式。

这套配色不是随便选的。浅色背景配深色边框，保证在白色主界面下磁贴边界清晰；状态色选的是 Material Design 的标准色，饱和度适中，不会太刺眼。图标我用的是 DevExpress 自带的SvgImageCollection，里面有一套通用的文件类型图标和状态图标，直接引用就行，不需要额外找素材。

2.4 交互流程：从点击添加按钮到磁贴生成的完整链路

用户操作路径是这样的：点击“添加文件”按钮 → 弹出OpenFileDialog→ 用户选择一个或多个文件 → 确认后，每个文件生成一个 TileItem 加入 TileControl → 磁贴初始状态为 Pending → 用户点击“开始上传”按钮 → 遍历所有 Pending 磁贴，逐个或并发执行上传逻辑 → 上传过程中更新磁贴状态为 Uploading 并刷新进度 → 完成后更新为 Completed 或 Failed。

这个链路里有两个设计点值得展开。第一，添加文件和开始上传分离。有些实现是选完文件立刻开始上传，但批量场景下用户可能想先确认一下选了哪些文件，再决定是否上传。分离之后，用户可以在 Pending 状态下删除某个文件（右键菜单或磁贴上的小叉号），也可以全部清空重选。第二，上传并发度控制。如果一次性选了几十个文件，全部并发上传会把带宽打满，反而拖慢整体速度。我的做法是用一个简单的信号量控制同时上传的数量，默认 3 个并发，剩下的排队等待。

3. 核心细节解析：TileControl 的关键属性与事件

3.1 TileControl 与 TileItem 的层级关系

TileControl 的结构是三层：TileControl→TileGroup→TileItem。TileGroup 是分组容器，一个 TileControl 可以有多个 Group，每个 Group 下面挂若干 TileItem。文件上传场景其实不需要分组，但 TileControl 默认会有一个 Group，所以代码里还是要处理一下。你可以把 Group 理解成“一页磁贴”，切换 Group 相当于切换页面，做文件上传时把所有磁贴都放在同一个 Group 里就行。

创建磁贴的代码大概长这样：

// 获取默认分组 TileGroup defaultGroup = tileControl1.Groups[0]; // 创建一个磁贴 TileItem tile = new TileItem(); tile.ItemSize = new Size(120, 120); tile.AllowSelect = true; tile.AppearanceItem.Normal.BackColor = Color.FromArgb(245, 245, 245); tile.AppearanceItem.Normal.BorderColor = Color.FromArgb(204, 204, 204); // 添加子控件（后面详细讲） // ... // 加入分组 defaultGroup.Items.Add(tile);

这里有个细节：TileItem本身不是 Control，它继承自Component，所以不能直接往里面 Add 控件。要在磁贴里放东西，得用TileItem.Element体系。TileControl 提供了一套元素模型，包括TileItemElement（文本）、TileItemImage（图片）、TileItemFrame（边框）等。但如果你想要更自由的布局，比如放一个 ProgressBar，就需要用TileItem.CustomControl或者TileItem.CustomSize配合自定义绘制。

3.2 用 CustomControl 在磁贴里嵌入任意控件

这是 TileControl 最强大的特性之一。TileItem有一个CustomControl属性，类型是Control，你可以把任意 WinForms 控件赋给它，这个控件就会渲染在磁贴内部。我利用这个特性，在每个磁贴里放了一个自定义的UserControl，里面包含：一个 PictureEdit 显示文件图标，一个 Label 显示文件名，一个 ProgressBar 显示进度，一个 Label 显示状态文字。

public class FileTileContent : UserControl { public PictureEdit Icon { get; private set; } public Label FileName { get; private set; } public ProgressBar Progress { get; private set; } public Label StatusText { get; private set; } public FileTileContent() { // 初始化子控件并布局 // ... } }

然后创建磁贴时：

FileTileContent content = new FileTileContent(); content.FileName.Text = "项目方案.docx"; content.Icon.Image = GetFileIcon(".docx"); content.Progress.Visible = false; content.StatusText.Text = "等待上传"; TileItem tile = new TileItem(); tile.ItemSize = new Size(120, 120); tile.CustomControl = content; defaultGroup.Items.Add(tile);

注意：CustomControl的尺寸会自动填充磁贴的可用区域，但如果你在 UserControl 里用了 Dock 布局，要确保内部控件的 Dock 顺序正确，否则可能出现重叠。我的做法是 FileName 用Dock.Top，Progress 用Dock.Bottom，Icon 用Dock.Fill，StatusText 叠在 Progress 上面或者放在 Icon 下方。

3.3 磁贴的选中态与悬停态样式定制

TileControl 默认的选中效果是一个高亮边框，悬停效果是背景变深。这套默认样式在文件上传场景下不够用，因为我们需要用背景色来表达上传状态，如果悬停时背景色被覆盖，状态就看不出来了。解决办法是重写AppearanceItem的各个状态属性，让悬停态只改变边框亮度，不改变背景色。

tile.AppearanceItem.Normal.BackColor = Color.FromArgb(245, 245, 245); tile.AppearanceItem.Normal.BorderColor = Color.FromArgb(204, 204, 204); tile.AppearanceItem.Hovered.BackColor = Color.FromArgb(245, 245, 245); // 保持背景不变 tile.AppearanceItem.Hovered.BorderColor = Color.FromArgb(33, 150, 243); // 边框变蓝 tile.AppearanceItem.Selected.BackColor = Color.FromArgb(227, 242, 253); tile.AppearanceItem.Selected.BorderColor = Color.FromArgb(33, 150, 243);

这样悬停时只有边框变色，背景色仍然反映上传状态。选中态我用了浅蓝背景，表示“当前聚焦的文件”，配合右键菜单可以对这个文件单独操作。

3.4 动态增删磁贴时的性能考量

批量添加几十个磁贴时，如果每个都单独Add并触发重绘，界面会明显卡顿。TileControl 提供了BeginUpdate()和EndUpdate()方法，在这两个调用之间的所有修改会合并成一次重绘。

tileControl1.BeginUpdate(); try { foreach (var file in selectedFiles) { // 创建并添加磁贴 } } finally { tileControl1.EndUpdate(); }

另外，如果文件数量特别多（比如超过 100 个），建议做分页或者虚拟化。TileControl 本身不支持虚拟化，所有磁贴都是真实创建的，数量太多会吃内存。我的做法是超过 50 个文件时提示用户分批上传，或者只保留最近 50 个的磁贴，其余的用“还有 N 个文件”的汇总磁贴表示。

4. 实操过程：从零搭建文件上传磁贴界面

4.1 环境准备与控件引入

新建一个 WinForms 项目，通过 NuGet 安装 DevExpress.WinForms 包，或者用 DevExpress 的项目模板创建。工具箱里找到TileControl，拖到窗体上。设置Dock = Fill，LayoutMode = Flow，ItemSize = 120, 120，Padding = 10。再拖一个 Panel 到窗体顶部，放“添加文件”“开始上传”“清空”三个 Button，以及一个 Label 显示总体进度。

窗体的Font建议设为“微软雅黑 9pt”，TileControl 的AppearanceItem.Normal.Font继承窗体字体，这样中文显示不会发虚。如果项目要求高 DPI 适配，在app.manifest里开启 DPI 感知，TileControl 在高 DPI 下会自动缩放磁贴尺寸，但 CustomControl 内部的布局需要你自己处理缩放，建议用TableLayoutPanel或者按比例计算尺寸。

4.2 定义文件数据模型与状态枚举

先定义一个类来承载每个文件的信息：

public enum UploadStatus { Pending, Uploading, Completed, Failed } public class FileUploadItem { public string FilePath { get; set; } public string FileName => Path.GetFileName(FilePath); public long FileSize { get; set; } public UploadStatus Status { get; set; } public int Progress { get; set; } public TileItem Tile { get; set; } public FileTileContent Content { get; set; } }

用一个List<FileUploadItem>维护所有文件，磁贴和数据的关联通过Tile和Content属性双向引用。这样在更新状态时，可以通过数据对象找到对应的磁贴和子控件，反之亦然。

4.3 添加文件：OpenFileDialog 与磁贴生成

“添加文件”按钮的点击事件：

private void btnAddFiles_Click(object sender, EventArgs e) { using (OpenFileDialog dialog = new OpenFileDialog()) { dialog.Multiselect = true; dialog.Title = "选择要上传的文件"; dialog.Filter = "所有文件 (*.*)|*.*"; if (dialog.ShowDialog() == DialogResult.OK) { AddFiles(dialog.FileNames); } } } private void AddFiles(string[] filePaths) { tileControl1.BeginUpdate(); try { foreach (string path in filePaths) { // 去重检查 if (uploadItems.Any(x => x.FilePath == path)) continue; FileUploadItem item = new FileUploadItem { FilePath = path, FileSize = new FileInfo(path).Length, Status = UploadStatus.Pending, Progress = 0 }; FileTileContent content = CreateTileContent(item); TileItem tile = CreateTile(item, content); item.Tile = tile; item.Content = content; uploadItems.Add(item); tileControl1.Groups[0].Items.Add(tile); } } finally { tileControl1.EndUpdate(); } UpdateOverallProgress(); }

CreateTileContent方法负责构建 UserControl 并填充初始数据，CreateTile方法负责创建 TileItem 并绑定 CustomControl。这两个方法的具体实现下面展开。

4.4 构建磁贴内容控件：图标、文件名、进度条、状态文字

FileTileContent的布局我用TableLayoutPanel来做，三行结构：第一行放图标（高度 60），第二行放文件名（高度 30），第三行放进度条和状态文字（高度 30）。进度条和状态文字用 Panel 叠放，进度条Dock.Fill，状态文字Dock.Bottom或者居中覆盖。

private FileTileContent CreateTileContent(FileUploadItem item) { FileTileContent content = new FileTileContent(); content.Dock = DockStyle.Fill; // 图标 content.Icon.Image = GetFileIcon(item.FilePath); content.Icon.Properties.SizeMode = PictureSizeMode.Zoom; // 文件名（超长省略） content.FileName.Text = item.FileName; content.FileName.AutoEllipsis = true; content.FileName.TextAlign = ContentAlignment.MiddleCenter; // 进度条 content.Progress.Minimum = 0; content.Progress.Maximum = 100; content.Progress.Value = 0; content.Progress.Visible = false; // 状态文字 content.StatusText.Text = "等待上传"; content.StatusText.TextAlign = ContentAlignment.MiddleCenter; return content; }

GetFileIcon方法根据文件扩展名返回对应图标。DevExpress 的SvgImageCollection里有一组通用图标，但文件类型图标不够全。我的做法是维护一个扩展名到图标的字典，常用的 docx、xlsx、pptx、pdf、jpg、png、zip 各配一个图标，其他的用默认文件图标。

4.5 上传逻辑与进度更新

上传逻辑我用一个模拟的异步方法来演示，实际项目中替换成你的上传 API 调用：

private async Task UploadFileAsync(FileUploadItem item) { item.Status = UploadStatus.Uploading; UpdateTileAppearance(item); // 模拟分块上传 for (int i = 0; i <= 100; i += 10) { await Task.Delay(100); // 模拟网络延迟 item.Progress = i; UpdateTileProgress(item); } // 模拟成功或失败 item.Status = UploadStatus.Completed; item.Progress = 100; UpdateTileAppearance(item); }

UpdateTileAppearance方法根据状态查表设置磁贴的背景色、边框色、图标和状态文字。UpdateTileProgress方法只更新进度条的值和状态文字里的百分比。

并发控制用一个SemaphoreSlim：

private SemaphoreSlim uploadSemaphore = new SemaphoreSlim(3); private async void btnStartUpload_Click(object sender, EventArgs e) { var pendingItems = uploadItems.Where(x => x.Status == UploadStatus.Pending).ToList(); var tasks = pendingItems.Select(async item => { await uploadSemaphore.WaitAsync(); try { await UploadFileAsync(item); } finally { uploadSemaphore.Release(); } }); await Task.WhenAll(tasks); UpdateOverallProgress(); }

注意：在异步方法里更新 UI 控件，必须回到 UI 线程。WinForms 里可以用Control.Invoke或者IProgress<T>。我习惯用IProgress<T>，代码更干净：

private IProgress<int> CreateProgressReporter(FileUploadItem item) { return new Progress<int>(value => { item.Progress = value; UpdateTileProgress(item); }); }

4.6 状态切换的视觉刷新与动画过渡

状态切换时，如果直接改背景色，视觉上比较生硬。我加了一个简单的过渡效果：用 Timer 在 200 毫秒内把背景色从旧值渐变到新值。实现方式是记录起始颜色和目标颜色，每次 Tick 计算插值。

private void AnimateTileColor(TileItem tile, Color from, Color to, int durationMs = 200) { int steps = 10; int interval = durationMs / steps; int currentStep = 0; Timer timer = new Timer { Interval = interval }; timer.Tick += (s, e) => { currentStep++; float t = (float)currentStep / steps; Color color = InterpolateColor(from, to, t); tile.AppearanceItem.Normal.BackColor = color; if (currentStep >= steps) { timer.Stop(); timer.Dispose(); } }; timer.Start(); }

这个动画不是必须的，但加上之后整个界面的质感会提升一个档次。实测下来，200 毫秒的过渡在人眼看来是“瞬间但柔和”的，不会觉得拖沓。

5. 常见问题与排查技巧实录

5.1 磁贴内容不显示或显示不全

这是新手最容易遇到的问题。原因通常是CustomControl的尺寸没有正确设置，或者内部控件的 Dock 顺序不对。排查步骤：先检查TileItem.ItemSize是否足够大，然后检查CustomControl的Dock属性是否设为Fill，最后检查内部控件的 Dock 顺序——WinForms 的 Dock 布局是“后添加的先占位”，所以如果你先 Dock 了 Fill 的控件，再 Dock Top 的控件，Top 控件会被 Fill 控件盖住。

解决办法：在FileTileContent的构造函数里，按Controls.Add的顺序反向添加，或者用Controls.SetChildIndex调整层级。更稳妥的做法是用TableLayoutPanel做根容器，行列固定，不依赖 Dock 顺序。

5.2 上传过程中界面卡死

如果你在 UI 线程里同步执行上传逻辑，界面必然卡死。解决办法就是前面说的异步 +IProgress<T>。但还有一个隐蔽的坑：TileControl.BeginUpdate()和EndUpdate()如果在异步过程中跨线程调用，会抛异常。所以BeginUpdate只在添加磁贴时用，上传过程中的状态更新不要包在BeginUpdate里，单个磁贴的AppearanceItem修改本身开销很小，不需要批量优化。

5.3 大量磁贴时滚动卡顿

TileControl 在磁贴数量超过 50 个时，滚动会开始掉帧。原因是每个磁贴的CustomControl都是真实的 WinForms 控件，控件数量多了之后，窗口消息处理会变慢。缓解办法有三个：一是减少每个磁贴里的子控件数量，比如把进度条和状态文字合并成一个自绘控件；二是用TileControl.ItemSize适当缩小磁贴，让一屏能显示更多，减少滚动频率；三是超过一定数量后改用分页，每页最多 30 个。

5.4 文件图标加载失败或显示为默认图标

SvgImageCollection里的图标是按名称索引的，如果你用的名称不存在，会返回 null，PictureEdit 就显示空白。排查方法是打印出所有可用的图标名称，确认你用的名称在列表里。另外，如果文件扩展名是大写（比如.DOCX），而你的字典键是小写，也会匹配失败。统一转小写处理即可。

5.5 上传失败后重试的状态重置

失败状态的磁贴，用户右键点击应该有“重试”选项。重试的逻辑是把状态重置为 Pending，进度归零，然后重新加入上传队列。注意重试时要检查文件是否还存在，如果文件被移动或删除了，要提示用户重新选择。

5.6 独家避坑技巧：磁贴右键菜单的绑定

TileControl 本身没有提供磁贴级别的右键菜单事件，需要自己在TileControl.MouseUp里判断鼠标位置落在哪个磁贴上。方法是遍历所有磁贴，用TileControl.GetTileItemAtPoint或者手动计算边界。更简单的做法是在FileTileContent的 UserControl 里处理MouseUp事件，因为右键点击时鼠标一定在某个 CustomControl 上，直接弹出 ContextMenuStrip 即可。

content.MouseUp += (s, e) => { if (e.Button == MouseButtons.Right) { contextMenuStrip1.Tag = item; contextMenuStrip1.Show(content, e.Location); } };

这个技巧省去了坐标换算的麻烦，实测很稳。

6. 扩展玩法：让文件上传磁贴更实用

6.1 拖拽文件到窗体直接生成磁贴

WinForms 的拖拽支持很简单：设置窗体的AllowDrop = true，处理DragEnter和DragDrop事件。DragEnter里判断e.Data.GetDataPresent(DataFormats.FileDrop)，是的话设置e.Effect = DragDropEffects.Copy。DragDrop里取出文件路径数组，调用前面写的AddFiles方法。

private void Form1_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats.FileDrop)) e.Effect = DragDropEffects.Copy; } private void Form1_DragDrop(object sender, DragEventArgs e) { string[] files = (string[])e.Data.GetData(DataFormats.FileDrop); AddFiles(files); }

加上拖拽之后，用户操作路径更短，体验提升明显。注意拖拽时如果文件已经在列表里，要去重，否则会生成重复磁贴。

6.2 磁贴内嵌缩略图预览

对于图片文件，可以在磁贴里直接显示缩略图而不是通用图标。做法是加载图片后生成一个 60x60 的缩略图，赋给 PictureEdit。注意大图片直接加载会吃内存，要用Image.FromFile配合GetThumbnailImage或者用Bitmap缩放后释放原图。

private Image GetThumbnail(string path, int size) { using (Image original = Image.FromFile(path)) { return original.GetThumbnailImage(size, size, () => false, IntPtr.Zero); } }

这个功能对图片上传场景特别有用，用户一眼就能确认选对了文件。

6.3 上传完成后的磁贴点击预览

已完成状态的磁贴，双击可以打开文件或者预览。绑定TileItem的DoubleClick事件，或者直接在FileTileContent里处理DoubleClick。打开文件用Process.Start，预览的话可以弹一个自定义的预览窗体。

6.4 总体进度与剩余时间估算

在顶部 Panel 里放一个总的 ProgressBar，根据所有文件的平均进度更新。剩余时间估算用已上传字节数和已用时间计算速度，再用剩余字节数除以速度。这个估算不需要很精确，给用户一个大概的感觉就行。

private string EstimateRemainingTime() { long totalBytes = uploadItems.Sum(x => x.FileSize); long uploadedBytes = uploadItems.Sum(x => x.FileSize * x.Progress / 100); long remainingBytes = totalBytes - uploadedBytes; double elapsedSeconds = (DateTime.Now - uploadStartTime).TotalSeconds; if (uploadedBytes == 0 || elapsedSeconds < 1) return "计算中..."; double speed = uploadedBytes / elapsedSeconds; double remainingSeconds = remainingBytes / speed; if (remainingSeconds < 60) return $"约 {remainingSeconds:F0} 秒"; return $"约 {remainingSeconds / 60:F1} 分钟"; }

这个估算在文件大小差异很大时会有波动，可以做一个滑动平均来平滑。

6.5 主题切换：深色模式下的磁贴配色

如果应用支持深色模式，磁贴的配色需要另一套映射。深色模式下，Pending 背景用 #2D2D2D，边框 #555555；Uploading 背景 #1A3A5C，边框 #2196F3；Completed 背景 #1B3B1B，边框 #4CAF50；Failed 背景 #3B1B1B，边框 #F44336。文字颜色统一用浅灰 #E0E0E0。切换主题时遍历所有磁贴重新应用样式即可。

7. 一些实操后的个人体会

这套磁贴式文件上传界面，我在三个项目里用过，累计处理过上万次文件上传。最大的感受是：用户对上传过程的焦虑感明显降低了。以前用列表式上传，用户会反复问“传到哪了”“还有多久”，换成磁贴之后，颜色和进度条的变化让状态一目了然，客服反馈少了很多。

另一个体会是，磁贴尺寸不要贪大。我一开始设的 150x150，觉得大气，结果一屏只能放 6 个，用户要不停滚动。改成 120x120 之后，一屏能放 12 个，效率高多了。文件名省略的问题，用 Tooltip 补全就行，用户不会因为看不到全名而困惑。

还有一点，状态切换的动画时间不要超过 300 毫秒。我试过 500 毫秒的渐变，看起来是柔和了，但批量上传时几十个磁贴同时渐变，视觉上很拖沓。200 毫秒左右是甜点区，既有过渡感又不拖节奏。

最后分享一个小技巧：如果上传失败，除了磁贴变红，可以在磁贴右上角加一个小的红色角标，里面写“!”。这个角标用TileItemElement的Image或者直接在 CustomControl 里叠一个 Label 就行。角标比背景色更醒目，用户扫一眼就能定位到失败的文件。