WPF之排版

WPF使用控制面板来进行排版，而控制面板实际上就是一种可以放入WPF界面元素的容器。当用户把界面元素放入控制面板后，WPF会自动把这些界面元素放在它认为合适的地方。

　　在Winform中有以下几种容器，但是众所周知，这几个容器在排版上还是捉襟见肘的，如今WPF提供了更加丰富的容器，以满足我们的需求。

　　有些概念需要说明一下：

　　1.WPF的基本控制面板类都是从Panel类派生出来的，Panel本身是UIElement。

　　2.控制面板的概念来源于HTML和Java。

　　3.以前，在windows中开发程序，视窗控件中都是采用绝对坐标来定位，Winform也是。WPF则在此基础上引用了新的版面布置类。

一、StackPanel(堆积面板)

　　这是WPF中最简单的一种控制面板，它把其中的UI元素按横向或纵向堆积排列。　　

　　看一个示例：

<Window x:Class="WPF_Panel_StackPanel.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <StackPanel Orientation="Vertical">

        <TextBlock Foreground="Brown" FontSize="20">朝辞白帝彩云间,</TextBlock>

        <TextBlock Foreground="Brown" FontSize="20">千里江陵一日还。</TextBlock>

        <TextBlock Foreground="Brown" FontSize="20">两岸猿声啼不住，</TextBlock>

        <TextBlock Foreground="Brown" FontSize="20">轻舟已过万重山。</TextBlock>

        <Label Foreground="Blue" Background="Goldenrod" HorizontalAlignment="Center">李白(唐)</Label>

    </StackPanel>

</Window>

运行结果如下：

　　这段代码，首先是根元素Window，然后引入相应的命名空间，对窗口进行大小的初始化。

　　从<StackPanel>开始，就是容器的用法。在StackPanel中放了四个TextBlock控件和一个Label控件。与StackPanel容器最长搭配使用的便是Orientation属性，这个属性有两个值：Vertical(纵向)和Horizontal(横向)。设置为Horizontal的时候，会自动的把里面的控件按照从左到右的顺序排列。设置为Vertical的时候，会自动的把里面的控件按照从上到下的顺序排列。

二、WrapPanel

　　这个控制面板是和StackPanel最相近的。StackPanel是把其中的UI元素按行或列排列，而WrapPanel则根据其中的UI元素的的尺寸和其自身可能的大小自动的把其中的UI元素排列到下一行或下一列。

　　看以下的代码：

<Window x:Class="WPF_Panel_WrapPanel.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Window1" Height="300" Width="300">    <WrapPanel>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>        <Rectangle Margin="5" Fill="Chartreuse" Width="30" Height="50"></Rectangle>    </WrapPanel></Window>

　　运行时的窗口为：

　　当我们缩小窗口的时候，其中的UI元素会自动"换行"

三、DockPanel(停靠面板)

　　停靠的意思就是UI元素靠在窗口的某一边上，比如我们常见的软件都是菜单在视窗的顶端，状态栏在最下面等等。WPF之前，要实现这些效果是需要第三方工具的，WPF直接集成了这一面板。

　　关于停靠面板的设置方法有多种，可以在C#代码里通过DockPanel.SetDock(Control,Dock.Top)或者Control.setValue(DockPanel.DockProperty,Dock.Top)来实现，在XAML中则在UI元素的属性中设置。

四、Grid(表格式面板)

　　Grid控制面板是WPF中最常用的控制面板，WPF中还有一个和Grid类似的类--Table。Table类常用于文档，而Grid则多用于用户界面。

　　Grid使用的一般步骤是：

<Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>        </Grid.RowDefinitions>    </Grid>

　　也就是说先在上面定义列和行的属性，诸如几行几列，每行每列的宽度和高度等等。

　　然后在下面UI元素里面设置UI属于哪行哪列。

　　看下面的代码：

<Window x:Class="WPF_Panel_Grid.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Window1" Height="300" Width="300">    <Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition/>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>            <RowDefinition/>        </Grid.RowDefinitions>        <Button Foreground="BurlyWood" Grid.Column="2" Grid.Row="3">A</Button>        <Button Foreground="BurlyWood" Grid.Column="0" Grid.Row="3" Grid.RowSpan="2">B</Button>    </Grid>    </Window>

　　可以看到即时生成的预览：

　　我写了一个将颜色与名称对应起来的程序，里面的布局就是用到Grid，有兴趣的可以看一下。

　　DisplayNamedColor.rar

五、UniformGrid

这个控制面板可以生成一种大小相等在平面上均匀排列的表格，它是一般Grid的一个特例，不必定义行列的集合，不必设定每行的列数和行数，Uniform总是把行数和列数设为相等。

<Window x:Class="WPF_Panel_UniformGrid.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Window1" Height="300" Width="300">    <UniformGrid>        <TextBlock Background="Yellow" Margin="4">Jay1</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay2</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay3</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay4</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay5</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay6</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay7</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay8</TextBlock>        <TextBlock Background="Yellow" Margin="4">Jay9</TextBlock>    </UniformGrid></Window>

　　这时的效果如下：

　　如果，我们在写一行TextBlock:<TextBlock Background="Yellow" Margin="4">Jay10</TextBlock>

　　效果如下：

　　可以很明显的看出，UniformGrid会在每行里面添加一列，然后把元素从左到右，从上带下排列，直到4行4列为止。

　　六、Canvas(画布面板)

　　这个面板就是WPF中支持精确定位的面板，使用的是绝对坐标。

<Window x:Class="WPF_Panel_Canvas.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Window1" Height="300" Width="300">    <Canvas>        <TextBox Canvas.Bottom="12" Canvas.Left="15" Canvas.Right="19" Canvas.Top="25" Width="100"></TextBox>    </Canvas></Window>

　　效果如下：

　　好了，这些控制面板都介绍完了，WPF允许这些面板类可以互相包含，甚至在UI元素(如Button)中也可以包含面板元素作为其自身的子元素，这些排版元素组合起来使得WPF很容易支持各种版面设计。