浅谈 WPF布局

时间:2021-07-12 02:12:08

我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI。举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的友好和方便。

WPF相对于其它只能使用编程语言进行UI设计,具有专门用于UI设计的XAML,并且能够确保界面布局能恰倒好处的适应不同的窗口尺寸。

我们来查看Window和Page的源码,发现Window的间接基类ContentControl和Page类都使用了一个object类型的Content属性。所以它只能包含一个元素,但是我们想放置多个元素怎么办呢?这个时候我们就需要使用布局容器。

为什么布局容器又可以添加多个元素呢?所有的WPF布局容器都派生自System.Windows.Controls.Panel这个抽象类。我们从类层次结构图中就不难发现它所包含的一系列布局容器。我们再来看看这个Panel类的源代码,就会发现该类有一个ContentProperty("Children")特性,所以我们会在该类中找到一个UIElementCollection类型(该类实现了IList接口)的Children属性。只要是继承自UIElement的类,都可以添加到布局容器中。

下面让我们来看看其中的一些布局容器以及与之相关联的控件属性。

StackPanel

它是最简单的布局容器,允许子元素在单行或者单列以堆栈的形式放置。

    <StackPanel Orientation="Vertical" Background="LightCyan">
<Label Background="LemonChiffon">A Button Stack</Label>
<Button>Button A</Button>
<Button>Button B</Button>
<Button>Button C</Button>
</StackPanel>

我们运行会发现,StackPanel容器会充满整个窗口,因为它的HorizontalAlignment、VerticalAlignment属性值都是Stretch。

子元素是按照自上而下的方式排列的,因为我们设置了Orientation属性(默认值就是Vertical,所以这里我们可以不设置该属性);如果设置成Horizontal,就会从左到右排列。在默认情况下,每个子元素的高度都适合与它们自己内容的高度。如果是Horizontal,每个子元素的宽度都适合它们自己内容的长度。

我们拉伸运行的WPF程序,会发现StackPanel始终会充满整个窗口,子元素也会根据设置做相应的变化。

我们可以设置子元素的一些属性配合布局容器的属性,来决定布局。常见的属性有:HorizontalAlignment、VerticalAlignment、Margin、MinWidth、MinHeight、MaxWidth、MaxHeight、Height、Width。

<Window x:Class="WPFDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="200" Height="350"> <StackPanel Background="LightCyan">
<Label Background="LemonChiffon">A Button Stack</Label>
<Button HorizontalAlignment="Left">Button A</Button>
<Button HorizontalAlignment="Center">Button B</Button>
<Button HorizontalAlignment="Right">Button C</Button>
<Button Margin="5" Height="40" Width="100" HorizontalAlignment="Right">Button D</Button>
<Button MinWidth="320">Button E</Button>
</StackPanel> </Window>

运行这个程序,我们就会发现A、B、C三个Button分别位于水平方向上的不同位置;Button D距离四周的元素有5个单位的距离,并且指定了该按钮的高度和宽度;Button E指定了MinWidth,远大于Window的200,所以刚运行的时候左边被截断,需要我们通过拉伸才可完全看见。

Grid

顾名思义,Grid会以网格的形式对内容元素们进行布局。它具有如下的特点:

 · 可以通过RowDefinitions和ColumnDefinitions属性,它们分别是RowDefinition和ColumnDefinition集合。定义任意多的行和列。

 · 行的高度,列的宽度可以使用绝对数值(double数值加单位后缀px、in、cm、pt,不过在设置的时候最好不要加单位),比例值(double数值后加一个*号),自动值(字符串Auto)来灵活设置。

 · 内部元素可以使用Grid的附加属性Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpan设置自己所在的行、列、纵向跨几行、横向跨几列。

 · 可以设置子元素的对齐方向。

    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
<RowDefinition Height="1.5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions> <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2013 Products Shipped</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center">Quarter 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">Quarter 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center">Quarter 3</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center">50000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Center">100000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2" VerticalAlignment="Center">150000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
</Grid>

