5.0 WPF的基础介绍1-Grid,Stack,button
WPF: Window Presentation Foundation. WPF与WinForms的对比如下:
特性 | WinForms | WPF |
---|---|---|
技术基础 | 基于传统的GDI+(图形设备接口) | 基于DirectX,支持硬件加速的矢量渲染 |
UI设计方式 | 拖拽控件+事件驱动代码(简单但局限) | XAML(声明式UI)+ MVVM模式(解耦逻辑与UI) |
布局系统 | 固定像素布局(缺乏灵活性) | 强大的布局系统(自适应、流式布局) |
数据绑定 | 简单数据绑定(功能有限) | 强大的双向绑定、数据模板、依赖属性 |
图形能力 | 基础2D图形(适合简单界面) | 支持2D/3D、动画、矢量图形、复杂视觉效果 |
学习曲线 | 入门简单(适合快速开发) | 学习成本较高(需掌握XAML、MVVM等) |
跨平台兼容性 | 仅限Windows | 仅限Windows(但可通过Avalonia等框架扩展) |
WPF适合:
-
开发现代化、高交互性桌面应用(如数据可视化、工业控制界面)。
-
需要复杂UI动画、主题定制或响应式布局的项目。
-
长期维护的项目(MVVM模式更易解耦和扩展)
-
除非有明确的WinForms维护需求,否则WPF更符合技术趋势,且其设计理念对后续技术迁移(如前端框架)有启发。
一、布局介绍
布局面板 | 说明 |
Canvas | 允许以任何方式放置子控件。不会对子控件位置施加任何控制 |
DockPanel | 子控件紧贴四条边中的任意一边。最后一个控件则充满剩余区域 |
Grid | 可分为若干行与若干列 |
StackPanel | 沿水平方向或者垂直方向进行排列 |
WrapPanel | 也是沿着水平或者竖直排列,但是以多行多列方式排行。 |
1.Grid可以分成几行几列(行列的高度或宽度可以指定具体尺寸,也可以使用比例(1*,2*,下边表示第3行比第4行高一倍)
Grid可以嵌套Grid,或者其他控件比如stackpanel
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="100"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
2. stackpanel
可以横向(Orientation="Horizontal")或者纵向(Orientation="Vertical")排列其中的控件。
3. button, 文本内容是Content(与winform不同)
二、实际例子如下:
<Grid ShowGridLines="true"><Grid.RowDefinitions><RowDefinition Height="20"/><RowDefinition Height="100"/><RowDefinition Height="2*"/><RowDefinition Height="1*"/></Grid.RowDefinitions><Button x:Name="btnFile" Content="文件" Height="20" Width="50" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0 " Click="btnFile_Click"/><Button Content="编辑" Height="20" Width="50" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Margin="50,0,0,0 "/><Button Content="视图" Height="20" Width="50" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Margin="100,0,0,0 "/><Button Content="项目" Height="20" Width="50" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Margin="150,0,0,0 "/><StackPanel Grid.Row="1" Grid.Column="0"><Button Content="按钮3" Height="50" Width="50" HorizontalAlignment="Left"/><Button Content="按钮4" Height="50" Width="50" HorizontalAlignment="Left"/></StackPanel><StackPanel Grid.Row="2" Grid.Column="0" Orientation="Horizontal"><Button Content="按钮5" VerticalAlignment="Top" Height="30" Width="50" HorizontalAlignment="Left"/><Button Content="按钮6" VerticalAlignment="Center" Height="30" Width="50" HorizontalAlignment="Left"/><Button Content="按钮7" VerticalAlignment="Bottom" Height="30" Width="50" HorizontalAlignment="Left"/></StackPanel><Grid Grid.Row="3" Grid.Column="0"><Grid.ColumnDefinitions><ColumnDefinition Width="70"/><ColumnDefinition /></Grid.ColumnDefinitions><StackPanel Grid.Column="0"><Button Content="按钮8" Height="20"/><Button Content="按钮9" Height="20"/></StackPanel><StackPanel Grid.Column="1"><Button Content="按钮10" Height="20" Width="70"/><Button Content="按钮11" Height="20" Width="70"/></StackPanel></Grid> </Grid>