WPF常用的9种布局方式，建议收藏！

最新推荐文章于 2024-08-16 18:04:50 发布
最新推荐文章于 2024-08-16 18:04:50 发布
阅读量1.9w 收藏 95
点赞数 20
分类专栏： WPF 文章标签： c# wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44034384/article/details/106154954
版权

概述：本文简要介绍了WPF中布局常用控件及布局相关的属性。

文章目录

一、Grid

Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局。

标签含义
ShowGridLines可以设置行业的边距线的显示
Grid. RowDefinitions可以创建任意行, 进行固定高度与百分比高度设置
Grid. ColumnDefinitions可以创建任意列, 进行固定宽度与百分宽度设置

示例：

<Grid>
    <Grid.RowDefinitions>   
        <RowDefinition Height="40"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition>   
        <RowDefinition Height="2*"></RowDefinition>    
        <RowDefinition Height="*"></RowDefinition>   
    </Grid.RowDefinitions>  
    <Button Grid.Row="0" Content="Button 1"></Button> 
    <Button Grid.Row="1" Content="Button 2"></Button>
    <Button Grid.Row="2" Content="Button 3"></Button> 
    <Button Grid.Row="3" Content="Button 4"></Button>
</Grid>

效果图：
在这里插入图片描述
注意：

Grid的列宽与行高可采用固定、自动、按比例三种方式定义。

  1. 固定长度：值为一个确定的数字
  2. 自动长度：值为Auto，实际作用就是取实际控件所需的最小值
  3. 比例长度：*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3

二、StackPanel

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。

属性含义
Orientation用于设置StackPanel的元素排列方式。默认以垂直的方式布局
Horizontal水平布局, 设置水平效果
Vertical垂直布局, 设置垂直效果

示例：

<StackPanel Name="stackpanel1" Orientation="Horizontal">
    <Button Content="Button1"></Button>
    <Button Content="Button2"></Button>
    <Button Content="Button3"></Button>
</StackPanel>
<StackPanel Name="stackpanel2" Orientation="Vertical">
    <Button Content="Button4"></Button>
    <Button Content="Button5"></Button>
    <Button Content="Button6"></Button>
</StackPanel>
<StackPanel Name="stackpanel3" Orientation="Horizontal" FlowDirection="RightToLeft">
    <Button Content="Button7"></Button>
    <Button Content="Button8"></Button>
    <Button Content="Button9"></Button>
</StackPanel>

效果图：
在这里插入图片描述
注意：

Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，则元素将从右向左排列。

三、WrapPanel

WrapPanel与StackPanel类似的功能, 相对于WrapPanel , 具有在有限的容器范围内, 可以自动换行, 或者换列处理。具体则取决于WrapPanel的排列方式 (Orientation)。

  • Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列
  • Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列

示例：

<WrapPanel Orientation="Horizontal">
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
</WrapPanel>

效果图：
在这里插入图片描述

四、DockPanel

DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

  • 包含在DockPanel中的元素, 具备DockPanel.Dock的4个枚举值 （Top/Left/Right/Bottom） 用于设置元素的锚定位置
  • LastChildFill : 容器中的最后一个元素时, 默认该元素填充DockPanel所有空间, 默认值为True
  • DockPanel中的元素未显示添加DockPanel.Dock属性时, 系统则会默认为 DockPanel.Dock=“Left”

示例：

<DockPanel>
    <Button Content="上" DockPanel.Dock="Left"></Button>
    <Button Content="下" DockPanel.Dock="Bottom"></Button>
    <Button Content="左" DockPanel.Dock="Left"></Button>
    <Button Content="右" DockPanel.Dock="Right"></Button>
</DockPanel>

效果图：
在这里插入图片描述

五、 UniformGrid

UniformGrid就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。

  • 与Grid不同的是, 该容器具备Columns/Rows 属性, 通过设置该属性, UniformGrid则具备相应的 行与列, 但是设置的Columns/Rows不允许单独的进行容器的大小设置
  • 位于UniformGrid中的子元素, 按输入顺序排列至容器中, 直至填充容器的所有空间
  • 未显示指定Columns/Rows, UniformGrid则为子元素动态分配Columns/Rows, 换行与换列的基 准主要基于UniformGrid的容器大小( 宽度与高度)

示例：

<UniformGrid>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
</UniformGrid>

效果图：
在这里插入图片描述

六、Canvas

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

示例：

<Canvas>
    <Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button>
    <Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button>
    <Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button>
    <Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button>
</Canvas>

效果图：
在这里插入图片描述
注意：

  • 如果同时设置 Canvas.Left="50"Canvas.Right=“50”，则以Canvas.Left="50"为准
  • 如果同时设置Canvas.Top=“50” Canvas.Bottom=“50”，则以Canvas.Top ="50"为准

