用WPF做一个TianCat是什么体验

原创 于 2026-06-17 15:07:57 发布 · 284 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#wpf
话题
#AI编程·六月创作之星博客挑战赛

图片

项目规划

  • 前端：WPF/Vue

  • 后端：WebAPI

图片

项目体验

  • 注册和登录

图片

图片

  • 选择商品到购物车

图片

图片

  • 购物车结算

图片

项目成果

  • 目录

    图片

  • 小节1

01 · ItemsControl 列表控件

难度 ⭐⭐   |  应用页面 首页、商品列表、商品详情、购物车、下单、支付、订单列表、Dashboard 等 8+ 页面   |  代码出现 60+ 处

一、官方定义

ItemsControl 是 WPF 中最基础的集合控件——把一组数据（集合/数组）渲染成一组 UI 元素。

它本身只负责"遍历数据、逐个生成容器"，不管数据怎么排列，也不管每个元素长什么样。排列方式交给 ItemsPanel，元素外观交给 ItemTemplate。

┌──────────────── ItemsControl ────────────────┐
│  ItemsSource  ←── ObservableCollection<T>     │
│  ItemsPanel    ←── 控制布局（横/竖/网格/换行） │
│  ItemTemplate  ←── 控制每个元素长什么样        │
└──────────────────────────────────────────────┘

一句话：ItemsControl = 一个你可以完全控制布局和外观的 for 循环。

和它的"亲戚"对比：

|
控件
|
特点
|
| — | — |
| ListBox |
ItemsControl + 选中高亮
|
| ListView |
ListBox + 列头排序
|
| DataGrid |
表格，自带行列结构
|
| ComboBox |
下拉选择
|

大多数场景下，ItemsControl 足够用，不需要上 ListBox/ListView。

二、项目实战

2.1 基础用法——商品分类导航（首页左侧黑底栏）

源码位置：Views/Fore/ForeHomeView.xaml:41-68

<ItemsControl ItemsSource="{Binding Categories}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Height="31"
                    Background="Transparent"
                    BorderThickness="0"
                    Command="{Binding DataContext.OpenCategoryCommand,
                              RelativeSource={RelativeSource AncestorType=UserControl}}"
                    CommandParameter="{Binding CategoryId}"
                    Cursor="Hand">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="42" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Width="16" Height="16" Source="{Binding IconUri}" />
                    <TextBlock Grid.Column="1"
                               VerticalAlignment="Center"
                               Text="{Binding CategoryName}"
                               Foreground="White" FontSize="14" />
                </Grid>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

数据源（ViewModel）：ObservableCollection<ForeCategoryFloor> Categories

// ViewModels/Fore/ForeHomeViewModel.cs
public ObservableCollection<ForeCategoryFloor> Categories { get; } = [];

// 从 API 获取数据
var data = await _catalogApiClient.HomeAsync();
foreach (var categoryElement in data.EnumerateArrayOrEmpty("categoryList"))
{
    Categories.Add(MapCategory(categoryElement));
}

关键点：

  • ItemsSource="{Binding Categories}" —— 绑定集合，集合变化 UI 自动刷新

  • ItemTemplate 内的按钮通过 RelativeSource 找到父级 UserControl 上的 ViewModel 命令

  • 这里没有指定 ItemsPanel，默认是垂直 StackPanel

2.2 自定义布局——首页商品楼层（UniformGrid 4列排列）

源码位置：Views/Fore/ForeHomeView.xaml:92-130

<ItemsControl Grid.Column="1" ItemsSource="{Binding Products}">
    <!-- ★ 关键：用 ItemsPanelTemplate 自定义布局 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="210" Height="286" Margin="13,0,0,16"
                    Background="White" BorderBrush="..." BorderThickness="1">
                <StackPanel>
                    <Image Width="165" Height="165"
                           Source="{Binding ImageUri}" ... />
                    <Button Command="..." CommandParameter="{Binding ProductId}">
                        <TextBlock Text="{Binding ProductName}" ... />
                    </Button>
                    <TextBlock Text="{Binding SalePrice, StringFormat=￥{0:F1}}"
                               Foreground="Red" FontSize="18" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键点：

  • ItemsPanelTemplate 换成 UniformGrid  → 每行 4 列自适应

  • 每个商品卡是 210×286 的 Border，内有图片、名称、价格

  • StringFormat=￥{0:F1} 直接在 XAML 格式化价格显示

2.3 换行布局——商品列表页（WrapPanel）

源码位置：Views/Fore/ForeProductListView.xaml:108-229

<ItemsControl Margin="0,10,0,30" ItemsSource="{Binding Products}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 空数据 / 加载中 状态切换 -->
    <ItemsControl.Style>
        <Style TargetType="ItemsControl">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding HasProducts}" Value="False">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.Style>
    ...
