WPF基本布局基础

devtools/2025/2/25 7:30:20/

一. Grid

  • 描述: Grid 是WPF中最常用的布局容器之一。它允许你通过定义行和列来创建一个灵活的网格布局。子元素可以放置在特定的行和列中，并且可以跨越多行或多列。

  • 特点:

    • 支持行和列的定义，可以设置行高和列宽。

    • 支持子元素的绝对定位和相对定位。

    • 适合复杂的布局需求。

  • 常用属性RowDefinitions, ColumnDefinitions, Grid.Row, Grid.Column, Grid.RowSpan, Grid.ColumnSpan

作用：

  • RowDefinitions 和 ColumnDefinitions: 定义 Grid 的行和列。

  • Grid.Row 和 Grid.Column: 指定子元素在 Grid 中的位置。

  • Grid.RowSpan 和 Grid.ColumnSpan: 指定子元素跨越的行数或列数。

示例：

    <Grid><!-- 定义3行 --><Grid.RowDefinitions><RowDefinition Height="50"/> <!-- 第一行高度为50 --><RowDefinition Height="*"/>  <!-- 第二行高度为剩余空间 --><RowDefinition Height="2*"/> <!-- 第三行高度为第二行的两倍 --></Grid.RowDefinitions><!-- 定义3列 --><Grid.ColumnDefinitions><ColumnDefinition Width="100"/> <!-- 第一列宽度为100 --><ColumnDefinition Width="*"/>   <!-- 第二列宽度为剩余空间 --><ColumnDefinition Width="2*"/>  <!-- 第三列宽度为第二列的两倍 --></Grid.ColumnDefinitions><!-- 第一行第一列 --><Border Background="Red" Grid.Row="0" Grid.Column="0" /><!-- 第一行第二列，跨越两列 --><Border Background="Green" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/><!-- 第二行第一列，跨越两行 --><Border Background="Yellow" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"/><!-- 第二行第二列 --><Border Background="Blue" Grid.Row="1" Grid.Column="1"/><!-- 第三行第三列 --><Border Background="Black" Grid.Row="2" Grid.Column="2"/>

结果：

二. StackPanel

  • 描述: StackPanel 是一个简单的布局容器，它将子元素按照水平或垂直方向依次排列。

  • 特点:

    • 子元素按照顺序排列，不会自动换行。

    • 适合简单的线性布局。

  • 常用属性: Orientation（决定排列方向，Horizontal 或 Vertical）。

作用：

  • Horizontal: 子元素从左到右水平排列。

  • Vertical: 子元素从上到下垂直排列

示例：

（1）水平排列 (Orientation="Horizontal")

当 Orientation 设置为 Horizontal 时，StackPanel 中的子元素会从左到右依次排列。

<StackPanel Orientation="Horizontal"><Button Content="Button 1" Width="80" Height="30"/><Button Content="Button 2" Width="80" Height="30"/><Button Content="Button 3" Width="80" Height="30"/>
</StackPanel>

结果：

示例：

（2） 垂直排列 (Orientation="Vertical")

当 Orientation 设置为 Vertical 时，StackPanel 中的子元素会从上到下依次排列。

<StackPanel Orientation="Vertical"><Button Content="Button 1" Width="80" Height="30"/><Button Content="Button 2" Width="80" Height="30"/><Button Content="Button 3" Width="80" Height="30"/>
</StackPanel>

结果：

示例：

（3）动态切换排列方向

可以通过绑定或代码动态改变 Orientation 的值，从而实现排列方向的动态切换。

 xaml:<StackPanel><StackPanel Grid.Row="0" Grid.Column="0" x:Name="stackPanel" Orientation="Horizontal" ><Button Content="Button 1" Width="80" Height="30"/><Button Content="Button 2" Width="80" Height="30"/><Button Content="Button 3" Width="80" Height="30"/></StackPanel><Button  Content="转换" Click="ToggleOrientation" Margin="10"/>
</StackPanel>C#:private void ToggleOrientation(object sender, RoutedEventArgs e){if (stackPanel.Orientation == Orientation.Horizontal){stackPanel.Orientation = Orientation.Vertical;}else{stackPanel.Orientation = Orientation.Horizontal;}}

