WPF 入门笔记之布局
一、布局原则:
1. 不应显示的设定元素的尺寸,反而元素可以改变它的尺寸,并适应它们的内容
2. 不应使用平布的坐标,指定元素的位置。
3. 布局容器和它的子元素是共享可以使用的空间
4. 可以嵌套的使用布局容器
二、布局容器
2.1 StackPanel:堆栈面板
堆栈面板的Orientation="Vertical"属性和子元素HorizontalAlignment属性一起使用,反之Orientation="Vertical"属性和子元素HorizontalAlignment一起使用
前者Orientation="Vertical"垂直排列,后者Orientation="Horizontal"水平排列
<Window x:Class="Haos.WPF.Case.Layout.StackPanelWindow"
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:Haos.WPF.Case.Layout"
mc:Ignorable="d"
Title="堆栈面板" Height="120" Width="300">
<!--Orientation="Horizontal"-->
<StackPanel Height="auto" Orientation="Vertical">
<Button Content="button" Name="btn_1" HorizontalAlignment="Left"></Button>
<Button Content="button" Name="btn_2" HorizontalAlignment="Center"></Button>
<Button Content="button" Name="btn_3" HorizontalAlignment="Right"></Button>
<Button Content="button" Name="btn_4" HorizontalAlignment="Stretch"></Button>
</StackPanel>
</Window>
2.2 WrapPanel:一行或一列进行排列
前者Orientation="Horizontal"水平排列,后者Orientation="Vertical"垂直排列.
<Window x:Class="Haos.WPF.Case.Layout.WrapPanelWindow"
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:Haos.WPF.Case.Layout"
mc:Ignorable="d"
Title="WrapPanel" Height="300" Width="300">
<!--Orientation="Vertical"-->
<WrapPanel Orientation="Horizontal">
<!--HorizontalAlignment="Left"-->
<Button Content="button" Name="btn_1" VerticalAlignment="Top"></Button>
<Button Content="button" Height="100" Name="btn_2" VerticalAlignment="Center"></Button>
<Button Content="button" Name="btn_3" VerticalAlignment="Stretch"></Button>
<Button Content="button" Name="btn_4" VerticalAlignment="Bottom"></Button>
</WrapPanel>
</Window>
2.3 DockPanel:顺着外边缘来拉伸所包含的控件
LastChildFill = "True"表示最后一个子元素是否填充满剩余区域
<Window x:Class="Haos.WPF.Case.Layout.DockPanelWindow"
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:Haos.WPF.Case.Layout"
mc:Ignorable="d"
Title="DockPanel" Height="200" Width="300">
<DockPanel LastChildFill="True">
<Button Content="button" Name="btn_1" DockPanel.Dock="Left"></Button>
<Button Content="button" Name="btn_2" DockPanel.Dock="Top"></Button>
<Button Content="button" Name="btn_3" DockPanel.Dock="Right"></Button>
<Button Content="button" Name="btn_4" DockPanel.Dock="Bottom"></Button>
<Button Content="button" Name="btn_5"></Button>
</DockPanel>
</Window>
2.4 Grid:网格布局(WPF中功能最强大的布局容器)
2.4.1 Grid 的使用
ShowGridLines="True" 开启Grid的分格线
Grid.Row="0" 设置子元素在那一行
Grid.Column="4" 设置子元素在那一列
Grid.RowSpan="2" 设置子元素占用几行
Grid.ColumnSpan="2" 设置子元素占用几列
UseLayoutRounding="True 布局舍入,当在网络放入一个图片,如果不是一个整数像素的宽度,图形边缘会变的模糊。开启布局舍入可以解决这个问题
SharedSizeGroup:共享尺寸组
<Window x:Class="Haos.WPF.Case.Layout.GridPanelWindow"
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:Haos.WPF.Case.Layout"
mc:Ignorable="d"
Title="Grid" Height="300" Width="300">
<!--ShowGridLines="True" 开启Grid的分格线-->
<!--UseLayoutRounding="True 布局舍入-->
<Grid ShowGridLines="True" UseLayoutRounding="True">
<!--分行-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition> </Grid.RowDefinitions>
<!--分列-->
<Grid.ColumnDefinitions>
<!--设置列宽的方法-->
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--把子元素这只指定网格中 Grid.Row="0" Grid.Column="0"-->
<Button Content="btn_1" Name="btn_1" Grid.Row="0" Grid.Column="0"></Button>
<Button Content="btn_2" Name="btn_2" Grid.Row="3" Grid.Column="6"></Button>
<!--设置子元素占用多个网络 Grid.Column="4" Grid.ColumnSpan="2"-->
<Button Content="btn_3" Name="btn_3" Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2"></Button>
<Button Content="btn_4" Name="btn_4" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"></Button>
<Button Content="btn_5" Name="btn_5" Grid.Row="2" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2"></Button> </Grid>
</Window>
2.4.2 GridSplitter:分割线
<Window x:Class="Haos.WPF.Case.Layout.GridSplitterWindow"
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:Haos.WPF.Case.Layout"
mc:Ignorable="d"
Title="GridSplitterWindow" Height="150" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="this is lable" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Column="0"></Label>
<Label Content="this is lable column 2" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Column="2"></Label>
<GridSplitter Grid.Column="1" Width="2"></GridSplitter>
</Grid>
</Window>
2.5 布局控件常和Border控件一起使用
a.Background:背景色
b.BorderBrush:前景色(边框颜色)
c.BorderThickness:边框大小
d.CornerRadius:圆角角度
<Border Background="AliceBlue" BorderBrush="Red" BorderThickness="1" CornerRadius="25" Padding="5">
<StackPanel Height="auto" Orientation="Vertical">
<!--VerticalAlignment="Center"-->
<Button Content="button" Name="btn_2" HorizontalAlignment="Center"></Button>
<Button Content="button" Name="btn_1" HorizontalAlignment="Left"></Button>
<Button Content="button" Name="btn_3" HorizontalAlignment="Right"></Button>
<Button Content="button" Name="btn_4" HorizontalAlignment="Stretch"></Button>
</StackPanel>
</Border>
2.6 共有常用属性
Margin:0,0,0,0 外边距分别(左,上,右,下)
Padding:0,0,0,0 内边距分别(左,上,右,下)
子元素->HorizontalAlignment:父布局容器垂直排列时,子元素位置
子元素->VerticalAlignment:父布局容器水平排列时,子元素位置
WPF 入门笔记之布局的更多相关文章
- WPF 入门笔记之控件内容控件
一.控件类 在WPF中和用户交互的元素,或者说.能够接受焦点,并且接收键盘鼠标输入的元素所有的控件都继承于Control类. 1. 常用属性: 1.1 Foreground:前景画刷/前景色(文本颜色 ...
- WPF 入门笔记之事件
一.事件路由 1. 直接路由事件 起源于一个元素,并且不能传递给其他元素 MouserEnter 和MouserLeave 就是直接事件路由 2. 冒泡路由事件 在包含层次中向上传递,首先由引发的元素 ...
- WPF 入门笔记之基础
一.创建WPF程序 1. App.xaml 相当于窗体的配置文件 2. xmlns:xml名称空间的缩写 xmlns="http://schemas.microsoft.com/winfx/ ...
- WPF学习笔记02_布局
布局原则 WPF窗口只能包含单个元素.如果要放置多个元素,需要放置一个容器,然后在容器中添加元素. 不应显示的设定元素的尺寸 不应该使用屏幕坐标指定元素的位置 布局容器的子元素"共享&quo ...
- dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标
大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...
- WPF入门:数据绑定
上一篇我们将XAML大概做了个了解 ,这篇将继续学习WPF数据绑定的相关内容 数据源与控件的Binding Binding作为数据传送UI的通道,通过INotityPropertyChanged接口的 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- 【C#】使用EF访问Sqlite数据库
原文:[C#]使用EF访问Sqlite数据库 1. 先上Nuget下载对应的包 如图,搜索System.Data.SQLite下载安装即可,下载完之后带上依赖一共有这么几个: EntityFramew ...
- 数据绑定(十)Binding的数据转换
原文:数据绑定(十)Binding的数据转换 当Source端Path所关联的数据与Target端目标属性数据类型不一致时,需要添加数据转换器,数据转换器是一个自定义的类,这个类需要实现IValueC ...
- NUGET源不存在,安装Nuget包提示“本地源不存在”
困扰了两天的问题,终于找到原因了.因此来这里记录一下~ 前两天写项目时,要从NUGET上安装个第三方库,但不管是从可视化的管理器还是管理器控制台安装,都提示“本地源‘*******’不存在”.然后到网 ...
- Win8 Metro(C#)数字图像处理--2.44图像油画效果算法
原文:Win8 Metro(C#)数字图像处理--2.44图像油画效果算法 [函数名称] 图像油画效果 OilpaintingProcess(WriteableBitmap src ...
- 深入浅出RPC——浅出篇 深入篇
本文转载自这里是原文 近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 RPC 在其中扮演着关键的作用. 在平时的日常开发中我们都在隐式或显式的使用 RPC,一些刚入行的程序 ...
- 浅谈.NET(C#)与Windows用户账户信息的获取
原文:浅谈.NET(C#)与Windows用户账户信息的获取 目录 1. 用户账户名称 - 使用Environment类 2. 用户账户信息 - 使用WindowsIdentity和IdentityR ...
- Android零基础入门第41节:使用SimpleAdapter
原文:Android零基础入门第41节:使用SimpleAdapter 通过ArrayAdapter实现Adapter虽然简单.易用,但ArrayAdapter的功能比较有限,它的每个列表项只能给一个 ...
- iostat命令浅析
报告中央处理器(CPU)统计信息.整个系统.适配器.TTY 设备.磁盘 CD-ROM.磁带和文件系统的异步输入/输出(AIO)与输入/输出统计信息,iostat也有一个弱点,就是它不能对某个进程进行深 ...
- MySQL 常用数据存储引擎区别
mysql有多种存储引擎,目前常用的是 MyISAM 和 InnoDB 这两个引擎,除了这两个引擎以为还有许多其他引擎,有官方的,也有一些公司自己研发的.这篇文章主要简单概述一下常用常见的 MySQL ...
- 程序员该如何过好他的整个职业生涯?(最重要的是你得一直往前走。拐点不是你的工资。想起很久前有个人说我“逻辑性”比较强)good
作者|池建强 编辑|小智 戳阅读原文,获得短信提醒,不错过下次InfoQ大咖说直播! 1 写在前面 加入极客邦的第一天就被拉到了「大咖说」的现场,这也是我始料未及的事情.从锤子科技正式离职之后,我 ...