WPF的5种布局容器

最新推荐文章于 2024-06-09 16:21:50 发布
最新推荐文章于 2024-06-09 16:21:50 发布
阅读量2.4k 收藏 6
点赞数 2
文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46021786/article/details/125724918
版权

@TOC WPF 5种布局容器的使用场景

Grid网格布局

StackPanel

WrapPanel

DockPanel

Canvas

Grid网格布局的特点及使用

Grid意思为网格，是以网状表格的形式对元素进行布局，控件被放到设定好的小格子里面，每个小格子可以按照自己设定的比例进行全局缩放，对于制作自适应界面来说比较方便。Grid容器相比于其他四个容器使用更广，功能更强大。

效果图片

在这里插入图片描述

下面展示代码。

// WPF Grid的界面代码

// WPF Grid的界面代码
<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.ColumnDefinitions>
            <ColumnDefinition Width="597*"/>
            <ColumnDefinition Width="197*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="120" />
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="Blue" Grid.ColumnSpan="2" Margin="0,0,-0.4,0"/>

        <Grid Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,-0.4,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Border Grid.Row="0" Background="Green"/>

            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="100"/>
                </Grid.RowDefinitions>
                <Border 
                    Grid.Column="0"
                    Margin="5"
                    Background="Yellow">
                    <Button Content="Button" Click="Button_Click"/>
                </Border>
                <Border 
                    Grid.Column="1" 
                    Margin="5"
                    Background="Yellow"/>
                <Border 
                    Grid.Column="2"
                    Margin="5"
                    Background="Yellow"/>
                <Border 
                    Grid.Column="3" 
                    Margin="5"
                    Background="Yellow"/>
                <Border 
                    Grid.Column="4" 
                    Margin="5"
                    Background="Yellow"/>
                <Border 
                    Grid.Row="1"
                    Grid.ColumnSpan="3"
                    Margin="5"
                    Background="Red"/>
                <Border 
                    Grid.Row="2"
                    Grid.ColumnSpan="3"
                    Margin="5"
                    Background="Red"/>
                <Border 
                    Grid.Row="1"
                    Grid.Column="3"
                    Grid.ColumnSpan="2"
                    Margin="5"
                    Background="Red"/>
                <Border 
                    Grid.Row="2"
                    Grid.Column="3"
                    Grid.ColumnSpan="2"
                    Margin="5"
                    Background="Red"/>
            </Grid>
        </Grid>
        <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
    </Grid>
</Window>

StackPanel布局的特点及使用

将子元素排列成水平或垂直的一行，属于布局控件，通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。

StackPanel 中的子元素超出的部分，被截取被隐藏；StackPanel 自身可以嵌套使用，嵌套在其他布局控件中，和其他布局控件结合使用。
效果图片

在这里插入图片描述
代码展示

// WPF StackPanel的界面代码

// An highlighted block
<Window x:Class="Grid1_20220708.StackPanel_Test"
        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:Grid1_20220708"
        mc:Ignorable="d"
        Title="StackPanel_Test" Height="226.91" Width="240.747">
    <Grid>
        <GroupBox Header="请找出下面有错别字的选项" BorderBrush="Black" Margin="5">
            <StackPanel>
                <CheckBox Content="迫不急待" HorizontalAlignment="Left" Height="20" Margin="5,10,0,0" Width="143"/>
                <CheckBox Content="首曲一指" HorizontalAlignment="Left" Height="20" Margin="5,5,0,0" Width="143"/>
                <CheckBox Content="陈词烂调" HorizontalAlignment="Left" Height="20" Margin="5,5,0,0" Width="143"/>
                <CheckBox Content="唉声叹气" HorizontalAlignment="Left" Height="20" Margin="5,5,0,0" Width="143"/>
                <CheckBox Content="不可礼喻" HorizontalAlignment="Left" Height="20" Margin="5,5,0,0" Width="143"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="50" Margin="5"/>
                    <Button Content="确定" Width="50" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

WrapPanel布局的特点及使用

WrapPanel内部采用的流式布局。WrapPanel使用Orientation属性来控制流延伸的方向，使用HorizontaAligment和VerticalAligment两个属性控制内部控件的对齐。在流延伸的方向上，WrapPanel会排列尽可能多的控件，排不下的控件将会新起一行或者一列继续排列。

效果图片

竖直方向的布局
在这里插入图片描述
水平方向的布局
在这里插入图片描述
下面展示一些 内联代码片。

// WPF WrapPanel布局代码

// An highlighted block
<Window x:Class="Grid1_20220708.Wrap"
       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:Grid1_20220708"
        mc:Ignorable="d"
        Title="Wrap" Height="425.552" Width="531.834">
    <Grid>
        <WrapPanel Orientation="Horizontal" >
            <Button Content="1" Width="77" Height="75" Margin="10"/>
            <Button Content="2" Width="77" Height="75" Margin="10"/>
            <Button Content="3" Width="77" Height="75" Margin="10"/>
            <Button Content="4" Width="77" Height="75" Margin="10"/>
            <Button Content="5" Width="77" Height="75" Margin="10"/>
            <Button Content="6" Width="77" Height="75" Margin="10"/>
            <Button Content="7" Width="77" Height="75" Margin="10"/>
            <Button Content="8" Width="77" Height="75" Margin="10"/>
            <Button Content="9" Width="77" Height="75" Margin="10"/>
            <Button Content="10" Width="77" Height="75" Margin="10"/>
            <Button Content="11" Width="77" Height="75" Margin="10"/>
            <Button Content="12" Width="77" Height="75" Margin="10"/>
        </WrapPanel>
    </Grid>
