C# WPF:初识布局容器
StackPanel堆叠布局
StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>
如果要横向布局的话,只要把StackPanel的Orientation属性设置成Horizontal即可
这个属性的默认值是Vertical
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel Orientation="Horizontal"> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Button Content="按钮"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>
WrapPanel包裹布局
在WrapPanel面板中的元素以一次一行或一列的方式布局控件
WrapPanel也有Orientation属性,但与StackPanel不同的是,WrapPanel的Orientation属性的默认值是Horizontal
也就是说WrapPanel的默认展现方向是横向的
WrapPanel与StackPanel另一个不同的地方是,当容器实际宽度不够的情况下,内容将以多行或者多列的形式展现
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> </WrapPanel> </Window>
WrapPanel的纵向展现方式
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel Orientation="Vertical"> <Button Content="allen1"></Button> <Button Content="allen2"></Button> <Button Content="allen3"></Button> <Button Content="allen4"></Button> <Button Content="allen5"></Button> <Button Content="allen6"></Button> <Button Content="allen7"></Button> <Button Content="allen8"></Button> <Button Content="allen9"></Button> <Button Content="allen10"></Button> </WrapPanel> </Window>
DockPanel停靠布局
这种布局把布局容器分为上、下、左、右四个边缘,容器内的元素沿着某一个边缘来拉伸自己
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <DockPanel> <!--沿着上边缘拉伸--> <Button Content="Top" DockPanel.Dock="Top"></Button> <!--沿着下边缘拉伸--> <Button Content="Bottom" DockPanel.Dock="Bottom"></Button> <!--沿着左边缘拉伸--> <Button Content="Left" DockPanel.Dock="Left"></Button> <!--沿着右边缘拉伸--> <Button Content="Right" DockPanel.Dock="Right"></Button> <!--默认沿着左边缘拉伸--> <Button Content="allen5"></Button> <!--默认沿着左边缘拉伸--> <Button Content="allen6"></Button> <!--最后一个元素默认填充满整个容器剩余的空间--> <Button Content="默认最后一个自适应"></Button> </DockPanel> </Window>
Grid表格布局
Grid布局容器可以把空间分割成多行多列,用以摆放不同的控件
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Grid> <!--定义两行--> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <!--定义三列--> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <!--Grid.Row或 Grid.Column的默认值为0--> <Button Content="默认在第一行第一列且填充"></Button> <!--如果我把Grid.Row的值设置成2,因为没有第三行,所以按钮会自动被放在最后一行,仍然是第二行--> <Button Grid.Row="1" Grid.Column="1" Content="第二行第二列"></Button> </Grid> </Window>
Canvas画布布局
Canvas画布布局容器允许使用精确的坐标来摆放画布内的元素
如果两个元素共用了同一块区域,那么后设置的元素将覆盖先设置的元素
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Canvas> <Button Canvas.Left="100" Canvas.Top="100" Content="第一个按钮"></Button> <Button Canvas.Left="136" Canvas.Top="112" Content="第二个按钮"></Button> </Canvas> </Window>
Window窗口
窗口是容纳所有WPF界面元素的最初容器,任何的界面元素都要放在Window窗口内才能呈现
WPF窗口只能包含一个儿子控件,这是因为Window类继承自ContentControl类。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--你不能在这里放置多个同级元素--> </Window>
ContentControl就是我们常说的内容控件,这种控件与容器控件(Grid或StackPanel)不同,
内容控件的顶级子元素只能有一个,容器控件可以包含多个顶级子元素
如果我们想要在一个ContentControl内展示多个子控件,
我们可以先放置一个容器控件作为内容控件的顶级子元素,然后再在此容器控件中放置更多的控件
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Button" /> <Button Content="Button" /> </Grid> </Window>
C# WPF:初识布局容器相关推荐
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- 学习WPF——WPF布局——了解布局容器
WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...
- WPF代码模板-布局部分
Grid 两行和三列 <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition ...
- (转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
- WPF 项目开发入门(二) WPF 页面布局
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
- WPF-常用布局容器
名称 描述 StackPanel 在水平或垂直的堆栈中放置元素,通常应用于一个复杂的布局中的一小块区域 WrapPanel 在一系列可换行(列)的行中放置元素,支持水平.垂直方向,一行(列)放不下自动 ...
- 002_Container布局容器
1. Container布局容器 1.1. Container布局容器是用于布局的容器组件, 方便快速搭建页面的基本结构. 1.2. <el-container>外层容器.当子元素中包含& ...
- ElementUI Container布局容器
ElementUI介绍 常用组件 container布局容器
最新文章
- 我是如何在天猫、蚂蚁金服、百度等大厂面试中被拒的 | 掘金技术征文
- 设置Button控件创建完毕时触发的事件.
- Makefile的伪目标
- Oracle的关系运算
- oracle 如何显示 比例,Oracle中如何兼得比例和时间
- 关于RTP时间戳及多媒体通信同步的问题/H264关于RTP协议的实现
- 第七章 假设检验(3)
- 推荐系统的常用算法概述
- 用JS实现图片模糊到清晰预加载效果
- Adobe Dreamweaver CS6(或者CC 2018.2 SP)安装失败解决方案
- 用python 数据分析,有推荐的书籍或资料吗?
- RPGMakerMV学习笔记(二)—— 制作第一个RPG游戏
- Python - 装机系列2 Ubuntu(云)
- 关于Spring容器中定时器到时执行会出现两个线程同时执行的问题
- pn532检测不到nfc设备_华为、小米又增回NFC功能,苹果却一直无NFC功能,NFC能否成为关键?...
- 有一台服务器可以做哪些很酷的事情
- 基于Android Tiny4412平台---敦泰I2C接口FT5X06电容屏驱动原理及软件架构分析
- 第3.1章:StarRocks数据导入--Insert into
- [统计学理论基础] 方差 协方差 标准差
- 电子商务系统的运维与评价(十三)