在这个示例中,我们还设置了ShowGridLines属性,它会生成虚线的边框。我们可以修改该边框,具体可以查看陈希章老师的这篇文章:为WPF和Silverlight的Grid添加边框。

我们还可以使用UseLayoutRounding属性来控制布局舍入。

我们还可以使用GridSplitter来拖动分割窗口。

    <Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions> <Button>1</Button>
<Button Grid.Column="2">2</Button>
<Button Grid.Row="2">3</Button>
<Button Grid.Column="2" Grid.Row="2">4</Button> <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="2" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="True"></GridSplitter> </Grid>

这是一个左右拖动的分割窗口,所以我们把GridSplitter竖立放置铺满(VerticalAlignment="Stretch"),并跨行(Grid.RowSpan="3"),还要设置它的宽度Width(这样才可见);最后还要设置列的宽度为自动值Auto。我们还看到ShowsPreview属性为True,这个是当我们拖动分割条时,会有一个会射的阴影跟随鼠标运行,以显示预览。同理,我可以设置上下拖动的分割线,这里就不过多叙述了。

还有一个比较有意思的是SharedSizeGroup特性。

    <Grid Margin="3">
<StackPanel>
<StackPanel Grid.IsSharedSizeScope="True">
<Grid Grid.Row="0" Margin="3" Background="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions> <Label Margin="5">A very long bit of text</Label>
<Label Grid.Column="1" Margin="5">More text</Label>
<TextBox Grid.Column="2" Margin="5">A text box</TextBox>
</Grid>
<Label Grid.Row="1" >Some text in between the two grids...</Label>
<Grid Grid.Row="2" Margin="3" Background="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions> <Label Margin="5">Short</Label>
<TextBox Grid.Column="1" Margin="5">A text box</TextBox>
</Grid>
</StackPanel>
</StackPanel>
</Grid>

我们可以设置需要共享尺寸的列ColumnDefinition或者行RowDefinition的SharedSizeGroup属性,把他们都设置成同一个值;然后再把Grid的IsSharedSizeScope附加属性设置到父容器上,并设置为True。(本例嵌套了2个StackPanel就是为了说明IsSharedSizeScope的设置方式,其实完全没有必要嵌套2个StackPanel,直接就可以设置在Grid上)

还有一个更简单的网格布局容器,UniformGrid,它可以直接设置Rows、Columns属性,设置行列数;它没有Rows、Columns这些附加属性,是按照子元素的添加的顺序由左到右,由上到下排列的。

Canvas

直译就是画布的意思。它通常用于一些设计基本不会再有改动的小型布局。

Canvas布局容器是最轻量级的布局容器,它没有包含负责的布局逻辑,以改变其子元素的首选尺寸。

我们可以设置Canvas.Left、Canvas.Top(或者Canvas.Right、Canvas.Buttom)附加属性来定位子元素的位置。

    <Canvas>
<Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>
<Button Canvas.Left="120" Canvas.Top="30">(120,30)</Button>
<Button Canvas.Left="60" Canvas.Top="80" Width="50" Height="50" Canvas.ZIndex="1">(60,80)</Button>
<Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50">(70,120)</Button>
<Button Canvas.Left="80" Canvas.Top="150" Width="100" Height="50">(60,80)</Button>
</Canvas>

默认情况下,所有子元素的都具有相同的ZIndex属性值0;如果子元素的ZIndex值相同,就按照他们在Canvas中添加的先后顺序进行显示。所以上一个示例中,最后一个Button会显示在倒数第二个Button上面;第三个因为我们显示设置了ZIndex的值为1,大于默认值0,所以第三个在第四个上面。

这一节我们讲了3个非常具有代表性的布局容器,当然需要做好布局是一件非常困难的事情,需要考虑全面。所以还需要我们真正动手做的时候,不断的积累经验。这里只是一个简单的介绍布局容器。下一节,我们会来介绍一下WPF的控件。