第十三章：用户界面框架
13.1 UI框架概述
13.1.1 混合UI架构
LightCAD采用Windows Forms + Avalonia的混合UI架构：
┌─────────────────────────────────────────────┐
│ LightCAD.WinForm（主容器） │
│ ┌──────────────────────────────────────┐ │
│ │ Avalonia控件（LightCAD.Model） │ │
│ │ ┌────────────┬─────────────────┐ │ │
│ │ │ 工具栏 │ 视口区域 │ │ │
│ │ ├────────────┤ │ │ │
│ │ │ 属性面板 │ 3D/2D渲染区 │ │ │
│ │ ├────────────┤ │ │ │
│ │ │ 图层管理 │ │ │ │
│ │ └────────────┴─────────────────┘ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ 状态栏 │ │ │
│ │ └──────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
13.1.2 UI模块结构
LightCAD.Model/ # Avalonia XAML控件
├── ModelControl.axaml # 主模型控件
├── ModelControl.axaml.cs
├── ModelEditor.axaml # 模型编辑器
├── ModelEditor.axaml.cs
├── ModelViewControl.axaml # 视图控件
├── ModelViewControl.axaml.cs
├── ModelStatusBar.axaml # 状态栏
└── ModelStatusBar.axaml.cs
LightCAD.WinForm/ # Windows窗体应用
├── Program.cs # 程序入口
├── MainForm.cs # 主窗体
├── Font/ # 字体资源
│ ├── TTF/ # TrueType字体
│ └── Shx/ # SHX CAD字体
└── Resources/ # 其他资源
13.2 主窗体（WinForm）
13.2.1 程序入口
// Program.cs
public class Program
{
[STAThread]
static void Main(string[] args)
{
// 初始化应用程序
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.SetHighDpiMode(HighDpiMode.PerMonitorV2);
// 初始化LightCAD核心
LightCADEngine.Initialize();
// 加载插件
PluginManager.LoadPlugins("Plugins");
// 加载字体
FontManager.LoadFonts("Font/TTF", "Font/Shx");
// 启动主窗体
Application.Run(new MainForm());
}
}
13.2.2 主窗体设计
public class MainForm : Form
{
private MenuStrip mainMenu;
private ToolStrip mainToolbar;
private SplitContainer mainSplitter;
private Panel viewportPanel;
private Panel propertiesPanel;
private StatusStrip statusBar;
public MainForm()
{
InitializeComponent();
SetupLayout();
SetupMenu();
SetupToolbar();
SetupViewport();
SetupStatusBar();
}
private void SetupLayout()
{
Text = "LightCAD";
Size = new Size(1600, 900);
StartPosition = FormStartPosition.CenterScreen;
// 主分割器（左侧面板 + 右侧视口）
mainSplitter = new SplitContainer
{
Dock = DockStyle.Fill,
SplitterDistance = 250,
FixedPanel = FixedPanel.Panel1
};
Controls.Add(mainSplitter);
}
private void SetupMenu()
{
mainMenu = new MenuStrip();
// 文件菜单
var fileMenu = new ToolStripMenuItem("文件(&F)");
fileMenu.DropDownItems.AddRange(new ToolStripItem[]
{
new ToolStripMenuItem("新建(&N)", null, OnNew) { ShortcutKeys = Keys.Control | Keys.N },
new ToolStripMenuItem("打开(&O)", null, OnOpen) { ShortcutKeys = Keys.Control | Keys.O },
new ToolStripMenuItem("保存(&S)", null, OnSave) { ShortcutKeys = Keys.Control | Keys.S },
new ToolStripMenuItem("另存为...", null, OnSaveAs),
new ToolStripSeparator(),
new ToolStripMenuItem("导入", null, OnImport),
new ToolStripMenuItem("导出", null, OnExport),
new ToolStripSeparator(),
new ToolStripMenuItem("退出(&X)", null, OnExit)
});
// 编辑菜单
var editMenu = new ToolStripMenuItem("编辑(&E)");
editMenu.DropDownItems.AddRange(new ToolStripItem[]
{
new ToolStripMenuItem("撤销(&Z)", null, OnUndo) { ShortcutKeys = Keys.Control | Keys.Z },
new ToolStripMenuItem("重做(&Y)", null, OnRedo) { ShortcutKeys = Keys.Control | Keys.Y },
new ToolStripSeparator(),
new ToolStripMenuItem("复制(&C)", null, OnCopy) { ShortcutKeys = Keys.Control | Keys.C },
new ToolStripMenuItem("粘贴(&V)", null, OnPaste) { ShortcutKeys = Keys.Control | Keys.V },
new ToolStripMenuItem("删除", null, OnDelete) { ShortcutKeys = Keys.Delete }
});
// 绘图菜单
var drawMenu = new ToolStripMenuItem("绘图(&D)");
drawMenu.DropDownItems.AddRange(new ToolStripItem[]
{
new ToolStripMenuItem("直线", null, OnDrawLine),
new ToolStripMenuItem("圆", null, OnDrawCircle),
new ToolStripMenuItem("圆弧", null, OnDrawArc),
new ToolStripMenuItem("多段线", null, OnDrawPolyline),
new ToolStripMenuItem("矩形", null, OnDrawRectangle),
new ToolStripMenuItem("椭圆", null, OnDrawEllipse),
new ToolStripMenuItem("样条曲线", null, OnDrawSpline),
new ToolStripSeparator(),
new ToolStripMenuItem("文本", null, OnDrawText),
new ToolStripMenuItem("标注", null, OnDrawDimension)
});
// 视图菜单
var viewMenu = new ToolStripMenuItem("视图(&V)");
viewMenu.DropDownItems.AddRange(new ToolStripItem[]
{
new ToolStripMenuItem("俯视图", null, (s, e) => SetView(StandardView.Top)),
new ToolStripMenuItem("前视图", null, (s, e) => SetView(StandardView.Front)),
new ToolStripMenuItem("右视图", null, (s, e) => SetView(StandardView.Right)),
new ToolStripMenuItem("等轴测", null, (s, e) => SetView(StandardView.Isometric)),
new ToolStripSeparator(),
new ToolStripMenuItem("缩放至全部", null, OnZoomExtents) { ShortcutKeys = Keys.Control | Keys.Shift | Keys.E }
});
mainMenu.Items.AddRange(new ToolStripItem[] {
fileMenu, editMenu, drawMenu, viewMenu
});
MainMenuStrip = mainMenu;
Controls.Add(mainMenu);
}
}
13.3 Avalonia XAML控件
13.3.1 模型控件（ModelControl）
<!-- ModelControl.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LightCAD.Model.ModelControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" MinWidth="200"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- 左侧面板 -->
<TabControl Grid.Column="0">
<TabItem Header="属性">
<ScrollViewer>
<StackPanel x:Name="PropertiesPanel"
Margin="5">
<!-- 属性编辑器动态生成 -->
</StackPanel>
</ScrollViewer>
</TabItem>
<TabItem Header="图层">
<DataGrid x:Name="LayerGrid"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="可见"
Binding="{Binding IsVisible}"/>
<DataGridTextColumn Header="名称"
Binding="{Binding Name}"/>
<DataGridTextColumn Header="颜色"
Binding="{Binding Color}"/>
</DataGrid.Columns>
</DataGrid>
</TabItem>
<TabItem Header="结构">
<TreeView x:Name="DocumentTree">
<!-- 文档结构树 -->
</TreeView>
</TabItem>
</TabControl>
<!-- 分隔条 -->
<GridSplitter Grid.Column="1"
ResizeDirection="Columns"
Background="LightGray"/>
<!-- 主视口区域 -->
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 视口工具栏 -->
<StackPanel Grid.Row="0" Orientation="Horizontal"
Background="#F0F0F0" Height="30">
<Button Content="俯视" Click="OnTopView"/>
<Button Content="前视" Click="OnFrontView"/>
<Button Content="右视" Click="OnRightView"/>
<Button Content="等轴测" Click="OnIsometricView"/>
<Separator/>
<Button Content="线框" Click="OnWireframe"/>
<Button Content="实体" Click="OnSolid"/>
<Button Content="着色" Click="OnShaded"/>
</StackPanel>
<!-- 渲染视口 -->
<Border Grid.Row="1" x:Name="ViewportHost"
Background="White"/>
</Grid>
</Grid>
</UserControl>
13.3.2 模型编辑器（ModelEditor）
<!-- ModelEditor.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LightCAD.Model.ModelEditor">
<DockPanel>
<!-- 属性编辑面板 -->
<ScrollViewer DockPanel.Dock="Top">
<StackPanel Margin="5">
<TextBlock Text="实体属性" FontWeight="Bold"
Margin="0,0,0,5"/>
<!-- 通用属性 -->
<Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto,Auto,Auto">
<TextBlock Grid.Row="0" Grid.Column="0"
Text="图层：" VerticalAlignment="Center"/>
<ComboBox Grid.Row="0" Grid.Column="1"
x:Name="LayerCombo"
SelectedItem="{Binding LayerName}"/>
<TextBlock Grid.Row="1" Grid.Column="0"
Text="颜色：" VerticalAlignment="Center"/>
<ComboBox Grid.Row="1" Grid.Column="1"
x:Name="ColorCombo"
SelectedItem="{Binding Color}"/>
<TextBlock Grid.Row="2" Grid.Column="0"
Text="线型：" VerticalAlignment="Center"/>
<ComboBox Grid.Row="2" Grid.Column="1"
x:Name="LineTypeCombo"
SelectedItem="{Binding LineType}"/>
<TextBlock Grid.Row="3" Grid.Column="0"
Text="线宽：" VerticalAlignment="Center"/>
<ComboBox Grid.Row="3" Grid.Column="1"
x:Name="LineWeightCombo"
SelectedItem="{Binding LineWeight}"/>
</Grid>
<Separator Margin="0,10"/>
<!-- 特定属性（动态生成） -->
<StackPanel x:Name="SpecificProperties"/>
</StackPanel>
</ScrollViewer>
</DockPanel>
</UserControl>
13.3.3 状态栏（ModelStatusBar）
<!-- ModelStatusBar.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LightCAD.Model.ModelStatusBar">
<Grid Height="25" Background="#F0F0F0"
ColumnDefinitions="*,Auto,Auto,Auto,Auto,Auto,Auto">
<!-- 命令提示/坐标显示 -->
<TextBlock Grid.Column="0"
x:Name="PromptText"
Text="就绪"
VerticalAlignment="Center"
Margin="5,0"/>
<!-- 坐标显示 -->
<TextBlock Grid.Column="1"
x:Name="CoordinateText"
Text="X: 0.0000 Y: 0.0000"
Width="200"
VerticalAlignment="Center"/>
<!-- 功能开关按钮 -->
<ToggleButton Grid.Column="2" Content="捕捉"
x:Name="SnapToggle"
IsChecked="True" Width="50"/>
<ToggleButton Grid.Column="3" Content="栅格"
x:Name="GridToggle"
IsChecked="True" Width="50"/>
<ToggleButton Grid.Column="4" Content="正交"
x:Name="OrthoToggle"
IsChecked="False" Width="50"/>
<ToggleButton Grid.Column="5" Content="极轴"
x:Name="PolarToggle"
IsChecked="False" Width="50"/>
<!-- 缩放比例 -->
<ComboBox Grid.Column="6"
x:Name="ZoomCombo"
Width="80"
SelectedIndex="3">
<ComboBoxItem>25%</ComboBoxItem>
<ComboBoxItem>50%</ComboBoxItem>
<ComboBoxItem>75%</ComboBoxItem>
<ComboBoxItem>100%</ComboBoxItem>
<ComboBoxItem>150%</ComboBoxItem>
<ComboBoxItem>200%</ComboBoxItem>
</ComboBox>
</Grid>
</UserControl>
13.4 字体管理
13.4.1 字体资源
LightCAD内置了丰富的字体资源：
TrueType字体（TTF）：
- Roboto-Regular.ttf：通用拉丁字体
- Lora-Regular.ttf：衬线字体
- SimFang.ttf：仿宋体
- SimHei.ttf：黑体
- SimSun.ttf：宋体
SHX字体（CAD专用）： LightCAD内置了50+种SHX字体，包括：
- simplex.shx：简单体
- txt.shx：标准文字
- romans.shx：罗马体
- gbcbig.shx：大字体（中文）
- hztxt.shx：中文文字
- 以及更多专业CAD字体
13.4.2 字体加载
public class FontManager
{
private static Dictionary<string, FontData> loadedFonts = new();
/// <summary>
/// 加载所有字体
/// </summary>
public static void LoadFonts(string ttfPath, string shxPath)
{
// 加载TTF字体
foreach (var file in Directory.GetFiles(ttfPath, "*.ttf"))
{
var fontName = Path.GetFileNameWithoutExtension(file);
loadedFonts[fontName] = LoadTTF(file);
}
// 加载SHX字体
foreach (var file in Directory.GetFiles(shxPath, "*.shx"))
{
var fontName = Path.GetFileNameWithoutExtension(file);
loadedFonts[fontName] = LoadSHX(file);
}
}
/// <summary>
/// 获取字体
/// </summary>
public static FontData GetFont(string name)
{
return loadedFonts.TryGetValue(name, out var font)
? font : loadedFonts.Values.First();
}
}
13.5 属性编辑器
13.5.1 动态属性面板
public class PropertyEditorBuilder
{
/// <summary>
/// 为选中的实体构建属性编辑面板
/// </summary>
public StackPanel BuildEditor(LcEntity entity)
{
var panel = new StackPanel { Margin = new Thickness(5) };
// 实体类型标题
panel.Children.Add(new TextBlock
{
Text = $"类型：{entity.TypeName}",
FontWeight = FontWeight.Bold,
Margin = new Thickness(0, 0, 0, 10)
});
// 根据实体类型添加特定属性
switch (entity)
{
case LcLine line:
AddPointEditor(panel, "起点", line.StartPoint,
p => line.StartPoint = p);
AddPointEditor(panel, "终点", line.EndPoint,
p => line.EndPoint = p);
AddReadOnlyField(panel, "长度",
line.Length.ToString("F4"));
AddReadOnlyField(panel, "角度",
AngleUtils.RadToDeg(line.Angle).ToString("F2") + "°");
break;
case LcCircle circle:
AddPointEditor(panel, "圆心", circle.Center,
p => circle.Center = p);
AddNumberEditor(panel, "半径", circle.Radius,
v => circle.Radius = v);
AddReadOnlyField(panel, "直径",
circle.Diameter.ToString("F4"));
AddReadOnlyField(panel, "周长",
circle.Circumference.ToString("F4"));
AddReadOnlyField(panel, "面积",
circle.Area.ToString("F4"));
break;
case LcArc arc:
AddPointEditor(panel, "圆心", arc.Center,
p => arc.Center = p);
AddNumberEditor(panel, "半径", arc.Radius,
v => arc.Radius = v);
AddAngleEditor(panel, "起始角",
AngleUtils.RadToDeg(arc.StartAngle),
v => arc.StartAngle = AngleUtils.DegToRad(v));
AddAngleEditor(panel, "终止角",
AngleUtils.RadToDeg(arc.EndAngle),
v => arc.EndAngle = AngleUtils.DegToRad(v));
AddReadOnlyField(panel, "弧长",
arc.Length.ToString("F4"));
break;
}
return panel;
}
}
13.6 本章小结
本章详细介绍了LightCAD的用户界面框架。LightCAD采用WinForms + Avalonia的混合UI架构，WinForms作为主窗口容器提供窗口管理和菜单系统，Avalonia通过AXAML声明式语法提供现代化的内部控件。UI系统涵盖了菜单、工具栏、属性编辑器、图层管理、文档结构树、状态栏等完整的CAD用户界面组件。丰富的字体资源（50+ SHX + 多种TTF）为工程制图提供了充足的文字显示支持。
上一章：第十二章：输入与交互系统
下一章：第十四章：文件格式与数据交换