</Window>

DockPanel布局使用

DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。

 默认情况下，后添加的元素只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。
效果图片

在这里插入图片描述
下面展示一些 内联代码片。

// WPF DockPanel布局代码

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

Canvas布局使用

Canvas中文意思是画布，在布局上就像画布上画控件一样。使用Canvas布局跟在winform上布局基本上一样，在winform上开发时我们通过设置控件的Left和Top等属性来确定控件在窗体上的位置，而WPF的控件没有left和top等属性，就像把控件放在Grid里被附加上Grid.Column和Grid.Row属性一样，当控件被放置在Canvas里时就会被附加上Canvas.X和Canvas.Y属性。

效果图片

在这里插入图片描述
下面展示一些 内联代码片。

//WPF Canvas布局使用

<Window x:Class="Grid1_20220708.Canvas"
        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:Grid1_20220708"
        mc:Ignorable="d"
        Title="Canvas" Height="205.518" Width="262.903">
    <Grid>
        <Label Content="用户名：" HorizontalAlignment="Left" Height="24" Margin="23,26,0,0" VerticalAlignment="Top" Width="58"/>
        <PasswordBox HorizontalAlignment="Left" Height="24" Margin="101,26,0,0"  VerticalAlignment="Top" Width="133"/>
        <Label Content="密码：" HorizontalAlignment="Left" Height="24" Margin="36,79,0,0" VerticalAlignment="Top" Width="58"/>
        <PasswordBox  HorizontalAlignment="Left" Height="24" Margin="101,79,0,0" VerticalAlignment="Top" Width="133"/>
        <Button Content="登录" HorizontalAlignment="Left" Height="25" Margin="101,131,0,0" VerticalAlignment="Top" Width="60"/>
        <Button Content="取消" HorizontalAlignment="Left" Height="25" Margin="174,131,0,0" VerticalAlignment="Top" Width="60"/>

    </Grid>
