1 <Page x:Class="Picture.GridPage" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 mc:Ignorable="d" 7 d:DesignHeight="300" d:DesignWidth="300" 8 Title="GridPage"> 9 10 <Grid> 11 <!--定义两行三列--> 12 <Grid.RowDefinitions> 13 <RowDefinition></RowDefinition> 14 <RowDefinition></RowDefinition> 15 <RowDefinition></RowDefinition> 16 </Grid.RowDefinitions> 17 <Grid.ColumnDefinitions> 18 <ColumnDefinition></ColumnDefinition> 19 <ColumnDefinition></ColumnDefinition> 20 <ColumnDefinition></ColumnDefinition> 21 </Grid.ColumnDefinitions> 22 <StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right"> 23 <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button> 24 <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button> 25 <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button> 26 <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button> 27 </StackPanel> 28 <StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left"> 29 <Button><</Button> 30 </StackPanel> 31 <StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right"> 32 <Button>></Button> 33 </StackPanel> 34 <StackPanel Grid.Row="2" Grid.ColumnSpan="3" VerticalAlignment="Bottom"> 35 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 36 <Button Margin="3">X</Button> 37 <Button Margin="3">X</Button> 38 <Button Margin="3">X</Button> 39 <Button Margin="3">X</Button> 40 <Button Margin="3">X</Button> 41 <Button Margin="3">X</Button> 42 </StackPanel> 43 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 44 <Button Margin="5">X</Button> 45 <Button Margin="5">X</Button> 46 <Button Margin="5">X</Button> 47 <Button Margin="5">X</Button> 48 <Button Margin="5">X</Button> 49 </StackPanel> 50 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 51 <Button Margin="10">X</Button> 52 <Button Margin="10">X</Button> 53 </StackPanel> 54 </StackPanel> 55 </Grid> 56 </Page>
Grid面板布局
.net是基于坐标布局,WPF是基于流的布局标准;
一 WPF的几个重要原则:
1 不应显式设定元素的尺寸:可以通过设置最大和最小的尺寸来限制可以接受的控件尺寸范围;
2 不应使用屏幕坐标指定元素的位置:元素应该由它们的容器,根据它们的尺寸顺序以及其它特定于具体布局容器的信息进行安排,如果需要在元素之间添加空白,可以使用Margin属性;
3 布局容器和它们的子元素"共享"可以使用的空间.
4 可以嵌套布局容器;
二 布局过程
WPF布局分为两个阶段:一个测量阶段和一个排列阶段;
测量阶段:询问子元素所期望的尺寸;排列阶段,容器在合时的位置放置子元素;
特例:避免容器为了适应可视化区域的尺寸必须裁减不能满足要求的元素,需要通过设置最小窗口尺寸来避免这种情况;
三 布局容器
所有的布局容器都是派生自System.Windows.Controls.Panel类,Panel类有三个属性:background:用于面板背景着色的画刷,如果接受鼠标事件,必须将该属性设置为非空值,可以设置为透明;如果不接受鼠标事件,需要设置为{x:null};
介绍几个核心的布局面板:
stackpanel 在一个水平或垂直的堆栈中放置元素;Orientation="Horizontal"水平方向 ;Orientation="Vertical"垂直方向
wrappanel 在一系列可换行的行中放置元素.在水平方向上,wrappanel面板以从左向右的方式放置内容,在随后的行中放置元素;垂直方向上,类似;
dockpanel 根据容器的整个边界调整元素
grid 根据一个不可见的表格在行和列中安排元素,最灵活的一个容器
uniformgrid 在一个不可见的胆识强制所有单元格具有相同尺寸的表中放置元素
canvas 使用固定的坐标绝对定位元素,整个布局容器和传统的windows窗体最相似;但是没有锚定和停靠的功能
更专业的面板:
tabpanel 包含多个选项卡
toolbarpanel 工具栏中的多个按钮
toolbaroverflowpanel
virtuallizingstackpanel 数据绑定列表控件使用该面板以大幅度降低开销;
inkcanvas 支持手写输入
几个常见的布局属性:
HorizontalAlignment 水平方向,决定了子元素在布局容器中如何定位
VerticalAlignment 垂直方向,决定了子元素在布局容器中如何定位
Margin 该属性用于在元素的周围添加一定的空间.Margin是System.Windows.Thickness结构的一个实例
MinWidth和MinHeight 设置元素的最小尺寸
MaxWidth和MaxHeight 设置元素的最大尺寸
Width和Height 显示的设置元素的尺寸,这一设置会覆盖HorizontalAlignment和VerticalAlignment的stretch值;
1 <Page x:Class="Picture.Page4" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:local ="clr-namespace:Picture" 6 Title="Page4"> 7 8 <Grid> 9 <DockPanel LastChildFill="True"> 10 <StackPanel DockPanel.Dock="Top"> 11 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> 12 <Button Margin="3">主题</Button> 13 <Button Margin="3">最小化</Button> 14 <Button Margin="3">最大化</Button> 15 <Button Margin="3">关闭</Button> 16 </StackPanel> 17 </StackPanel> 18 <StackPanel DockPanel.Dock="Bottom"> 19 <StackPanel Orientation="Horizontal"> 20 <ListBox></ListBox> 21 </StackPanel> 22 <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center"> 23 <Button Margin="2">顺时针</Button> 24 <Button Margin="2">逆时针</Button> 25 <Button Margin="2">左右</Button> 26 <Button Margin="2">上下</Button> 27 <Button Margin="2">放大</Button> 28 <Button Margin="2">缩小</Button> 29 </StackPanel> 30 <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center"> 31 <Button Margin="2">左移</Button> 32 <Button Margin="2">前一张</Button> 33 <Button Margin="2">幻灯片</Button> 34 <Button Margin="2">后一张</Button> 35 <Button Margin="2">右移</Button> 36 </StackPanel> 37 <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center"> 38 <Button Margin="2" > < </Button> 39 <Button Margin="2" > > </Button> 40 </StackPanel> 41 </StackPanel> 42 <StackPanel DockPanel.Dock="Left" Orientation="Horizontal"> 43 <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> < </Button> 44 </StackPanel> 45 <StackPanel DockPanel.Dock="Right" Orientation="Horizontal"> 46 <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> > </Button> 47 </StackPanel> 48 <Canvas></Canvas> 49 </DockPanel> 50 </Grid> 51 </Page>