root
/
MyAvaloniaDemo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 Commits
2 Branches
0 Tags
99 MiB
 
 
 
 
Tree: 15c34d59a2
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '15c34d59a2'
${ noResults }
MyAvaloniaDemo/modify.md

8.7 KiB
Raw Blame History

修改记录

2025年修改记录

修复 NodeCanvasPageView 中的编译错误

  • 日期: 2025年1月10日
  • 问题:
    • ItemContainerGenerator 未包含 ContainerFromItem 的定义
    • DispatcherPriority 未包含 Layout 的定义
  • 修复内容:
    1. 移除了不存在的 ItemContainerGenerator.ContainerFromItem() 方法调用
    2. 改用 GetVisualDescendants() 方法遍历视觉树来查找对应的 ContentControl 容器
    3. 将 DispatcherPriority.Layout 改为 DispatcherPriority.Normal（Avalonia 中不存在 Layout 枚举值）
  • 技术说明:
    • 在 Avalonia 中，ItemContainerGenerator 没有 ContainerFromItem 方法
    • 通过遍历视觉树（GetVisualDescendants()）来查找对应的容器是更可靠的方法
    • DispatcherPriority 枚举在 Avalonia 中可用的值包括：Invalid, Inactive, SystemIdle, ApplicationIdle, ContextIdle, Background, Input, Loaded, Render, Normal, Send
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 修复容器查找方法和 DispatcherPriority 枚举值

调整 UdpServerPageView 客户端列表折叠按钮位置到左侧

  • 日期: 2025年1月10日
  • 修改内容: 将客户端列表的折叠按钮从标题栏中间移到最左侧，使用三列 Grid 布局
  • 布局改进:
    • 使用 Grid 三列布局：ColumnDefinitions="Auto,*,Auto"
    • 第一列：折叠按钮（左侧，固定宽度 40px，左侧内边距 16px）
    • 第二列：标题内容（中间，自适应宽度，包含图标、文字和徽章）
    • 第三列：清空按钮（右侧，固定宽度）
  • 视觉效果: 折叠按钮现在独立显示在左侧，布局更加清晰，符合常见的折叠面板设计模式
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 调整折叠按钮布局位置

优化 UdpServerPageView 布局，使客户端列表和接收消息区域铺满剩余空间

  • 日期: 2025年1月10日
  • 修改内容: 为客户端列表和接收消息区域的 Border、Grid、Expander 和 ScrollViewer 添加 VerticalAlignment="Stretch" 属性，使它们能够铺满剩余的垂直空间
  • 改进点:
    • 客户端列表 Border 添加了 VerticalAlignment="Stretch"
    • 客户端列表内部 Grid 添加了 VerticalAlignment="Stretch"
    • 客户端列表 Expander 添加了 VerticalAlignment="Stretch"
    • 客户端列表 ScrollViewer 添加了 VerticalAlignment="Stretch"
    • 接收消息区域 Border 添加了 VerticalAlignment="Stretch"
    • 接收消息区域内部 Grid 添加了 VerticalAlignment="Stretch"
    • 接收消息区域 ScrollViewer 添加了 VerticalAlignment="Stretch"
  • 效果: 两个区域现在能够充分利用可用的垂直空间，提供更好的用户体验
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 添加垂直对齐属性

修复 UdpServerPageView 中 Border 控件无效属性错误

  • 日期: 2025年1月10日
  • 问题: Border 控件不支持 HorizontalContentAlignment 属性，导致编译错误 AVLN2000
  • 修复内容: 移除了第 285 行 Border 控件上的无效属性 HorizontalContentAlignment="Stretch"
  • 说明:
    • Border 控件在 Avalonia 中不支持 HorizontalContentAlignment 属性
    • 使用 HorizontalAlignment="Stretch" 即可实现 Border 本身的对齐
    • 内容对齐可以通过内部容器（如 Grid）的 HorizontalAlignment 属性控制
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 移除无效属性

重构 UdpServerPageView 布局为两行结构并支持折叠

  • 日期: 2025年1月10日
  • 修改内容: 重构 UDP 服务端页面视图为两行布局，客户端列表支持折叠功能
  • 布局结构:
    • 第一行：服务器控制（监听端口、启动/停止按钮，横向排列）
    • 第二行：左右分栏布局
      • 左边（1/3）：客户端列表区域（使用 Expander 支持折叠，显示连接的客户端信息）
      • 右边（2/3）：接收消息区域（显示接收到的消息列表）
  • 改进点:
    • 配置区域改为横向布局，端口输入和启动/停止按钮在同一行
    • 客户端列表和接收消息区域采用左右分栏，右边接收消息区域占据 2/3 宽度
    • 客户端列表使用 Expander 控件，支持折叠/展开功能
    • 所有 Border 和 Expander 添加了 HorizontalAlignment="Stretch" 确保占满宽度
    • 保持了原有的功能和样式风格
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 重构为两行布局，客户端列表支持折叠

