《深入浅出WPF》读书笔记.5控件与布局(下)

一心赚狗粮的宇叔

已于 2024-08-18 09:00:35 修改

阅读量229

点赞数 14

分类专栏：深入简出WPF学习笔记文章标签： wpf c# 开发语言学习笔记 microsoft

于 2024-08-18 09:00:00 首次发布

本文链接：https://blog.csdn.net/yannsann/article/details/141281756

版权

深入简出WPF学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

《深入浅出WPF》读书笔记.5控件与布局(下)

背景

WPF的UI布局是核心功能，所以特地单独总结。充分了解布局控件特性，选择合适的布局元素能简化编程。

WPF常见布局元素

Grid:网格。可以通过自定义行列来控制控件布局；

StackPanel:栈式面板。可以将包含元素在竖直或者水平方向排列成一条直线，当移除一个元素后，后面的元素会自动向前移动填补空缺；

Canvas:画布。可以使用像素的绝对坐标定位，平面布局类似winform；

DockPanel:泊靠式面板。内部可以选择泊靠方向；

WrapPanel:自动折行面板。内部元素满一行后自动这行

一.Grid

特点及适用场合

Width和Height常用单位

三种值类型

使用Grid的行列布局来代替Margin

<Window x:Class="WpfApp2.GridDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="留言板" Height="250" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="80"></ColumnDefinition>
            <ColumnDefinition Width="4"></ColumnDefinition>
            <ColumnDefinition Width="80"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition Height="4"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="4"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="请选择您的部分并留言:" Grid.Row="0" Grid.ColumnSpan="4" VerticalAlignment="Center"></TextBlock>
        <ComboBox Grid.Row="0" Grid.Column="5" BorderBrush="Black"></ComboBox>
        <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"></TextBox>
        <Button Grid.Column="2" Grid.Row="4" Content="提交"></Button>
        <Button Grid.Column="4" Grid.Row="4" Content="清除"></Button>
    </Grid>
</Window>

使用行列布局规则

GridSplitter

<Window x:Class="WpfApp2.GridSplitterDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="GridSplitterDemo" Height="300" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.ColumnSpan="3" BorderBrush="Black"></TextBox>
        <TextBox Grid.Row="1" BorderBrush="Black"></TextBox>
        <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center"
                      Width="5" Background="Gray" ShowsPreview="True"></GridSplitter>
        <TextBox Grid.Row="1" Grid.Column="2" BorderBrush="Black"></TextBox>
    </Grid>
</Window>

二.StackPanel

特点及适用场景

属性

<Window x:Class="WpfApp2.StackPanelDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="选择题" Height="200" Width="300">
    <Grid>
        <GroupBox Header="请选择没有错别字得成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.迫不及待"></CheckBox>
                <CheckBox Content="B.首屈一指"></CheckBox>
                <CheckBox Content="C.陈词滥调"></CheckBox>
                <CheckBox Content="D.不可理喻"></CheckBox>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"></Button>
                    <Button Content="确定" Width="60" Margin="5"></Button>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

三.Cavans

适用场景

<Window x:Class="WpfApp2.CanvasDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="登录" Height="150" Width="300">
    <Grid>
        <Canvas>
            <TextBlock Text="用户名:" Canvas.Left="12" Canvas.Top="12"></TextBlock>
            <TextBox Height="23" Width="200" Canvas.Left="66" Canvas.Top="9"></TextBox>
            <TextBlock Text="密码:" Canvas.Left="12" Canvas.Top="53" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBlock>
            <TextBox Height="23" Width="200" Canvas.Left="66" Canvas.Top="50" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBox>
            <Button Content="确定" Width="80" Height="22" Canvas.Left="86" Canvas.Top="96" HorizontalAlignment="Center" VerticalAlignment="Top"></Button>
            <Button Content="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="96" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
        </Canvas>
    </Grid>
</Window>

四、DockPanel

特点

<Window x:Class="WpfApp2.DockPanelDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="DockPanelDemo" Height="300" Width="400">
    <Grid>
        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"></TextBox>
            <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"></TextBox>
            <TextBox BorderBrush="Black"></TextBox>
        </DockPanel>
    </Grid>
</Window>

五、WrapPanel

特点

<Window x:Class="WpfApp2.WrapPanelDemo"
        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:WpfApp2"
        mc:Ignorable="d"
        Title="WrapPanelDemo" Height="300" Width="400">
    <Grid>
        <WrapPanel>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>
            <Button Width="120" Height="40" Content="OK"></Button>

        </WrapPanel>
        
    </Grid>
</Window>

wpf的ui布局方面上下都结束了。之后会把全系列的demo代码放到Git上去