结果：

 三.  DockPanel

  • 描述: DockPanel 允许子元素停靠在容器的边缘（上、下、左、右）或填充剩余空间。

  • 特点:

    • 子元素可以通过 DockPanel.Dock 属性指定停靠位置。

    • 最后一个子元素可以填充剩余空间。

    • 适合需要将控件停靠在窗口边缘的布局。

  • 常用属性: DockPanel.Dock。

示例：

（1）DockPanel 可以用于创建复杂的布局，例如带有标题栏、工具栏、状态栏和内容区域的窗口布局。

    <DockPanel><!-- 标题栏 --><Border DockPanel.Dock="Top" Background="LightBlue" Height="30"><TextBlock Text="标题栏" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><!-- 工具栏 --><Border DockPanel.Dock="Top" Background="LightGreen" Height="30"><TextBlock Text="工具栏" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><!-- 状态栏 --><Border DockPanel.Dock="Bottom" Background="LightCoral" Height="30"><TextBlock Text="状态栏" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><!-- 侧边栏 --><Border DockPanel.Dock="Left" Background="LightYellow" Width="100"><TextBlock Text="侧边栏" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><!-- 内容区域 --><Border Background="LightGray"><TextBlock Text="内容区域" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border></DockPanel>

结果：

（2） DockPanel.Dock 将子元素停靠在不同的位置，并通过代码动态调整子元素的停靠位置。

    <StackPanel><DockPanel x:Name="dockPanel"><Button Content="顶部" DockPanel.Dock="Top" Height="50" Background="LightBlue"/><Button Content="底部" DockPanel.Dock="Bottom" Height="50" Background="LightGreen"/><Button Content="左边" DockPanel.Dock="Left" Width="100" Background="LightCoral"/><Button Content="右边" DockPanel.Dock="Right" Width="100" Background="LightYellow"/><Button Content="全充" Background="LightGray"/></DockPanel><Button Content="切换 Dock" Click="ToggleDock" Margin="10" Height="80" Width="150"/></StackPanel>
        // 切换停靠位置的事件处理函数private void ToggleDock(object sender, RoutedEventArgs e){var button = dockPanel.Children[0] as Button;if (button != null){if (DockPanel.GetDock(button) == Dock.Top){DockPanel.SetDock(button, Dock.Bottom);}else{DockPanel.SetDock(button, Dock.Top);}}}

 四. WrapPanel

  • 描述: WrapPanel 将子元素按顺序排列，当空间不足时自动换行。

  • 特点:

    • 子元素按水平或垂直方向排列，并在空间不足时自动换行。

    • 适合需要自动换行的布局。

  • 常用属性: Orientation（决定排列方向，Horizontal 或 Vertical）。

示例：

（1）水平排列 (Orientation="Horizontal")

<WrapPanel Orientation="Horizontal"><Button Content="Button 1" Width="100" Height="30" Margin="5"/><Button Content="Button 2" Width="100" Height="30" Margin="5"/><Button Content="Button 3" Width="100" Height="30" Margin="5"/><Button Content="Button 4" Width="100" Height="30" Margin="5"/><Button Content="Button 5" Width="100" Height="30" Margin="5"/><Button Content="Button 6" Width="100" Height="30" Margin="5"/>
</WrapPanel>

结果：

（2）垂直排列 (Orientation="Vertical")

    <WrapPanel Orientation="Vertical" Margin="0,0,100,260"><Button Content="Button 1" Width="100" Height="30" Margin="5"/><Button Content="Button 2" Width="100" Height="30" Margin="5"/><Button Content="Button 3" Width="100" Height="30" Margin="5"/><Button Content="Button 4" Width="100" Height="30" Margin="5"/><Button Content="Button 5" Width="100" Height="30" Margin="5"/><Button Content="Button 6" Width="100" Height="30" Margin="5"/></WrapPanel>

 结果：