重构 UdpClientPageView 布局为两行结构

  • 日期: 2025年1月10日
  • 修改内容: 重构 UDP 客户端页面视图，将主要内容区域改为两行布局
  • 布局结构:
    • 第一行：连接配置（IP、端口、本地端口、连接/断开按钮，横向排列）
    • 第二行：左右分栏布局
      • 左边（1/3）：已发送消息区域（包含消息列表和输入框）
      • 右边（2/3）：接收消息区域（显示接收到的消息列表）
  • 改进点:
    • 配置区域保持横向布局，所有配置项和按钮在同一行
    • 已发送消息和接收消息区域采用左右分栏，右边接收消息区域占据 2/3 宽度
    • 已发送消息区域整合了消息列表和输入框，布局更紧凑
    • 保持了原有的功能和样式风格
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml - 重构为两行布局，左右分栏

实现 UDP 客户端和服务端功能

  • 日期: 2025年1月10日
  • 修改内容: 实现 UDP 客户端和服务端两个视图页面，并添加到导航菜单中
  • 功能实现:
    • ✅ 创建 UDP 客户端 ViewModel (UdpClientPageViewModel.cs)
    • ✅ 创建 UDP 服务端 ViewModel (UdpServerPageViewModel.cs)
    • ✅ 创建 UDP 客户端 View (UdpClientPageView.axaml 和 .axaml.cs)
    • ✅ 创建 UDP 服务端 View (UdpServerPageView.axaml 和 .axaml.cs)
    • ✅ 在 PageViewModelFactory 中注册两个页面
    • ✅ 在 ServiceCollectionExtensions 中注册 ViewModel
    • ✅ 在 NavigationService 中添加导航项（UDP 工具分组）
  • UDP 客户端功能:
    • 配置服务器 IP 和端口
    • 连接/断开服务器
    • 发送消息到服务器
    • 接收服务器响应
    • 显示已发送和接收的消息列表
    • 清空消息列表
  • UDP 服务端功能:
    • 配置监听端口
    • 启动/停止监听
    • 接收客户端消息
    • 自动回复客户端（可选）
    • 显示接收到的消息列表
    • 显示连接的客户端列表（IP:端口、消息数、首次/最后连接时间）
    • 清空消息和客户端列表
  • 修改文件:
    • AuroraDesk.Presentation/ViewModels/Pages/UdpClientPageViewModel.cs - UDP 客户端 ViewModel
    • AuroraDesk.Presentation/ViewModels/Pages/UdpServerPageViewModel.cs - UDP 服务端 ViewModel
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml - UDP 客户端视图
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml.cs - UDP 客户端视图代码
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - UDP 服务端视图
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml.cs - UDP 服务端视图代码
    • AuroraDesk.Presentation/Services/PageViewModelFactory.cs - 注册页面工厂方法
    • AuroraDesk.Presentation/Extensions/ServiceCollectionExtensions.cs - 注册 ViewModel 服务
    • AuroraDesk.Infrastructure/Services/NavigationService.cs - 添加导航项
  • 技术实现:
    • 遵循 ReactiveUI + MVVM 模式
    • 使用 ReactiveCommand 实现命令绑定
    • 使用 ObservableCollection 管理消息列表
    • 异步网络操作（UDP 发送/接收）
    • 后台任务处理消息接收（避免阻塞 UI）
    • 资源清理（Dispose 模式）
    • 使用 Dispatcher.UIThread 确保 UI 线程安全更新
  • 架构遵循:
    • ✅ 整洁架构（Clean Architecture）
    • ✅ ReactiveUI 响应式编程模式
    • ✅ MVVM 模式
    • ✅ 依赖注入（DI）
    • ✅ 服务层分离（ViewModel 只处理业务逻辑，View 只负责 UI 展示）
  • 导航结构:
    • UDP 工具（父级导航项，IconType.Signal）
      • UDP 客户端（IconType.ArrowRight）
      • UDP 服务端 (IconType.Server)
  • UI 特性:
    • 现代化的界面设计（圆角、阴影、颜色区分）
    • 实时状态显示
    • 消息时间戳
    • 客户端信息详细展示
    • 响应式布局
  • 测试建议:
    • 启动 UDP 服务端，监听端口 8080
    • 启动 UDP 客户端，连接到 127.0.0.1:8080
    • 发送测试消息，验证双向通信
    • 测试多客户端连接场景
    • 测试异常情况（端口占用、网络错误等）