</ItemsControl>

三种布局对比（项目中实际使用的）：

|
ItemsPanelTemplate
|
效果
|
使用场景
|
| — | — | — |
| StackPanel
（默认）
|
垂直堆叠
|
分类导航、订单列表、购物车
|
| UniformGrid Columns="4" |
固定列数网格
|
首页商品楼层（4列）
|
| WrapPanel |
自动换行流式
|
商品列表（窗口拉宽就多展示）
|
| StackPanel Orientation="Horizontal" |
水平排列
|
排序按钮栏、缩略图条
|

2.4 嵌套 ItemsControl——商品列表中的缩略图条

源码位置：Views/Fore/ForeProductListView.xaml:146-166

<!-- 外层 ItemsControl：遍历商品列表 -->
<ItemsControl ItemsSource="{Binding Products}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="220" Height="372" ...>
                <StackPanel>
                    <!-- 商品主图 -->
                    <Image ... Source="{Binding ImageUri}" />
                    <!-- ★ 内层 ItemsControl：每个商品的多张缩略图 -->
                    <ItemsControl Height="42" ItemsSource="{Binding Thumbnails}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel HorizontalAlignment="Center"
                                            Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Width="34" Height="34"
                                        BorderBrush="#CCCCCC" BorderThickness="1">
                                    <Image Width="30" Height="30"
                                           Source="{Binding ImageUri}" />
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <!-- 价格、名称、成交数、评价数... -->
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键点：ItemsControl 可以任意嵌套——外层遍历商品、内层遍历缩略图，数据到哪一层就渲染到哪一层。

2.5 购物车——每个 Item 有 CheckBox 双向绑定

源码位置：Views/Fore/ForeCartView.xaml:63-118

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border MinHeight="112" ...>
                <Grid>
                    <CheckBox VerticalAlignment="Center"
                              IsChecked="{Binding IsSelected, Mode=TwoWay}" />
                    <Image ... Source="{Binding Product.ImageUri}" />
                    <TextBlock ... Text="{Binding Product.ProductName}" />
                    <TextBox ... Text="{Binding Quantity,
                                      UpdateSourceTrigger=PropertyChanged}" />
                    <TextBlock ... Text="{Binding Price, StringFormat=￥{0:F2}}" />
                    <Button Content="删除"
                            Command="{Binding DataContext.DeleteItemCommand,
                                      RelativeSource={RelativeSource AncestorType=UserControl}}"
                            CommandParameter="{Binding}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键点：

  • IsChecked="{Binding IsSelected, Mode=TwoWay}" —— 勾选状态实时回写 Model

  • UpdateSourceTrigger=PropertyChanged —— 输入数量即时更新

  • CommandParameter="{Binding}" —— 把当前 Item 对象传给删除命令

三、核心要点

|
要点
|
说明
|
| — | — |
| 数据源 |
用 ObservableCollection<T>，不要用 List<T>。Observable 才能在增删时自动刷新 UI
|
| 布局三件套 | ItemsPanel
 管排列、ItemTemplate 管样式、ItemContainerStyle 管容器样式
|
| Command 穿透 |
模板内的按钮用 RelativeSource AncestorType=UserControl 找到页面级 ViewModel
|
| State 可视 |
空数据/加载中/错误态用 DataTrigger 切换 Visibility，不要留白屏
|
| 先面板后模板 |
开发顺序：先把 ItemsPanel 布局调好，再填 ItemTemplate 内容
|

四、练习任务

  • [ ] 入门：建一个 List<string> 用 ItemsControl 展示，尝试把默认的垂直排列改成水平排列

  • [ ] 进阶：仿照 ForeHomeView 商品楼层，做一个 3 列的 UniformGrid 商品卡列表

  • [ ] 挑战：实现一个嵌套 ItemsControl——外层是分类、内层是商品缩略图（参考商品列表页）

📖 下一篇：02 · DataTemplate 数据模板