（3）动态切换排列方向

    <StackPanel><!-- WrapPanel 用于演示排列方向 --><WrapPanel x:Name="wrapPanel" Orientation="Horizontal" Margin="10"><Button Content="Button 1" Width="100" Height="30" Margin="5"/><Button Content="Button 2" Width="100" Height="30" Margin="5"/><Button Content="Button 3" Width="100" Height="30" Margin="5"/><Button Content="Button 4" Width="100" Height="30" Margin="5"/><Button Content="Button 5" Width="100" Height="30" Margin="5"/><Button Content="Button 6" Width="100" Height="30" Margin="5"/></WrapPanel><!-- 切换排列方向的按钮 --><Button Content="切换排列方向" Click="ToggleOrientation" Margin="10"/></StackPanel>
        private void ToggleOrientation(object sender, RoutedEventArgs e){if (wrapPanel.Orientation == Orientation.Horizontal){wrapPanel.Orientation = Orientation.Vertical;}else{wrapPanel.Orientation = Orientation.Horizontal;}}

 结果：

五. Canvas

  • 描述: Canvas是一个绝对定位的布局容器，子元素通过指定相对于Canvas左上角的坐标来定位。

  • 特点:

    • 子元素通过 Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom 属性进行绝对定位。

    • 适合需要精确控制元素位置的布局。

  • 常用属性: Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom。

示例：

Canvas.Left: 指定子元素左边缘与 Canvas 左边缘的距离。

Canvas.Top: 指定子元素上边缘与 Canvas 上边缘的距离。

Canvas.Right: 指定子元素右边缘与 Canvas 右边缘的距离。

Canvas.Bottom: 指定子元素下边缘与 Canvas 下边缘的距离。

这些属性可以单独使用，也可以组合使用，以实现精确的定位。

    <Canvas Width="300" Height="200" Background="LightGray" Margin="150,122,150,123"><!-- 定位左上角从 (0, 0) 开始 --><Button Content="Button 1" Canvas.Left="0" Canvas.Top="0" Width="80" Height="30"/><!-- 定位左上角从 中心点(150, 100) 开始 --><Button Content="Button 2" Canvas.Left="150" Canvas.Top="100" Width="80" Height="30"/><!-- 定位右下角从 (0, 0) 开始 --><Button Content="Button 3" Canvas.Right="0" Canvas.Bottom="0" Width="80" Height="30"/></Canvas>

结果：

六.  UniformGrid

  • 描述: UniformGrid 是一个简单的网格布局容器，所有单元格的大小相同。

  • 特点:

    • 所有行和列的大小相同。

    • 适合需要均匀分布的布局。

  • 常用属性: Rows, Columns。

示例：

(1)使用 Rows 和 Columns 定义一个 2 行 3 列的 UniformGrid

<UniformGrid Rows="2" Columns="3"><Button Content="Button 1"/><Button Content="Button 2"/><Button Content="Button 3"/><Button Content="Button 4"/><Button Content="Button 5"/><Button Content="Button 6"/>
</UniformGrid>

结果：

(2)动态设置行数和列数

    <StackPanel><!-- UniformGrid 用于演示布局 --><UniformGrid x:Name="uniformGrid" Rows="2" Columns="3"><Button Content="Button 1"/><Button Content="Button 2"/><Button Content="Button 3"/><Button Content="Button 4"/><Button Content="Button 5"/><Button Content="Button 6"/></UniformGrid><!-- 动态设置行数和列数的按钮 --><Button Content="改变布局" Click="ChangeLayout" Margin="10"/></StackPanel>
        private void ChangeLayout(object sender, RoutedEventArgs e){if (uniformGrid.Rows == 2 && uniformGrid.Columns == 3){uniformGrid.Rows = 3;uniformGrid.Columns = 2;}else{uniformGrid.Rows = 2;uniformGrid.Columns = 3;}}

结果：

 

(3)   结合其他布局容器

 UniformGrid 可以与其他布局容器（如 StackPanel、DockPanel 等）结合使用，以实现更复杂的布局。

<DockPanel><!-- 标题栏 --><Border DockPanel.Dock="Top" Background="LightBlue" Height="30"><TextBlock Text="标题栏" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><!-- 内容区域 --><UniformGrid Rows="2" Columns="2"><Button Content="Button 1"/><Button Content="Button 2"/><Button Content="Button 3"/><Button Content="Button 4"/></UniformGrid>
</DockPanel>