</Window>
alwanZ
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Wpf入门-xaml和布局容器
weixin_57784518的博客
05-09 217
WPF入门——XAML和布局容器 XAML 1.XAML是对WPF程序的所用用户界面进行详细的定制。 2.它提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。 3.但是XAML并不是一种用于程序设计的语言，它的功能也不是为了执行应用程序逻辑。 说的通俗一点，WPF是一种框架，而在框架中布局元素的语言是XAML语言。 容器 主要是用于元素在窗体中的布局。 WPF中提供了许多的容器元素，wrappa
【WPF】布局基础-6种常见布局容器
放纵小开爱的博客
10-24 1749
在 WPF (Windows Presentation Foundation) 中，是用于。不同的容器提供不同的布局和排列方式，以满足不同的设计需求。
WPF布局容器
marcushbs的博客
05-16 237
1.StackPanel：堆栈面板，通过Orientation属性设置子元素的布局排列方向为“Vertical”（垂直）和“Horizontal”（水平），不写其默认值为“Vertical”，当设置为“Vertical”时子元素会沿垂直方向拉伸，反之设置为“Horizontal”时子元素会沿水平方向拉伸。2.DockPanel：支持子元素停靠在面板的任意一条边上，通过附加属性Dock控制他们的停靠位置（Left、Top、Right、Bottom），填充空间按照“先到先得”的原则，最后一个加入面板的...
C# WPF入门学习主线篇（十七）—— UniformGrid布局容器
最新发布
weixin_56595425的博客
06-09 902
在《C# WPF入门学习主线篇（十七）—— UniformGrid布局容器》这篇文章中，我们详细介绍了WPF中的 `UniformGrid` 布局容器。本文涵盖了 `UniformGrid` 的基本概念、常见属性及使用方法，并通过具体的示例代码展示了如何实现均匀排列的网格布局。此外，还讨论了 `UniformGrid` 布局容器的优缺点，帮助读者在实际开发中做出更好的布局选择。
wpf 使用 指定命名空间的自定义控件
csdn_ad986ad的博客
04-18 252
在XAML文件的根元素中，添加一个xmlns命名空间声明，指向自定义控件所在的命名空间。在XAML文件中使用自定义控件时，可以通过使用命名空间前缀来引用它。确保自定义控件的命名空间和类名正确，并且已经在项目中正确引用了自定义控件所在的程序集。这样，就可以在WPF中使用指定命名空间的自定义控件了。
WPF页面布局DEMO
06-01
WPF提供了五种基本的布局容器：`StackPanel`、`Grid`、`Canvas`、`DockPanel` 和 `WrapPanel`。这些容器各有特点： - `StackPanel`：按垂直或水平方向堆叠子元素。 - `Grid`：类似于HTML的表格，通过行和列定义...
WPF教程：布局，面板，容器和布局转换
04-11
本文将深入探讨WPF中的布局、面板、容器和布局转换，帮助开发者更好地理解和应用这些关键概念。 首先，**布局**是WPF中控制控件如何在界面上自动调整大小和位置的过程。WPF提供了五种内置的**布局系统**：...
WpfApplication1.zip_5CF_WPF_WPF计算器布局_wpf基础布局
09-23
描述中提到，“基础的wpf布局，计算器，入门级的首选，学习wpf的小白可以看看”，这进一步强调了这个项目是面向新手的，主要教授如何在WPF中创建一个简单的计算器应用，涵盖了基本的布局管理技术，适合对WPF不熟悉的...
WPF布局综合运用实例
04-28
**WPF布局综合运用实例** Windows Presentation Foundation (WPF) 是微软.NET框架的一部分，用于构建具有丰富图形界面的应用程序。WPF提供了多种布局系统，帮助开发者有效地组织和管理UI元素，确保它们在不同屏幕...
wpf中xaml的布局
10-15
1. 布局容器：WPF中的布局系统由几种不同的布局容器组成，包括`Grid`、`StackPanel`、`DockPanel`、`Canvas`和`WrapPanel`。每种布局容器都有其特定的排列方式。 - `Grid`：允许创建表格样式的布局，通过行和列定义...
WPF 基本容器布局
limonero
11-22 681
1、 StackPanel 可设置为水平和垂直充满容器两种，默认是垂直排列。 顺序 2、WrapPanel 可设置水平和垂直两种，会自动换行的一种布局，默认是水平排列 3、DockPanel 可指定内容内控件的位置，最后的控件默认会充满剩余的空间 4、Grid 表格类型的容器布局 ...
WPF 控件学习 之 容器控件
叮当说的博客
06-23 801
Stackpanel 控件 用于装其他控件、如按钮； <StackPanel Orientation="Horizontal"> <Button Width="40" Height="20" Background="Red" Margin="12" /> <Button Width="40" Height="20"/> <Button Width="40" Height
WPF中几种容器的区别
qq_28429161的博客
01-13 1525
在WPF控件中提供了几种布局排放的容器，使得开发者在排放控件的时候更加的灵活，而不会依靠像winfrom应用程序一样拖放内容，winfrom在实现窗口大小变迁的时候往往需要在代码中实现窗口与控件的1:1。通过WPF中的容器控件则可将代码量大大减少。 常见容器 DockPanel(泊靠式面板) WrapPanel(环绕面板) Canvas(画布) StackPanel(栈式面板) Grid(网格面板) DockPanel 在DockPanel可以对每个控件进行排列，这完全取决于您自己，如果有多个控件停靠.
WPF容器控件类介绍
热门推荐
wushang923的专栏
06-23 1万+
      原本是打算在解决WPF动态加载并显示外部配置文件这样一个问题之后再写文章的，不过大概是当成作业了，所以这里整理一些基础的知识，全当自己在温习了。也好在公司做WPF的不多，所以讲些基础应该也不算说废话吧.....       言归正传，容器控件为WPF控件提供内置的布局和定位功能，方便快速设计各种有效的用户界面。WPF容器控件包含的种类有很多种，比如我们今天要介绍的Grid、Ca
Container布局容器
SSS_Sophia的博客
03-06 482
Container布局容器
WPF：布局容器
yy52520的博客
04-05 127
布局容器 所有的WPF布局容器都是派生自Panel抽象类的面板，包括三个拥有属性 【三个共有属性】 【核心的布局面板】
WPF常用布局容器和常用布局属性
lisongqi1234的博客
12-08 388
一. Grid Grid为WPF重最常用的布局容器，作为View中的主要组成部分，负责框架中整体的页面布局。 ShowGridLines : 可以设置行业的边距线的显示。 Grid.RowDefinitions : 可以创建任意行，进行固定高度与百分比活自适应高度设置。 Grid.ColumnDefinitions : 可以创建任意列，进行固定宽度与百分比活自适应宽度设置。 二.StackPanel Orientation : 用于设置StackPanel的元素排列方式。默认以垂直的方式布局 Horizon
对wpf 的入门记录总结----面板控件Canvas、WrapPanel、StackPanel、DockPanel
暗色调的博客
09-28 391
面板是WPF裡其中一個很重要的控件。 面板扮演著裝載其他控件的容器的角色，同時也控制著頁面和視窗的佈局。 由於一個視窗只允許一個子控件，因此面板經常會被使用於分隔空間，這樣每個空間就會有一個控件或者面板。 wpf支持6种面板： 1. Canvas 这是一种简单的面板，与WinForms应用处理方式类似。该面板可以设置每个子控件的坐标，容许完全的布局控制。但是该面板不够弹性，因为你必须手动移动子控件...
wpf prism 首页布局
09-06
5. 布局视图：将各个模块的视图通过布局容器进行布局，可以使用Grid的行、列、合并等属性来定义视图的位置和大小。 6. 实现导航：为了让用户能够在不同的模块之间切换，可以实现导航功能。可以使用Prism的导航服务...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值