1、布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel
Grid——网格布局,其中控件或容器需指定位置
StackPanel——堆叠面板,其中的控件水平布局、竖直布局
DockPanel——停靠面板,内部控件或容器可以放置在上、下、左、右
WrapPanel——可以看作是具有自动换行功能的StackPanel容器。窗体太小时,其末尾的控件会自动换行。像Java中的流布局
布局原则:先整体规划(Grid),再局部规划(Grid、StackPanel等)
如下图,Grid有5行3列,具体布局、控件查看文档大纲
xaml代码
<Window x:Class="DemoWPF61.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:DemoWPF61"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="350">
<Grid >
<!--行定义,5行-->
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<!--剩余高度-->
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<!--列定义,3列-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!--网格的2,3两列放置StackPanel-->
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<!--水平布局,右对齐-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<!--方式1-->
<Button Content="夕西行" Margin="5,0,0,0"/>
<!--方式2-->
<Button Margin="5,0,5,0">我的博客</Button>
</StackPanel>
</Grid>
<!--网格的1列2行放置Image,默认居中对齐-->
<Grid Grid.Column="0" Grid.Row="1">
<Image Source="C:/Users/Jv/Desktop/lena512.tiff"/>
</Grid>
<!--网格的1~3列放置StackPanel-->
<Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">
<!--水平布局,默认左对齐-->
<StackPanel Orientation="Horizontal">
<Button Margin="5,0,0,0">园子</Button>
<Button Margin="5,0,0,0">新闻</Button>
<Button Margin="5,0,0,0">博问</Button>
</StackPanel>
</Grid>
<Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
<!--左右居中,上下居中-->
<Label Content="第4行,占三列" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Margin="5,0,0,0">关于我们</Button>
<Button Margin="5,0,0,0">联系我们</Button>
<Button Margin="5,0,0,0">广告服务</Button>
<Button Margin="5,0,0,0">人才服务</Button>
<Button Margin="5,0,0,0">版权</Button>
</StackPanel>
</Grid>
</Grid>
</Window>
【GroupBox】GroupBox内只能有一个元素,可用StackPanel承载多个控件
布局、控件如图所示
<Window x:Class="DemoWPF61.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:DemoWPF61"
mc:Ignorable="d"
Title="MainWindow" Height="190" Width="200">
<!--StackPanel纵向布局,纵向对齐方式:底对齐-->
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" >
<!--GroupBox内只能有一个元素,StackPanel来承载更多的控件-->
<GroupBox Header="网站分类">
<!--StackPanel内,纵向布局-->
<StackPanel Orientation="Vertical">
<Button Content=".NET技术(16)"/>
<Button Content="编程语言(13)"/>
</StackPanel>
</GroupBox>
<GroupBox Header="链接">
<StackPanel Orientation="Vertical">
<Button Content="反馈和建议"/>
<Button Content="官方博客"/>
</StackPanel>
</GroupBox>
</StackPanel>
</Window>
【DockPanel】
<Window x:Class="DemoWPF61.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:DemoWPF61"
mc:Ignorable="d"
Title="MainWindow" Height="150" Width="230">
<DockPanel>
<StackPanel DockPanel.Dock="Top" >
<Label Content="StackPanel停靠在DockPanel的上边"/>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom" Height="20">
</StackPanel>
<StackPanel DockPanel.Dock="Left" Width="30">
</StackPanel>
<StackPanel DockPanel.Dock="Right" Width="30"/>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Label Content=" 中间地带,是我的天下" />
</StackPanel>
</DockPanel>
</Window>
【WrapPanel】可以看作是具有自动换行功能的StackPanel容器。默认从左到右排列。
左图最后一个Button的高度会变成最小尺寸。Orientation="Vertical"得到右图(默认水平布局)
<Window x:Class="DemoWPF61.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:DemoWPF61"
mc:Ignorable="d"
Title="MainWindow" Height="150" Width="209.199">
<WrapPanel Margin="3">
<Button Content="Top" VerticalAlignment="Top"/>
<Button Content="Bottom" VerticalAlignment="Bottom"/>
<Button Content="靠我撑大" MinHeight="40"/>
<Button Content="Center" VerticalAlignment="Center"/>
<Button Content="无对齐方式"/>
</WrapPanel>
</Window>
1、布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel的更多相关文章
- C# - VS2019页面布局容器splitContainer和groupBox小结
前言 在WinFrm应用程序中,产品的外观.布局将直接影响用户第一体验,所以对于开发者来说,在没有美工支持的前提下,应当注意系统页面的布局,本章主要讲解splitContainer和groupBox的 ...
- WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
- ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」
原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...
- 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid
原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...
- 学习WPF——WPF布局——初识布局容器
StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- WPF布局容器
1.StackPanel:堆栈面板,通过Orientation属性设置子元素的布局排列方向为“Vertical”(垂直)和“Horizontal”(水平),不写其默认值为“Vertical”,当设置为 ...
随机推荐
- aliyun挂载oss
配置 oss 挂载 阿里云 ecs 按照ossfs工具:yum install http://gosspublic.alicdn.com/ossfs/ossfs_1.80.5_centos6.5_x8 ...
- Logger Rate Limiter
Design a logger system that receive stream of messages along with its timestamps, each message shoul ...
- Linx
1. 2. 2. 3. 5. Vi 猜数字 第二十个裴伯拉数字 1 1 2 3 5 8 2 3 求小于3000的裴伯拉数列 4 5 递归方式1到100 和 6 7 100 以内奇数.偶数和 8 Sss ...
- Sublime Text 3 注册激活码
Sublime Text 3 注册激活码 ----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F15 ...
- CSUST 2012 一个顶俩 (本校OJ题)(思维+树链剖分)
(点击这里查看原题,不保证可以进去....外网可能比较卡) Description A:一心一意 B:一个顶俩 最近QQ更新后那个成语接龙好像挺火的?但我只知道图论里一条边是一个顶俩个点的emm. 如 ...
- GitHub从小白到熟悉<二>
创建 仓库
- 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)
目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...
- C++ 多态、虚函数(virtual 关键字)、静态联编、动态联编
函数重写:(在子类中重写父类中的函数) 父类中被重写的函数 依然会继承 给子类. 子类中重写的函数将覆盖父类中的函数. 通过作用域分辨符 :: 可以访问到父类中的函数. 例如: #includ ...
- java之设计模式汇总
1.单例模式 就是一个类只产生一个对象 对应数据库连接 定时执行者服务(ScheduledExecutorService) 在整个项目中应该只有一个对象 2.工厂模式 定义一个用于创建对象的接口 让子 ...
- linux环境下tomcat启动成功,部分请求页面出现404
这种情况很多,本文记录我遇到比较奇葩的情况. 第一种情况: 第一次tomact启动成功,访问404,乱捣鼓不知怎么好了:第二次tomcat启动成功,可以访问部分链接,有些却报404,但是代码和数据都还 ...