WPF学习笔记一之布局
1.Canvas 布局控件
Canvas主要用来画图,注意Canvas.Left/Right/Top/Bottom
<Canvas Margin="10,10,10,10" Background="White" >
<Rectangle Name="rect" Canvas.Left="300" Canvas.Top="180" Fill="Black" Stroke="Red" Width="200" Height="200"/>
<Ellipse Name="el" Canvas.Left="160" Canvas.Top="150" Fill="Azure" Stroke="Green" Width="180" Height="180"/>
</Canvas>
2.StackPanel 布局控件
StackPanel就是将子元素按照堆栈的形式一一排列,可以通过设置StackPanel的Orientation属性设置两种排列方式:横排(Horizontal,该值为默认值)和竖排(Vertical)
3.WrapPanel 布局控件
WrapPanel面板在可能的空间中,一次以一行或一列的方式布置控件。默认情况下,WrapPanel.Orientation属性设置为Horizontal,控件从左向右进行排列,然后再在下一行中排列,但你可将WrapPanel.Orientation设置为Vertical,从而在多个列中放置元素。与StackPanel面板不同,WrapPanel面板实际上用来控制用户界面中一小部分的布局细节,并非用于控制整个窗口布局。
4.DockPanel 布局控件
DockPanel面板定义一个区域,在此区域中,你可以使子元素通过锚点的形式进行排列。DockPanel类似于WinForm中Dock属性的功能。对于在DockPanel中的元素的停靠可以通过Panel.Dock的附加属性来设置,如果设置LastChildFill属性为true,则最后一个元素将填充剩余的所有空间。
注意:DockPanel.Dock
5.Grid 布局控件
Grid比起其他Panel,功能是最多最为复杂的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合两种元素组成。而放在Grid面板中的元素必须显式采用附加属性定义其所在行和列,否则元素均默认放置在第0行第0列。
6.UniformGrid 布局控件
UniformGrid是Grid简化版本,不像Grid面板,UniformGrid不需要预先定义行集合和列集合,反而,通过简单设置Rows和Columns属性来设置尺寸。每个单元格始终具有相同的大小。UniformGrid每个单元格只能容纳一个元素,将自动按照在其内部的元素个数,自动创建行和列,并通过保存相同的行列数。
7.ScrollViewer 控件
通常用户界面中的内容比计算机屏幕的显示区域大的时候,可以利用ScrollViewer控件可以方便地使应用程序中的内容具备滚动功能
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
<Rectangle Width="500" Height="400" Fill="Green"/>
</ScrollViewer>
8.自定义布局控件
在前面介绍过布局系统的工作原理是先测量后排列,测量即是确定面板需要多大空间,排列则是定义面板内子元素的排列规则。所以,要实现自定义布局控件,需要继承于Panel类并重写MeasureOverride和ArrangeOverride方法即可
namespace CustomLayoutControl
{
public class CustomStackPanel: Panel
{
public CustomStackPanel()
: base()
{
} // 重写默认的Measure方法
// avaiableSize是自定义布局控件的可用大小
protected override Size MeasureOverride(Size availableSize)
{
Size panelDesiredSize = new Size();
foreach (UIElement child in this.InternalChildren)
{
child.Measure(availableSize); // 子元素的期望大小
panelDesiredSize.Width += child.DesiredSize.Width;
panelDesiredSize.Height += child.DesiredSize.Height;
} return panelDesiredSize;
} // 重写默认的Arrange方法
protected override Size ArrangeOverride(Size finalSize)
{
double x = ;
double y = ;
foreach (UIElement child in this.InternalChildren)
{
// 排列子元素的位置
child.Arrange(new Rect(new Point(x, y), new Size(finalSize.Width - , child.DesiredSize.Height)));
y += child.RenderSize.Height + ;
} return finalSize;
}
}
}
布局综合运用
<Window x:Class="WPFLayoutDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterScreen"
Title="布局综合运用实例" Height="400" Width="480">
<DockPanel Width="Auto" Height="Auto" LastChildFill="True">
<!--顶部菜单区域-->
<Menu Width="Auto" Height="20" Background="LightGray" DockPanel.Dock="Top">
<!--File菜单项-->
<MenuItem Header="文件">
<MenuItem Header="保存"/>
<Separator/>
<MenuItem Header="退出"/>
</MenuItem>
<!--About 菜单项-->
<MenuItem Header="帮助">
<MenuItem Header="关于本产品"/>
</MenuItem>
</Menu> <!--状态栏-->
<StackPanel Width="Auto" Height="25" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">
<Label Width="Auto" Height="Auto" Content="状态栏" FontFamily="Arial" FontSize="12"/>
</StackPanel>
<!--Left-->
<StackPanel Width="130" Height="Auto" Background="Gray" DockPanel.Dock="Left">
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
</StackPanel> <!--Right-->
<Grid Width="Auto" Height="Auto" Background="White"> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>
</Grid>
</DockPanel> </Window>
WPF学习笔记一之布局的更多相关文章
- WPF学习笔记-用Expression Design制作矢量图然后导出为XAML
WPF学习笔记-用Expression Design制作矢量图然后导出为XAML 第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大, ...
- WPF 学习笔记-在WPF下创建托盘图标
原文:WPF 学习笔记-在WPF下创建托盘图标 首先需要在项目中引用System.Windows.Forms,System.Drawing; using System; using System.Co ...
- WPF 学习笔记-设置属性使窗口不可改变大小
原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...
- WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决
原文:WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决 如下图,在凭证编辑窗体中,有的单元格不需要数字,但如果录入数字后再删除,会触发数字验证,单元格显示红色框线,导致不能执行 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- WPF学习笔记02_布局
布局原则 WPF窗口只能包含单个元素.如果要放置多个元素,需要放置一个容器,然后在容器中添加元素. 不应显示的设定元素的尺寸 不应该使用屏幕坐标指定元素的位置 布局容器的子元素"共享&quo ...
随机推荐
- java学习笔记之集合—ArrayList源码解析
1.ArrayList简介 ArrayList是一个数组队列,与java中的数组的容量固定不同,它可以动态的实现容量的增涨.所以ArrayList也叫动态数组.当我们知道有多少个数据元素的时候,我们用 ...
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目(三)-已搭建基架的Razor页面解释和更新
本节主要介绍在上一节中通过搭建基架而创建的Razor页面,并做一些UI改变. 一.创建.删除.详细信息和编辑页面 1.双击Pages/Movies/Index.cshtml.cs文件,这是一个Razo ...
- 梯度下降算法&线性回归算法
**机器学习的过程说白了就是让我们编写一个函数使得costfunction最小,并且此时的参数值就是最佳参数值. 定义 假设存在一个代价函数 fun:\(J\left(\theta_{0}, \the ...
- vim光标操作
v可视模式 ve可视模式但不包括selection o操作符等待模式 i插入模式 r替换模式(命令模式下,按r,输入一个字符将替换光标所在处字符) c命令行常规模式 ci命令行插入模式 cr命令行替换 ...
- H3C端口隔离
一.端口隔离简介 为了实现端口间的二层隔离,可以将不同的端口加入不同的VLAN,但VLAN资源有限.采用端口隔离特性,用户只需要将端口加入到隔离组中,就可以实现隔离组内端口之间二层隔离,而不关心这些端 ...
- php 获取header信息
nginx服务器获取header信息: 如:获取token: $_SERVER['HTTP_TOKEN']; 获取自定义的参数采用$_SERVER['参数名'] Apache服务器获取header信息 ...
- 题解 AT3853 【Otoshidama】
题目传送门. 暴力枚举题. 分析 Step 1:定义两个变量,\(n\)和\(y\). int n,y; cin>>n>>y; Step 2:使用二重循环进行暴力枚举. for ...
- python threading2种调用方式实例
1.认识GIL: 说到GIL一直是代码专家们一直以来想要解决的问题,也是被许多程序员诟病的,下面带领大家看下官方threading模块document中如何去描述对于GIL这个全局解释器锁的:http ...
- 使用在react hooks+antd ListView简单实现移动端长列表功能
import React, { useState, useEffect } from "react" import { ListView } from "antd-mob ...
- vue 项目初始化
初始化 vue init webpack-simple myproject 安裝 npm install 运行 npm run dev 访问地址 http://localhost:8080/ 安装we ...