WPF布局系统之WPF布局与WinForm布局的区别

基本概念对比

WinForm布局

采用绝对定位（固定坐标）
基于像素的精确定位
控件大小固定
缺乏弹性布局能力
主要依赖Location和Size属性

WPF布局

采用相对定位
基于设备独立单位(DPI)
控件大小可自适应
强大的弹性布局能力
使用Margin、Padding等相对属性

布局容器对比

WinForm常用容器

C#
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        // Panel作为容器
        Panel panel = new Panel();
        panel.Location = new Point(10, 10);
        panel.Size = new Size(200, 100);
        panel.BackColor=Color.Red;

        // GroupBox作为容器
        GroupBox groupBox = new GroupBox();
        groupBox.Location = new Point(10, 120);
        groupBox.Size = new Size(200, 100);
        groupBox.Text = "分组";

        this.Controls.Add(panel);
        this.Controls.Add(groupBox);
    }
}

WPF常用布局容器

XML
<!-- WPF中的布局容器示例 -->
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    
    <!-- StackPanel垂直布局 -->
    <StackPanel>
        <Button Content="按钮1" Margin="5"/>
        <Button Content="按钮2" Margin="5"/>
        
        <!-- Grid网格布局 -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            
            <TextBlock Text="标签1" Grid.Row="0" Grid.Column="0"/>
            <TextBox Grid.Row="0" Grid.Column="1"/>
        </Grid>
        
        <!-- DockPanel停靠布局 -->
        <DockPanel LastChildFill="True">
            <Button DockPanel.Dock="Left" Content="左"/>
            <Button DockPanel.Dock="Right" Content="右"/>
            <Button DockPanel.Dock="Top" Content="上"/>
            <Button DockPanel.Dock="Bottom" Content="下"/>
            <TextBlock Text="中间"/>
        </DockPanel>
    </StackPanel>
</Window>

主要区别分析

坐标系统

WinForm：使用固定像素坐标

C#
button1.Location = new Point(100, 100); // 固定位置
button1.Size = new Size(80, 30);        // 固定大小

WPF：使用相对布局和自适应大小

XML
<Button Margin="10,10,0,0" Height="Auto" Width="Auto">
    <Button.LayoutTransform>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Button.LayoutTransform>
</Button>

控件排列方式

WinForm的控件排列

C#
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        ArrangeControls();
    }

    // WinForm中需要手动计算控件位置
    private void ArrangeControls()
    {
        int x = 10;
        int y = 10;
        foreach (Control ctrl in this.Controls)
        {
            ctrl.Location = new Point(x, y);
            y += ctrl.Height + 5; // 手动计算下一个控件的位置
        }
    }
}

设计样式

运行后

WPF的控件排列

XML
<!-- WPF自动排列控件 -->
<StackPanel Orientation="Vertical">
    <Button Content="按钮1" Margin="5"/>
    <Button Content="按钮2" Margin="5"/>
    <Button Content="按钮3" Margin="5"/>
</StackPanel>

响应式布局

WinForm的响应式处理

C#
// WinForm需要手动处理窗体大小变化
private void Form1_Resize(object sender, EventArgs e)
{
    // 手动计算并调整控件大小和位置
    textBox1.Width = this.ClientSize.Width - 20;
    button1.Location = new Point(
        this.ClientSize.Width - button1.Width - 10,
        this.ClientSize.Height - button1.Height - 10
    );
}

WPF的响应式处理

XML
<!-- WPF自动处理响应式布局 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <TextBox Grid.Row="0" Margin="10"/>
    <Button Grid.Row="1" Content="确定" 
            HorizontalAlignment="Right" 
            Margin="10"/>
</Grid>

这块区别就大了，在Winform中要类似得用Dock了，得灵活性没有这个强。

高级布局特性

WPF独有的布局特性

内容对齐

XML
<StackPanel>
    <Button Content="左对齐" HorizontalAlignment="Left"/>
    <Button Content="居中" HorizontalAlignment="Center"/>
    <Button Content="右对齐" HorizontalAlignment="Right"/>
    <Button Content="拉伸" HorizontalAlignment="Stretch"/>
