WPF技术之控件布局

简介: WPF提供了多种布局控件和技术,可以帮助开发人员轻松创建灵活的用户界面。

1.控件类型

  • Grid(网格布局):

Grid是WPF中最常用的布局控件之一,它允许开发人员将元素以网格的形式进行排列。Grid可以在行和列的交叉点位置放置控件,并通过指定行号和列号进行定位。可以使用Grid.Row和Grid.Column属性来指定控件在网格中的位置,还可以设置Grid.RowSpan和Grid.ColumnSpan属性来控制控件跨越多个行或列。

  • StackPanel(堆栈布局):

StackPanel将元素以垂直或水平的堆栈方式进行排列。可以通过设置StackPanel的Orientation属性来指定排列方式。StackPanel会按照添加元素的顺序依次排列,当空间不足时,可以设置StackPanel的可滚动性或使用自动换行。

  • WrapPanel(自动换行布局):

WrapPanel将元素以自动换行的方式进行排列。当空间不足时,WrapPanel会自动将元素放置到下一行。可以通过设置WrapPanel的Orientation属性来指定排列方向(水平或垂直)。

  • DockPanel(停靠布局):

DockPanel允许开发人员将元素停靠在容器的不同区域(顶部、底部、左侧、右侧、中间等)。通过设置DockPanel的Dock属性来指定控件停靠的位置。

  • UniformGrid(均匀网格布局):

UniformGrid将元素以均匀的网格方式进行排列。可以通过设置UniformGrid的行数和列数来控制网格的大小和形状。

Canvas(面板)

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

2.Grid

标签 含义
ShowGridLines 可以设置行业的边距线的显示
Grid. RowDefinitions 可以创建任意行, 进行固定高度与百分比高度设置
Grid. ColumnDefinitions 可以创建任意列, 进行固定宽度与百分宽度设置
<Grid><Grid.RowDefinitions><RowDefinitionHeight="*"/><RowDefinitionHeight="1*"/><RowDefinitionHeight="2*"/><RowDefinitionHeight="50"/><RowDefinitionHeight="auto"/></Grid.RowDefinitions><RectangleGrid.Row="0"Fill="Gray"/><RectangleGrid.Row="1"Fill="Red"/><RectangleGrid.Row="2"Fill="Blue"/><RectangleGrid.Row="3"Fill="Green"/><RectangleGrid.Row="4"Height="50"Fill="Black"/></Grid>

image.png

3.StackPanel控件

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

FlowDirection

排列方向,默认从左向右

<StackPanelFlowDirection="RightToLeft"Orientation="Horizontal"><RectangleWidth="100"Height="100"Fill="Red"/><RectangleWidth="100"Height="100"Fill="Blue"/><RectangleWidth="100"Height="100"Fill="Green"/></StackPanel>

image.png

4.WrapPanel控件

属性 含义
Orientation

用于设置WrapPanel的元素排列方式。

<WrapPanelOrientation="Horizontal"><RectangleWidth="200"Height="100"Fill="Red"/><RectangleWidth="200"Height="100"Fill="Blue"/><RectangleWidth="200"Height="100"Fill="Green"/></WrapPanel>

image.png

5.DockPanel

属性 含义

LastChildFill

器中的最后一个元素时, 默认该元素填充DockPanel所有空间, 默认值为True

<DockPanelLastChildFill="False"><RectangleWidth="100"Height="100"DockPanel.Dock="Left"Fill="Red"/><RectangleWidth="100"Height="100"DockPanel.Dock="Top"Fill="Blue"/><RectangleWidth="100"Height="100"DockPanel.Dock="Right"Fill="Green"/><RectangleWidth="100"Height="100"DockPanel.Dock="Bottom"Fill="Black"/></DockPanel>

image.png

5.UniformGrid控件

属性 含义
Columns 布局列数
Rows 布局行数


<UniformGridColumns="3"Rows="2"><RectangleWidth="100"Height="100"DockPanel.Dock="Left"Fill="Red"/><RectangleWidth="100"Height="100"DockPanel.Dock="Top"Fill="Blue"/><RectangleWidth="100"Height="100"DockPanel.Dock="Right"Fill="Green"/><RectangleWidth="100"Height="100"DockPanel.Dock="Bottom"Fill="Black"/></UniformGrid>

image.png

6.Canvas控件

属性 含义

Left

从左偏移

Top

从上偏移

Right

从右偏移

Bottom

从下偏移

<Canvas><RectangleCanvas.Left="50"Width="100"Height="100"Fill="Red"/><RectangleCanvas.Top="50"Width="100"Height="100"Fill="Blue"/><RectangleCanvas.Right="50"Width="100"Height="100"Fill="Green"/><RectangleCanvas.Bottom="50"Width="100"Height="100"Fill="Black"/></Canvas>

image.png

目录
相关文章
|
7月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
390 0
|
4月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
249 1
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
4月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
4月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
196 1
|
4月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
73 0
|
4月前
|
C# Windows 开发者
当WPF遇见OpenGL:一场关于如何在Windows Presentation Foundation中融入高性能跨平台图形处理技术的精彩碰撞——详解集成步骤与实战代码示例
【8月更文挑战第31天】本文详细介绍了如何在Windows Presentation Foundation (WPF) 中集成OpenGL,以实现高性能的跨平台图形处理。通过具体示例代码,展示了使用SharpGL库在WPF应用中创建并渲染OpenGL图形的过程,包括开发环境搭建、OpenGL渲染窗口创建及控件集成等关键步骤,帮助开发者更好地理解和应用OpenGL技术。
267 0
|
4月前
|
开发者 C# 容器
【独家揭秘】当WPF邂逅DirectX:看这两个技术如何联手打造令人惊艳的高性能图形渲染体验,从环境搭建到代码实践,一步步教你成为图形编程高手
【8月更文挑战第31天】本文通过代码示例详细介绍了如何在WPF应用中集成DirectX以实现高性能图形渲染。首先创建WPF项目并使用SharpDX作为桥梁,然后在XAML中定义承载DirectX内容的容器。接着,通过C#代码初始化DirectX环境,设置渲染逻辑,并在WPF窗口中绘制图形。此方法适用于从简单2D到复杂3D场景的各种图形处理需求,为WPF开发者提供了高性能图形渲染的技术支持和实践指导。
238 0
|
4月前
|
C# 开发者 Windows
WPF遇上Office:一场关于Word与Excel自动化操作的技术盛宴,从环境搭建到代码实战,看WPF如何玩转文档处理的那些事儿
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的重要组件,以其强大的图形界面和灵活的数据绑定功能著称。本文通过具体示例代码,介绍如何在 WPF 应用中实现 Word 和 Excel 文档的自动化操作,包括文档的读取、编辑和保存等。首先创建 WPF 项目并设计用户界面,然后在 `MainWindow.xaml.cs` 中编写逻辑代码,利用 `Microsoft.Office.Interop` 命名空间实现 Office 文档的自动化处理。文章还提供了注意事项,帮助开发者避免常见问题。
251 0
|
4月前
|
C# UED 开发者
WPF打印功能实现秘籍:从页面到纸张,带你玩转WPF打印技术大揭秘!
【8月更文挑战第31天】在WPF应用开发中,打印功能至关重要,不仅能提升用户体验,还增强了应用的实用性。本文介绍WPF打印的基础概念与实现方法,涵盖页面元素打印、打印机设置及打印预览。通过具体案例,展示了如何利用`PrintDialog`和`PrintDocument`控件添加打印支持,并使用`PrinterSettings`类进行配置,最后通过`PrintPreviewWindow`实现打印预览功能。
363 0