C# AvaloniaUI 系列教程：第二课 - 掌控布局的艺术

在 UI 开发中布局就像是给房子打地基。Avalonia 并不像 WinForms 那样通过“绝对坐标”来放置控件比如设置Left10, Top20而是使用容器控件。这样你的程序在 Windows、Linux 或手机上运行时界面才能自动伸缩、不乱码C# AvaloniaUI 系列教程第二课 - 掌控布局的艺术1. 核心布局容器一览Avalonia 提供了多种布局容器最常用的有四种。我们将它们比作不同的“排队方式”容器名称布局逻辑适用场景StackPanel像叠罗汉水平或垂直一个接一个排开。简单的按钮列表、工具栏。Grid像 Excel 表格通过行和列精确定位。最强大复杂的整页布局。DockPanel像贴胶带把控件贴在上下左右四个边。顶部菜单栏、底部状态栏布局。WrapPanel像流式排版一行排不下自动换到下一行。图片列表、标签云。2. 深度解析最强容器 Grid (网格)Grid是你最常用的容器。它通过RowDefinitions行定义和ColumnDefinitions列定义来划分空间。关键语法星号 (*) 与 自动 (Auto)Auto高度/宽度由内部控件的大小决定“刚好够用”。*(星号)占用剩余的所有空间“按比例瓜分”。2*占用空间是1*的两倍。实战代码Grid RowDefinitionsAuto, *, 50 ColumnDefinitions150, * TextBlock Grid.Row0 Grid.Column0 Text标题栏 BackgroundLightGray/ Border Grid.Row1 Grid.Column0 Grid.ColumnSpan2 BackgroundWhiteSmoke TextBlock Text我是主内容占满了中间空间 VerticalAlignmentCenter HorizontalAlignmentCenter/ /Border TextBlock Grid.Row2 Grid.Column1 Text底部状态栏 - 高度固定为50 VerticalAlignmentCenter/ /Grid3. StackPanel 与 WrapPanel 的区别StackPanel永远是一根筋走到底。即使屏幕装不下了它也会直接把控件“切掉”而不换行。WrapPanel则非常聪明会自动换行。StackPanel OrientationVertical Spacing10 Button Content按钮 1/ Button Content按钮 2/ /StackPanel WrapPanel Button Content非常长的按钮 A Width150/ Button Content按钮 B Width150/ Button Content按钮 C Width150/ /WrapPanel4. 实战练习编写一个登录界面我们将结合CommunityToolkit.Mvvm和今天学的布局做一个美观的登录布局。ViewModel 部分 (MainViewModel.cs)using CommunityToolkit.Mvvm.ComponentModel; public partial class MainViewModel : ObservableObject { [ObservableProperty] private string _statusMessage 请登录您的账户; }代码详解作为新手村的成员我们对上面的代码进行详细讲解后面的教程可能就不会详细说明了。①using CommunityToolkit.Mvvm.ComponentModel;作用引入CommunityToolkit.Mvvm库的核心命名空间该库是微软官方维护的MVVM工具包。库的背景全称Windows Community Toolkit MVVM维护方微软官方Microsoft目的简化MVVM模式的实现减少样板代码②public partial class MainViewModel : ObservableObjectpartial关键字含义部分类允许将一个类的定义拆分到多个文件中在这里的作用为代码生成器预留空间MainViewModel命名约定ViewModel类通常以ViewModel结尾职责作为视图View和模型Model之间的桥梁MVVM三层架构View (UI) ←→ ViewModel (逻辑) ←→ Model (数据): ObservableObject基类继承自ObservableObject核心功能实现INotifyPropertyChanged接口作用当属性值改变时自动通知UI更新③[ObservableProperty]特性/注解Attribute类型源生成器特性Source Generator Attribute作用标记该字段让代码生成器自动生成对应的公共属性代码生成机制当你编译项目时CommunityToolkit.Mvvm 的源生成器会自动为_statusMessage字段生成代码生成的属性特点属性名规则移除字段前缀_首字母大写_statusMessage→StatusMessage自动通知setter 中自动调用SetProperty触发PropertyChanged事件值比较只有值真正改变时才触发通知避免不必要的UI刷新④private string _statusMessage 请登录您的账户;字段定义访问修饰符private- 私有字段外部无法直接访问类型string- 字符串类型命名约定以下划线_开头驼峰命名法_statusMessage初始值请登录您的账户- 默认显示的文本为什么是私有字段封装性字段对外部隐藏只能通过生成的公共属性访问控制权可以在 setter 中添加验证逻辑虽然这里没有MVVM最佳实践字段私有属性公开View 部分 (MainWindow.axaml)Grid RowDefinitions*, Auto, * Background#F3F3F3 Border Grid.Row1 Width320 Padding30 BackgroundWhite CornerRadius8 BoxShadow0 4 10 0 #20000000 StackPanel Spacing15 TextBlock Text欢迎登录 FontSize20 FontWeightBold HorizontalAlignmentCenter/ TextBlock Text{Binding StatusMessage} ForegroundGray FontSize12 HorizontalAlignmentCenter/ TextBox Watermark用户名 InnerLeftContent / TextBox Watermark密码 PasswordChar* InnerLeftContent / Button Content登录 Classesaccent HorizontalAlignmentStretch HorizontalContentAlignmentCenter BackgroundDodgerBlue ForegroundWhite/ /StackPanel /Border /Grid整体结构说明这是一个典型的居中登录卡片布局采用三层结构Grid页面级布局容器三行Border中间的白色卡片位于第二行StackPanel垂直排列的登录表单1️⃣ Grid 布局容器Grid RowDefinitions*, Auto, * Background#F3F3F3RowDefinitions*, Auto, *定义了三行的高度分配行索引高度定义含义实际效果0*星号Star占据剩余空间的1份1Auto自动根据内容自动调整高度2*星号Star占据剩余空间的1份效果卡片自动垂直居中上下空白区域等高Background#F3F3F3作用设置整个Grid的背景色颜色值#F3F3F3- 浅灰色接近白色但略有灰度设计意图提供柔和的背景突出中间的白色卡片2️⃣ Border 卡片容器Border Grid.Row1 Width320 Padding30 BackgroundWhite CornerRadius8 BoxShadow0 4 10 0 #20000000Grid.Row1作用将Border放置在Grid的第1行索引从0开始位置中间行AutoWidth320作用固定卡片宽度为320像素设计意图保持登录表单的紧凑性避免在大屏幕上过度拉伸Padding30作用设置Border内部的内边距值30像素上下左右都是30px效果内容与Border边缘保持30px距离BackgroundWhite作用设置卡片背景为纯白色设计意图与浅灰色背景形成对比突出登录区域CornerRadius8作用设置圆角半径值8像素效果创建圆角矩形卡片视觉更柔和现代BoxShadow0 4 10 0 #20000000阴影效果格式水平偏移 垂直偏移 模糊半径 扩展半径 颜色参数值说明水平偏移0阴影不水平偏移垂直偏移4向下偏移4px产生悬浮感模糊半径10阴影模糊程度10px扩展半径0阴影不扩展颜色#20000000半透明黑色Alpha32/255≈12.5%视觉效果卡片看起来像是浮在背景上3️⃣ StackPanel 垂直布局StackPanel Spacing15Spacing15作用设置子元素之间的垂直间距值15像素效果每个子元素之间自动有15px的空白4️⃣ 登录表单内容① 标题文本TextBlock Text欢迎登录 FontSize20 FontWeightBold HorizontalAlignmentCenter/属性值作用Text欢迎登录显示的文本内容FontSize20字体大小20像素FontWeightBold粗体显示HorizontalAlignmentCenter水平居中对齐② 状态消息TextBlock Text{Binding StatusMessage} ForegroundGray FontSize12 HorizontalAlignmentCenter/属性值作用Text{Binding StatusMessage}MVVM数据绑定绑定到ViewModel的StatusMessage属性ForegroundGray灰色文字次要信息FontSize12小字体比标题小HorizontalAlignmentCenter水平居中MVVM绑定说明这里使用了数据绑定语法{Binding StatusMessage}会自动从DataContext通常是ViewModel获取StatusMessage属性的值当ViewModel中StatusMessage改变时UI自动更新③ 用户名输入框TextBox Watermark用户名 InnerLeftContent /属性值作用Watermark用户名占位提示文本输入框为空时显示InnerLeftContent 左侧图标/内容用户名图标效果┌─────────────────────┐ │ 用户名 │ ← 空状态 ├─────────────────────┤ │ admin │ ← 输入后 └─────────────────────┘④ 密码输入框TextBox Watermark密码 PasswordChar* InnerLeftContent /属性值作用Watermark密码占位提示文本PasswordChar*输入时显示为星号隐藏真实字符InnerLeftContent 左侧图标锁图标效果┌─────────────────────┐ │ 密码 │ ← 空状态 ├─────────────────────┤ │ ******** │ ← 输入后显示星号 └─────────────────────┘⑤ 登录按钮Button Content登录 Classesaccent HorizontalAlignmentStretch HorizontalContentAlignmentCenter BackgroundDodgerBlue ForegroundWhite/属性值作用Content登录按钮显示的文本ClassesaccentCSS样式类可用于自定义样式HorizontalAlignmentStretch水平拉伸占满父容器宽度HorizontalContentAlignmentCenter内容文本水平居中BackgroundDodgerBlue背景色亮蓝色ForegroundWhite文字颜色白色我们把代码复制进去后发现出错了没关系我们来分析问题是在哪里呢这是错误村新手要交的学费当我们修改正确后可以看到登录界面已经可以预览了程序运行后界面如下图如果点击运行程序后弹出的登录界面有乱码别忘记了上一课中讲到的要修改编码保存哦。5. 本节小结Grid用于整体框架搭建。StackPanel用于局部的小控件成组排列。Spacing属性是 Avalonia 的福音可以一键设置控件间距。星号 (*)布局是响应式界面的精髓。下一课预告布局搭好了里面得有内容。我们将学习Avalonia 的核心基础控件Button, TextBox, CheckBox, RadioButton并深入探讨如何用CommunityToolkit.Mvvm处理它们的交互。