WPF2022终结版系列课程笔记 1 WPF 基本布局

本笔记为B站

微软系列技术教程 WPF项目实战合集(2022终结版) 项目记录

WPF 基本布局

WPF布局原则

一个窗口中只能包含一个元素

不应显示设置元素尺寸

不应使用坐标设置元素的位置

可以嵌套布局容器

WPF布局容器

StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal / Vertical

WrapPanel : 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列

DockPanel : 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置

Grid : 类似table表格、可灵活设置行列并放置控件元素、比较常用

UniformGrid : 指定行和列的数量, 均分有限的容器空间

Canvas : 使用固定的坐标设置元素的位置、不具备锚定停靠等功能。

Grid

学过web的应该知道table表格, 而Grid与其类似, Grid具备分割空间的能力。

RowDefinitions / ColumnDefinitions 用于给Grid分配行与列。

ColumnSpan / RowSpan 则用于设置空间元素的 跨列与阔行。

wpf 复制代码
<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
		<!--默认都是0,0开始-->
        <Border Background="red"/>
        <Border Grid.Row="1" Background="Yellow"/>
        <Border Grid.Column="1" Background="Blue"/>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"/>
    </Grid>
</Window>

此时页面被平均分为四个

自适应

若设置为自适应

csharp 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

因为第一行没有任何元素和高度,整个元素 就被隐藏了

添加一个按钮定义宽高

以行内,最高元素高度为标准,来定义高度

csharp 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Button Width="100" Height="100"/>
    <!--默认都是0,0开始-->
    <Border Background="red"/>
    <Border Grid.Row="1" Background="Yellow"/>
    <Border Grid.Column="1" Background="Blue"/>
    <Border Grid.Row="1" Grid.Column="1" Background="Green"/>
</Grid>
绝对尺寸
csharp 复制代码
<Grid.RowDefinitions>
    <RowDefinition Height="100"/>
    <RowDefinition/>
</Grid.RowDefinitions>
比例

2* 代表第一行高度是第二行得两倍

csharp 复制代码
<Grid.RowDefinitions>
    <RowDefinition Height="2*"/>
    <RowDefinition/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
元素跨行跨列

默认情况下,元素占一行一列

让他占据两列得空间

csharp 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Background="red" Grid.ColumnSpan="2"/>
</Grid>

两行

csharp 复制代码
<Border Background="red" Grid.ColumnSpan="2"
        Grid.RowSpan="2"/>

StackPanel

StackPanel主要用于垂直或水平排列元素、在容器的可用尺寸内放置有限个元素,
元素的尺寸总和(长/高)不允许超过StackPanel的尺寸, 否则超出的部分不可见。

默认的排列方式,是从上往下

csharp 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
    </StackPanel>
</Grid>

可以通过Orientation(Horizontal/Vertical) 设置排列方向

C# 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel Orientation="Horizontal">
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
    </StackPanel>
</Grid>

WrapPanel

WrapPanel默认排列方向与StackPanel相反、WrapPanel的Orientation默认为Horizontal。
WrapPanel具备StackPanel的功能基础上具备在尺寸变更后自动适应容器的宽高进行换行换列处理。

csharp 复制代码
<WrapPanel Grid.Row="1">
    <Button Width="100" Height="40"/>
    <Button Width="100" Height="40"/>
    <Button Width="100" Height="40"/>
    <Button Width="100" Height="40"/>
    <Button Width="100" Height="40"/>
</WrapPanel>


也可以通过设置Orientation(Horizontal/Vertical) 设置排列方向

DockPanel

默认DockPanel中的元素具备DockPanel.Dock属性,

该属性为枚举具备: Top、Left、Right、Bottom。

默认情况下, DockPanel中的元素不添加DockPanel.Dock属性, 则系统则会默认添加 Left。

DockPanel有一个LastChildFill属性, 该属性默认为true, 该属性作用为, 当容器中的最后一个元素时, 默认该元素填充DockPanel所有空间。

csharp 复制代码
<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
            <Button Width="100" Height="40"/>
        </DockPanel>
    </Grid>
</Window>

最后一个元素,跟前面的分开得原因是,最后一个元素默认填充剩余空间,但是他的宽度不够,就放在中间

将LastChildFill 设为False,最后一个元素就会跟随默认向左停靠

csharp 复制代码
<Grid>
    <DockPanel LastChildFill="False">
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
        <Button Width="100" Height="40"/>
    </DockPanel>
</Grid>

可以单独定义停靠方向

csharp 复制代码
<Grid>
    <DockPanel LastChildFill="False">
        <Button Width="100" Height="40" DockPanel.Dock="Left"/>
        <Button Width="100" Height="40" DockPanel.Dock="Top"/>
        <Button Width="100" Height="40" DockPanel.Dock="Right"/>
        <Button Width="100" Height="40" DockPanel.Dock="Bottom"/>
    </DockPanel>
</Grid>

UniformGrid

: 指定行和列的数量, 均分有限的容器空间

csharp 复制代码
<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <UniformGrid Columns="3" Rows="3">
            <Button/>
            <Button/>
            <Button/>
            
            <Button/>
            <Button/>
            <Button/>
            
            <Button/>
            <Button/>
            <Button/>
            
        </UniformGrid>
    </Grid>
</Window>

也可以不指定 行列数量

csharp 复制代码
<Grid>
    <UniformGrid>
        <Button/>
        <Button/>
        <Button/>
        
        <Button/>
        <Button/>
        <Button/>
        
        <Button/>
        <Button/>
        <Button/>
        
    </UniformGrid>
</Grid>

结果相同

项目作业

相关推荐
雁于飞19 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
rannn_11120 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
Ro Jace20 小时前
心灵笔记:第一性原理学习与实践
笔记
aramae21 小时前
C++ -- 模板
开发语言·c++·笔记·其他
小马学嵌入式~1 天前
嵌入式 SQLite 数据库开发笔记
linux·c语言·数据库·笔记·sql·学习·sqlite
hour_go1 天前
用户态与内核态的深度解析:安全、效率与优化之道
笔记·操作系统
摇滚侠1 天前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
岑梓铭1 天前
考研408《计算机组成原理》复习笔记,第六章(1)——总线概念
笔记·考研·408·计算机组成原理·计组
Suckerbin1 天前
digitalworld.local: TORMENT
笔记·安全·web安全·网络安全
凯尔萨厮1 天前
Java学习笔记三(封装)
java·笔记·学习