结果：


http://www.ppmy.cn/devtools/161524.html

相关文章

让网页“浪“起来：打造会呼吸的波浪背景

让网页“浪“起来：打造会呼吸的波浪背景

每次打开那些让人眼前一亮的网页时&#xff0c;你是否有注意到那些看似随波逐流的动态背景&#xff1f;今天咱们不聊高深的技术&#xff0c;就用最朴素的CSS&#xff0c;来解锁这个让页面瞬间鲜活的秘籍。无需JavaScript&#xff0c;不用复杂框架&#xff0c;准备好一杯咖啡&am…
阅读更多...
云原生周刊：云原生和 AI

云原生周刊：云原生和 AI

开源项目推荐 FlashMLA DeepSeek 于北京时间 2025 年 2 月 24 日上午 9 点正式开源了 FlashMLA 项目。FlashMLA 是专为 NVIDIA Hopper 架构 GPU&#xff08;如 H100、H800&#xff09;优化的高效多头潜在注意力&#xff08;MLA&#xff09;解码内核&#xff0c;旨在提升大模型…
阅读更多...
SSL和TLS：深入了解网络安全的基石

SSL和TLS：深入了解网络安全的基石

随着数据泄露和网络攻击事件的频繁发生&#xff0c;保护个人信息和敏感数据的需求愈发迫切。其中&#xff0c;SSL&#xff08;安全套接层&#xff09;和TLS&#xff08;传输层安全协议&#xff09;技术作为网络安全的重要组成部分&#xff0c;扮演了至关重要的角色。COCOSSL将通…
阅读更多...
DeepSeek 接入PyCharm实现AI编程！（支持本地部署DeepSeek及官方DeepSeek接入）

DeepSeek 接入PyCharm实现AI编程！（支持本地部署DeepSeek及官方DeepSeek接入）

前言 在当今数字化时代&#xff0c;AI编程助手已成为提升开发效率的利器。DeepSeek作为一款强大的AI模型&#xff0c;凭借其出色的性能和开源免费的优势&#xff0c;成为许多开发者的首选。今天&#xff0c;就让我们一起探索如何将DeepSeek接入PyCharm&#xff0c;实现高效、智…
阅读更多...
深入剖析 Java Pinpoint：分布式系统性能分析的利器

深入剖析 Java Pinpoint：分布式系统性能分析的利器

在当今分布式系统广泛应用的技术环境下&#xff0c;确保系统的高性能和稳定性成为了开发与运维工作的核心挑战。Java Pinpoint作为一款强大的分布式系统性能分析工具&#xff0c;以其独特的设计和丰富的功能&#xff0c;为开发者和运维人员提供了全面的性能监控与故障排查解决方…
阅读更多...
《论面向对象的建模及应用》审题技巧 - 系统架构设计师

《论面向对象的建模及应用》审题技巧 - 系统架构设计师

论面向对象的建模及应用写作框架 一、考点概述 本论题“论面向对象的建模及应用”主要考察软件测试工程师对面向对象建模技术的理解和应用能力。具体涵盖以下几个方面&#xff1a; 面向对象建模的基本概念 &#xff1a;这包括理解面向对象编程&#xff08;OOP&#xff09;的基…
阅读更多...
MapTRv2 论文学习

MapTRv2 论文学习

论文链接&#xff1a;https://arxiv.org/abs/2308.05736 代码链接&#xff1a;https://github.com/hustvl/MapTR 解决了什么问题&#xff1f; 高精地图是为自动驾驶特别设计的高分辨率地图&#xff0c;包括实例级地图元素&#xff08;人行横道、车道分隔线、路缘、中线等&…
阅读更多...
Redis 基本数据类型及其适用场景与案例

Redis 基本数据类型及其适用场景与案例

Redis 基本数据类型及其适用场景与案例 Redis 提供了多种数据类型&#xff0c;每种数据类型都有其特定的使用场景。以下是对每种数据类型的详细解释、适用场景以及使用 Spring Boot 实现的案例。 1. String&#xff08;字符串&#xff09; 特点&#xff1a;最基本的数据类型…
阅读更多...
最新文章

Copyright @ 2022~2023