WPF学习笔记“布局”一:基础

 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>&lt;</Button>
30         </StackPanel>
31         <StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
32             <Button>&gt;</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" > &lt; </Button>
39                     <Button Margin="2" > &gt; </Button>
40                 </StackPanel>    
41             </StackPanel>
42             <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
43                 <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> &lt; </Button>
44             </StackPanel>
45             <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
46                 <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> &gt; </Button>                
47             </StackPanel>
48             <Canvas></Canvas>
49         </DockPanel>
50     </Grid>
51 </Page>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gengyuanchao/p/2722718.html