WPF 入门笔记 - 02 - 布局综合应用

前言

首先来谈一谈布局原则：

WPF窗口只能包含一个元素(Window元素属于内容控件，内容控件只允许有一个子元素)，所以我们得在窗口中放置一个容器，才能使我们的窗口放置更多的内容。

所以在WPF中，布局由容器决定，使用容器布局需要注意以下几点：

不要显示设置元素的尺寸：可以通过设置最大和最小尺寸来限定范围。
不要使用屏幕坐标来指定元素位置：根据元素在那种容器中，来合理安排元素的位置。如需要元素之间留白，可以使用Margin设置边距。
可以嵌套布局容器：新建WPF程序会默认提供一个Grid容器，但是我们仍可在Grid中添加容器来安排我们的布局。

一般的布局流程可以概括为以下几步：

确定布局需求：根据UI设计和功能需求，确定所需的布局方式和控件组织结构。
选择合适的布局容器：根据布局需求选择适合的布局容器，如Grid、StackPanel、WrapPanel等。
设置布局属性：使用布局属性控制控件在容器中的位置、大小、对齐方式等。
嵌套布局容器：根据需要，嵌套多个布局容器以实现复杂的布局效果。
调试和优化布局：使用布局调试工具，如布局边框和布局分隔器，对布局进行调试和优化，确保布局效果符合预期。

常用布局面板回顾：

常用布局属性：

布局详解

作业页面布局如下：

WPF 入门笔记 - 02 - 布局综合应用-LMLPHP

大致上可以划分为图示中的两行一列的布局，然后再细化（这里为了方便查看，我把表格线显示了出来）：

<Window x:Class="HELLOWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HELLOWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8*"/>
        </Grid.RowDefinitions>

        <Border Background="AntiqueWhite"/>

        <Grid Grid.Row="1" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="6*"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </Grid>
</Window>

然后完成子元素的布局，左边是个四行两列的布局：

<Grid Grid.Column="0" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Margin="10" Background="#219afd"/>
    <Border Margin="10" Background="#61b721" Grid.Row="0" Grid.Column="1"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="1" Grid.ColumnSpan="2"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="1"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="3" Grid.Column="0"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="3" Grid.Column="1"/>
</Grid>

WPF 入门笔记 - 02 - 布局综合应用-LMLPHP

右边是个四行三列的布局，也可以通过设置行高的比例设计为三行三列的布局：

<Grid Grid.Row="1" Grid.Column="1" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Border Margin="10" Background="#ffa000"/>
    <Border Margin="10" Background="#30b8c4" Grid.Column="1"/>
    <Border Margin="10" Background="#e87a6e" Grid.Column="2"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="1" Grid.ColumnSpan="3"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="1"/>
    <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="2"/>
</Grid>

这样就初步完成了这个页面的布局：

WPF 入门笔记 - 02 - 布局综合应用-LMLPHP

<Window x:Class="HELLOWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HELLOWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="900">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8*"/>
        </Grid.RowDefinitions>

        <Border Background="AntiqueWhite"/>

        <Grid Grid.Row="1" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="6*"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Margin="10" Background="#219afd"/>
                <Border Margin="10" Background="#61b721" Grid.Row="0" Grid.Column="1"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="1" Grid.ColumnSpan="2"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="1"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="3" Grid.Column="0"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="3" Grid.Column="1"/>
                
            </Grid>
            <Grid Grid.Row="1" Grid.Column="1" ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Border Margin="10" Background="#ffa000"/>
                <Border Margin="10" Background="#30b8c4" Grid.Column="1"/>
                <Border Margin="10" Background="#e87a6e" Grid.Column="2"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="1" Grid.ColumnSpan="3"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="1"/>
                <Border Margin="10" Background="AntiqueWhite" Grid.Row="2" Grid.Column="2"/>
            </Grid>
        </Grid>       
    </Grid>
</Window>

🔜内容相对简单，当然也有其他布局方式，本篇内容仅作参考，希望可以帮助到大家😇