</StackPanel>

面板嵌套

XML
<DockPanel>
    <StackPanel DockPanel.Dock="Left" Width="200">
        <Button Content="菜单1"/>
        <Button Content="菜单2"/>
    </StackPanel>
    
    <Grid DockPanel.Dock="Right">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="内容区域" Grid.Row="0"/>
        <ListBox Grid.Row="1"/>
    </Grid>
</DockPanel>

实际应用示例

复杂表单布局

WinForm实现

C#
public partial class ComplexForm : Form
{
    public ComplexForm()
    {
        InitializeComponent();
        
        // 需要大量代码来实现布局
        TableLayoutPanel table = new TableLayoutPanel();
        table.Dock = DockStyle.Fill;
        table.ColumnCount = 2;
        table.RowCount = 3;
        
        Label label1 = new Label();
        label1.Text = "姓名：";
        TextBox textBox1 = new TextBox();
        
        table.Controls.Add(label1, 0, 0);
        table.Controls.Add(textBox1, 1, 0);
        
        // 继续添加更多控件...
    }
}

TableLayoutPanel 这个控件个人一直以为不是一个靠谱的控件，用起来不太得劲。

WPF实现

XML
<Window x:Class="WpfApp.ComplexForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="复杂表单" Height="450" Width="800">
    
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <!-- 表单头部 -->
        <StackPanel Grid.Row="0">
            <TextBlock Text="用户信息" 
                     FontSize="20" 
                     FontWeight="Bold"/>
            <Separator Margin="0,5"/>
        </StackPanel>
        
        <!-- 表单内容 -->
        <Grid Grid.Row="1" Margin="0,10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <TextBlock Text="姓名：" Grid.Row="0" Grid.Column="0" 
                     VerticalAlignment="Center" Margin="0,0,10,0"/>
            <TextBox Grid.Row="0" Grid.Column="1" Margin="0,5"/>
            
            <TextBlock Text="年龄：" Grid.Row="1" Grid.Column="0"
                     VerticalAlignment="Center" Margin="0,0,10,0"/>
            <TextBox Grid.Row="1" Grid.Column="1" Margin="0,5"/>
            
            <TextBlock Text="备注：" Grid.Row="2" Grid.Column="0"
                     VerticalAlignment="Top" Margin="0,0,10,0"/>
            <TextBox Grid.Row="2" Grid.Column="1" 
                   Height="100" TextWrapping="Wrap"
                   AcceptsReturn="True" Margin="0,5"/>
        </Grid>
        
        <!-- 表单底部 -->
        <StackPanel Grid.Row="2" 
                    Orientation="Horizontal" 
                    HorizontalAlignment="Right">
            <Button Content="保存" Width="80" Margin="0,0,10,0"/>
            <Button Content="取消" Width="80"/>
        </StackPanel>
    </Grid>
</Window>

总结

WPF布局的优点

更现代的布局系统
更好的自适应能力
更强的可扩展性
支持复杂的布局嵌套
更好的设备适配能力

WinForm布局的优点

简单易用
直观的设计器
快速开发
适合简单应用
学习成本低

选择建议

如果是新项目，建议使用WPF
如果是简单工具类应用，可以考虑WinForm
如果需要复杂UI和良好的可维护性，强烈推荐WPF
如果需要快速开发原型，WinForm是不错的选择

目录

基本概念对比

WinForm布局

WPF布局

布局容器对比

WinForm常用容器

WPF常用布局容器

主要区别分析

坐标系统

控件排列方式

WinForm的控件排列

WPF的控件排列

响应式布局

WinForm的响应式处理

WPF的响应式处理

高级布局特性

WPF独有的布局特性

内容对齐

面板嵌套

实际应用示例

复杂表单布局

WinForm实现

WPF实现

总结

WPF布局的优点

WinForm布局的优点

选择建议