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

<Page x:Class="Picture.GridPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="GridPage">

    <Grid>
        <!--定义两行三列-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
            <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button>
            <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button>
            <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button>
            <Button Grid.Row="0" Grid.Column="2" Margin="5">X</Button>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left">
            <Button>&lt;</Button>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
            <Button>&gt;</Button>
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.ColumnSpan="3" VerticalAlignment="Bottom">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="3">X</Button>
                <Button Margin="3">X</Button>
                <Button Margin="3">X</Button>
                <Button Margin="3">X</Button>
                <Button Margin="3">X</Button>
                <Button Margin="3">X</Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5">X</Button>
                <Button Margin="5">X</Button>
                <Button Margin="5">X</Button>
                <Button Margin="5">X</Button>
                <Button Margin="5">X</Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="10">X</Button>
                <Button Margin="10">X</Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</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值;　　　

<Page x:Class="Picture.Page4"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:local ="clr-namespace:Picture"
    Title="Page4">

    <Grid>
        <DockPanel LastChildFill="True">
            <StackPanel DockPanel.Dock="Top">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Margin="3">主题</Button>
                    <Button Margin="3">最小化</Button>
                    <Button Margin="3">最大化</Button>
                    <Button Margin="3">关闭</Button>
                </StackPanel>
            </StackPanel>
            <StackPanel DockPanel.Dock="Bottom">
                <StackPanel Orientation="Horizontal">
                    <ListBox></ListBox>
                </StackPanel>
                <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Margin="2">顺时针</Button>
                    <Button Margin="2">逆时针</Button>
                    <Button Margin="2">左右</Button>
                    <Button Margin="2">上下</Button>
                    <Button Margin="2">放大</Button>
                    <Button Margin="2">缩小</Button>
                </StackPanel>
                <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Margin="2">左移</Button>
                    <Button Margin="2">前一张</Button>
                    <Button Margin="2">幻灯片</Button>
                    <Button Margin="2">后一张</Button>
                    <Button Margin="2">右移</Button>
                </StackPanel>
                <StackPanel Margin="5" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Margin="2" > &lt; </Button>
                    <Button Margin="2" > &gt; </Button>
                </StackPanel>    
            </StackPanel>
            <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
                <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> &lt; </Button>
            </StackPanel>
            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                <Button VerticalContentAlignment="Center" HorizontalAlignment="Center" MaxHeight="40"> &gt; </Button>                
            </StackPanel>
            <Canvas></Canvas>
        </DockPanel>
    </Grid>
</Page>