七、ScrollViewer

ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。

属性含义
HorizontalScrollBarVisibility水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility垂直滚动条是否显示 默认为Visible

示例：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Button Content="Button" Width="800" Height="800"></Button>
</ScrollViewer>

效果图：
在这里插入图片描述
注意：

一般我们都会设置 HorizontalScrollBarVisibility=“Auto” VerticalScrollBarVisibility=“Auto”，意思是：当内容超出可视范围时，才显示横向/纵向滚动条。

八、ViewBox

Viewbox的作用是拉伸或延展位于其中的组件，以填满可用空间。在Viewbox中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Viewbox中。然后可以将子控件放置在该控件中。

常用属性：Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间，Stretch默认值为Uniform。

属性值含义
None不进行拉伸，按子元素设置的长宽显示
Uniform按原比例缩放子元素，使得一边不足，另一边恰好填充
Fill缩放子元素，使得子元素的长变为Viewbox的长，宽变为Viewbox的宽
UniformToFill按原比例缩放子元素，使得子元素一边恰好填充，另一边超出Viewbox的区域

示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition>        
        </RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition>    
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">
        <Button Width="100" Height="50" Content="None"></Button>
    </Viewbox>
    <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">
        <Button Width="100" Height="50" Content="Uniform"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">
        <Button Width="100" Height="50" Content="Fill"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
        <Button Width="100" Height="50" Content="UniformToFill"></Button>
    </Viewbox>
</Grid>

效果图：
在这里插入图片描述

九、Border

Border 是一个装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。

属性含义
Background背景色
BorderBrush边框色
BorderThickness边框宽度
CornerRadius各个角，圆的半径

示例：

<Grid>
    <Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0, 2, 4, 6" CornerRadius="0, 10, 20, 30"></Border>
</Grid>

效果图：
在这里插入图片描述