HarmonyOS 分布式开发实战：设备协同、数据共享与跨设备迁移
一个走在鸿蒙开发路上的小菜鸡
06-15 548
设备发现。
WPF 学习第三天 — Modbus RTU 串口通信
Freedom的博客
06-16 639
Modbus 是一种工业通信协议，广泛应用于 PLC、传感器、驱动器等工业设备之间的通信。字节序（Endianness）是指多字节数据在内存中的存放顺序。假设我们有一个 16 位整数0x1234字节序低位地址高位地址说明大端（Big-Endian, AB CD）0x120x34高位字节存低地址小端（Little-Endian, CD AB）0x340x12低位字节存低地址大端：像写数字一样，先写高位（0x12 0x34小端：反过来，先写低位（0x34 0x12拿0x1234。
【Java项目技术亮点】滑动窗口限流算法
我是一颗柠檬的博客
06-14 858
本文分享了滑动窗口限流算法的核心原理与实现。作者结合生产环境踩坑经验，指出固定窗口限流存在边界突发问题，而滑动窗口通过将大窗口切分为小格子（如1秒切10个100ms格子）实现更精准控制。文章对比了三种主流限流算法：固定窗口实现简单但精度低，令牌桶适合突发流量，滑动窗口则在精度和复杂度间取得平衡，成为API限流首选方案。最后给出Java环形数组实现，通过原子计数器和时间戳管理格子状态，配合锁机制确保线程安全，有效解决高并发场景下的系统保护问题。关键设计包括动态滑动窗口、过期格子清理和请求总数实时计算。
# WPF 学习记录( 第二天)
Freedom的博客
06-13 798
用 Dictionary 只收集有值的字段，用 LINQ Select + string.Join 一次性展示。禁掉中文输入法，因为 PreviewTextInput 对 IME 拦截不可靠。分隔符数量 = 元素数量 - 1。集合为空返回空字符串。），用 for 循环逐个检查每个字符是否合法。返回 null，自动取消粘贴。只有 1 个字符，但粘贴时。从索引 n 到字符串末尾。剪贴板不是文本时（如图片），行自然被推到窗口底部。
从零实现一个分布式链路追踪：TraceId与Span
2502_94055806的博客
06-16 711
/ 格式: TRACE|trace_id|service_name|span_name|parent_id|duration|tag1=val1|tag2=val2...printf("链路追踪启动: collector=%d, query=%d\n", collector_port, query_port);
ShedLock 分布式定时任务锁框架介绍
程序猿踩坑集锦
06-16 577
侵入性极低：仅加一行注解，原有定时任务代码无需改造自动防死锁：超时自动释放机制，避免节点宕机导致任务永久挂起多存储兼容：可灵活切换 MySQL、Redis、Mongo 等存储轻量无额外服务：不需要独立部署调度中心，运维成本低。
WPF + Prism 技术指南与实战项目（二、模板搭建）
bugcome的博客
06-14 261
本文介绍了Prism Template Pack工具，它能帮助开发者快速搭建符合Prism开发规范的项目骨架，避免繁琐的初始化工作。该工具提供项目模板、项模板和代码片段三大核心功能，支持WPF、Xamarin.Forms等XAML平台开发。通过Visual Studio可视化安装后，仅需1分钟即可生成标准化项目结构，内置依赖注入配置、视图模型绑定等基础功能，大幅提升开发效率。文章详细讲解了安装步骤、版本适配建议以及核心模板的使用方法，特别推荐Prism Blank App作为轻量级项目的基础模板。该工具能统
分布式锁/进程锁 设计方案
移动开发爱好者 -- ^_^
06-17 290
设计决策原因抽象接口让进程锁和分布式锁对外暴露相同的 APILockInfo默认值减少重复代码，每个锁只需要关心name回调式执行强制在 finally 中释放锁，防止遗漏Lombok 按需，否则默认值不被@Builder保留配置驱动选择实现Spring 注入，无 Redis 时不报错命名锁池进程锁用按名称管理 ReentrantLock联锁排序多锁场景按名称排序获取，防止死锁看门狗 vs 固定租约-1走看门狗（适合大多数场景），>0固定不续期（适合已知耗时的操作）
08_verl-Workers模块详解
ld326的专栏
06-13 510
融合工作器模式通过role参数灵活组合 Actor/Rollout/Ref 三种角色，在同一个 Worker 进程中实现 GPU 显存复用和零拷贝权重同步。统一训练抽象封装了BaseEngine，通过工厂模式屏蔽了 FSDP/Megatron/VeOmni/TorchTitan 等引擎后端的差异，提供统一的API。配置驱动架构：通过→→的配置链条，实现了"配置即架构"——修改 YAML 配置即可切换引擎后端，无需修改代码。MoE 路由一致性。
c#学习WPF笔记（一）
Freedom的博客
06-12 745
一个基于的 PLC 监控面板雏形，通过批量生成轴控制行（Label + TextBox + Button），为后续写入 PLC 做准备。
基于 C# WPF + HALCON 的工业视觉算法工具框架(开源)
进入一个二进制世界
06-13 323
《月薪3000实习生开发的WPF-HALCON视觉检测工具》摘要： 本文介绍了一款由实习生开发的低成本工业视觉检测工具，基于WPF+HALCON实现，包含找线、找圆、读码和模板匹配四大核心功能。工具采用三层架构设计（算法层PiCoreAlgo、UI配置层和测试层），通过可视化界面解决了现场人员无法编程调试的痛点，支持参数配置保存和多皮肤切换。文章用幽默对话形式详解各功能参数设置与故障排查技巧，如找圆功能的"质检员"比喻、模板匹配的"记住青春"提醒等。该工具将复杂算法封
07_verl-Trainer模块详解
ld326的专栏
06-13 160
装饰器：根据条件跳过或替换函数执行单控制器编排：Trainer 在驱动进程上编排整个 PPO 循环，通过 Ray RPC 调度 Worker，自身仅执行轻量计算。这种设计使得训练逻辑集中、易于调试，同时充分利用分布式计算资源。可插拔算法注册表和装饰器实现了算法组件的开放-封闭原则——新增优势估计器或策略损失函数无需修改 Trainer 代码，只需注册即可。双模式数据传输。
03_verl-设计理念与核心原理
ld326的专栏
06-13 326
RL 控制流的单进程需求 vs LLM 计算流的多进程需求。编程模型层：HybridFlow 将控制流和计算流分离，Driver 编排算法，Worker 执行计算，@register装饰器弥合两者引擎层：3D-HybridEngine 融合训练与推理，通过权重重分片消除内存冗余数据层：DataProto 统一数据协议，chunk/concat/union 操作支撑自动数据分发与收集模块层：注册表 + 工厂模式实现引擎、奖励、回滚器的可插拔替换资源层。
Memcache 深度解析
weixin_46004749的博客
06-17 221
Memcache是一个高性能、分布式内存对象缓存系统。把数据库里查出来的数据往内存里一塞，下次再查就直接从内存拿，快到飞起。import net// 允许存 null（但你最好别存 null） this . name = name;} // 核心方法：构建带命名空间的 key private String buildKey(Object key) {// 注意：Memcache 不支持按命名空间清除，flush_all 会清掉所有节点！
驱动冲突伴随 DWG 图纸文字问号怎么办？下载冲突解决合集.zip
06-19
彻底解决CAD图纸文字变问号、文字变乱码，以及其他所有字体缺失带来的烦恼
【对架无人机进行规范控制和点对点运动的模拟】可变桨叶四旋翼控制的优化推力分配：翻转动作的比较研究（Matlab代码实现）
06-19
内容概要：本文围绕可变桨叶四旋翼无人机的规范控制与点对点运动模拟展开，重点研究优化推力分配策略在翻转动作中的应用与性能比较。通过Matlab代码实现，构建了四旋翼动力学模型，并设计了多种控制算法以实现精确的姿态调整与轨迹跟踪。研究对比了不同推力分配方案在执行高机动性翻转动作时的稳定性、能耗效率与响应速度，旨在提升无人机在复杂飞行任务中的动态性能与控制精度。该仿真研究为无人机飞控系统的设计与优化提供了理论依据和技术支持。; 适合人群：具备一定自动控制理论基础和Matlab编程能力，从事无人机控制、飞行器动力学或机器人系统研究的科研人员及研究生。; 使用场景及目标：① 实现四旋翼无人机在三维空间中的精确点对点运动控制；② 对比分析不同推力分配策略在执行翻转等高难度动作时的控制效果与能耗表现，优化飞行性能；③ 为无人机自主飞行、特技飞行及复杂环境下的机动控制提供算法验证平台。; 阅读建议：此资源以Matlab仿真为核心，建议读者结合相关控制理论知识，深入理解代码实现细节，重点关注动力学建模、控制律设计与推力分配模块。在学习过程中，应动手调试参数，复现文中翻转动作的仿真结果，并尝试拓展至其他复杂飞行任务，以加深对无人机控制机理的理解。
易语言源码易语言access数据库操作
06-19
易语言源码易语言access数据库操作
C++编程while循环结构测试题解析：程序输出与循环控制逻辑训练
06-19
内容概要：本文档是一份关于C++语言中while循环的专项测试卷，包含20道单项选择题和10道判断题，题目来源于GESP和CSP-J等权威编程等级考试真题。内容涵盖while循环的基本语法、执行逻辑、条件判断、循环控制、常见死循环原因及与其他循环结构的区别，重点考察循环条件的真假判断、循环体执行次数、变量变化过程以及相关逻辑推理能力。附带完整答案解析，有助于巩固C++循环基础知识。; 适合人群：准备参加GESP或CSP-J等青少年编程等级考试的学生，具备初步C++编程基础的学习者（如中小学阶段初学者）；适用于学习流程控制结构中的循环知识点。; 使用场景及目标：①用于检测对while循环掌握程度，查漏补缺；②辅助教师进行教学测评或学生自我练习；③帮助理解循环执行顺序、条件表达式含义及避免死循环等核心概念； 阅读建议：建议在完成每道题目后对照答案认真分析错误原因，结合代码调试加深理解；尤其注意条件赋值与比较的区别（如k=0）、逻辑非运算的应用及循环变量更新机制。
卓海海洋生态平台.pptx
最新发布
06-19
卓海海洋生态平台.pptx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WPF工业上位机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值