何极光
关注
专栏目录
WPF自定义VirtualizingPanel，实现界面动态布局
10-31
通过自定义扩展VirtualizingPanel，结合ListBox控件，实现了界面布局的灵活配置，支持1*2,1*3，2*2等任何布局方式，并且支持滚动条
总结WPF中的几种布局方法
忧郁的蛋的专栏
03-22 1168
StackPanel Orientation="Horizontal"> 改成水平排列。3. WrapPanel 布局， （ float布局）默认横向填充, 最后一个元素占据整个布局, 居中显示.注意设置: LastChildFill="False"4. DockPanel 停靠 (flex 布局)1. Grid布局 ,(Table 布局)5. Uniform 布局 （Table）默认垂直布局 ，一旦超出区域限制后不限制。2. StackPanel 布局。6. 布局Demo 案例。
WPF—常用控件、属性、事件、详细介绍
最新发布
qq_3517289697的博客
08-16 2746
WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。
WPF的ListView控件自定义布局用法实例
09-02
主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下
WPF学习——布局
Lizhifun
03-23 678
WPF布局 所有WPF布局容器都是派生子System.Windows.Controls.Panel抽象类的面板 Panel类的共有属性： Background,Children,IsItemsHost 核心布局面板：StackPanel、WrapPanel、DockPanel、Grid、UniformGrid、Canvas   一、使用StackPanel布局 StackPanel
WPF 界面布局
12-07
C# WPF中常用的几种布局容器 StackPanel 、Border 、Wrap Panel 、DockPanel
WPF布局
weixin_34033624的博客
12-01 130
概述 学习了下WPF里面的布局，参考书是《WPF揭秘》，以下是笔记 WPF布局 控制尺寸 控制位置 变换（Transform） Panel（面板） 处理内容溢出 布局实例 两步布局过程 WPF布局 布局是WPF界面开发中一个很重要的环节。所谓布局，即确定所有控件的大小和位置，是一种递归进行的父元素（Panel）和子元素交互的过程，为了同时满足父元素和子元素的需要，WP...
WPF入门之布局
小柚子~的博客
08-31 4445
wpf的布局五大类
WPF常用布局
weixin_44587257的博客
06-09 310
WPF中有五个常用布局，分别为：Grid：网格、DockPanel：泊靠式面板、StackPanel：栈式面板、WrapPanel：自动折行面板、Canvas：画布。 Grid网格 特点： １、可以定义任意数量的行和列，非常灵活。 ２、行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最 　　大和最小值。 ３、内部元素可以设置自己所在的行和列，还可以...
WPF中的布局方式
热门推荐
凭时间赢来的东西，时间肯定会为之作证
05-21 13万+
前言:WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面 布局方式: 1.Canvas 2.Grid 3.WarpPanel 4.StackPanel 5.ScrollViewer ......
wpf控件简单布局wpf控件简单布局
09-22
wpf控件简单布局wpf控件简单布局wpf控件简单布局
【愚公系列】2023年10月 WPF+上位机+工业互联 005-常用框架页面布局案例
时光隧道
09-08 4万+
后台框架模板是一种基于特定技术栈及架构思路开发的、可用于快速搭建后台系统的模板。它提供了一系列预定义的功能、UI样式和组件，可以作为开发者快速搭建后台系统的起点。通常情况下，后台框架模板会包含以下组件：用户管理、权限管理、数据管理、统计分析、日志处理等。常见的后台框架模板包括Laravel Admin、Ant Design Pro、vue-element-admin等。WPF是一种Microsoft .NET框架的应用程序开发技术，它提供了一种基于 XAML 语言的创新性的用户界面体验。
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
【愚公系列】2023年10月 WPF+上位机+工业互联 003-扩展布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
【愚公系列】2023年10月 WPF控件专题 ToolBarTray控件详解
时光隧道
08-14 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
【愚公系列】2023年10月 WPF控件专题 TabControl控件详解
时光隧道
08-11 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF入门--常用布局方式
qq_40950398的博客
05-07 1250
主要介绍九种WPF常用的布局格式，包括Grid 、StackPanel 、WrapPanel 、DockPanel 、UniformGrid 、Canvas 、ScrollViewer 、ViewBox 、Border 。
WPF之基础布局
weixin_44548814的博客
04-16 563
开发工具与关键技术：XAML WPF C# 作者：王福驰 撰写时间：2019年4月15日 在WPF中大小字母敏感. WPF中的布局有六种，分别是StackPanel 栈面布局，WrapPanel环绕布局，DockPanel:停靠布局，Canvas：画布布局，Grid网格布局， 我们来简单的学习WPF的五大模块的布局： 一、StackPanel栈面布局，也可以叫栈面板 他有两种形式：第一种是垂直方向...
详细描述wpf常用控件，布局控件，详细描述
07-09
WPF（Windows Presentation Foundation）是一种用于创建Windows应用程序的UI框架，提供了丰富的控件和布局控件，下面是对常用控件和布局控件的详细描述： 常用控件： 1. Button（按钮）：用于触发特定操作或事件，如提交表单、打开对话框等。可以通过设置样式来自定义按钮的外观。 2. TextBox（文本框）：用于接收用户输入的文本信息，如用户名、密码等。支持文本验证、自动完成等功能。 3. Label（标签）：用于显示文本信息，如标题、说明等。可以设置字体、颜色、对齐方式等属性。 4. ComboBox（组合框）：用于选择列表中的一项，可以是预定义选项或自定义输入。可以设置下拉列表展示方式、选中项等。 5. ListBox（列表框）：用于显示列表中的多个项，用户可以选择其中的一项或多项。支持数据绑定和自定义项模板。 6. DataGrid（数据表格）：用于展示和编辑数据集，支持排序、筛选、分组等功能。可以自定义列样式和编辑模式。 7. CheckBox（复选框）：用于选择多个选项中的一个或多个。支持绑定Boolean值，可以设置选中状态和样式。 8. RadioButton（单选按钮）：用于选择多个选项中的一个。可以使用GroupBox进行分组管理，支持绑定枚举值。 9. Slider（滑块）：用于在一个范围内选择一个数值。可以设置最小值、最大值、刻度等属性，支持双向绑定。 10. Image（图片）：用于显示图像文件或其他图形资源。支持设置源文件、缩放模式、透明度等属性。 布局控件： 1. Grid（网格）：最常用的布局控件，将子元素按照行和列的方式排列。可以设置行和列的大小、对齐方式等。 2. StackPanel（堆栈面板）：将子元素按照水平或垂直方向依次排列。支持自动布局和可伸缩性。 3. WrapPanel（自动换行面板）：将子元素按照水平或垂直方向排列，当空间不足时自动换行。适用于流式布局。 4. DockPanel（停靠面板）：将子元素停靠在上、下、左、右或中心位置。支持设置停靠顺序和占位大小。 5. Canvas（画布）：允许通过绝对定位来放置子元素。可以设置子元素的坐标和大小。 6. UniformGrid（均匀网格）：将子元素按照指定的行列数均匀排列。可以设置行数、列数和对齐方式。 7. GridSplitter（网格分隔条）：用于在Grid中调整行和列的大小。可以水平或垂直拖动来调整布局。 以上是WPF中常用的控件和布局控件的详细描述，开发人员可以根据具体需求选择合适的控件和布局方式来设计用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值