WPF 排版基础

2024-01-10 21:14:34

一、WPF 排版基础

WPF使用控制面板来进行排版，控制面板实际上是一种可以放入WPF界面元素的容器。当用户把界面元素放入控制面板后，WPF会自动把这些界面元素放在它认为合适的地方。WPF开发人员需要根据自己对用户界面的要求来选择合适的控制面板。

WPF中的基本控制面板类如图3-1所示，这些类都是从Panel类中派生出来的，Panel本身是UIElement。

WPF中的StackPanel、DockPanel、WrapPanel及Grid则支持另外一种排版机制，使用这些排版类，不需要设置控件在视窗上的绝对位置，只需要说明其相对位置，WPF的控制面板类负责最终确定这些控件的位置。

控制面板中的Children属性是一个UIElement的集合，即所有从UIElement中派生出来的UI元素都可以加入到控制面板中，也就是说，控制面板中既可以放入各种图形，又可以放入像Button、TextBlock这样的常规控件。由于Panel本身是从UIElement中派生出来的，所以Panel可以含有Panel。

二、堆积面板（StackPanel）

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

其中，可以使用Orientation属性来操作子元素的排列。

Orientation的属性有两个值：Vertical和Horizontal。

当Orientation设为Vertical时，StackPanel中的元素占满StackPanel的水平方向空间，即其中元素的宽度Width是相同的。当Orientation设为Horizontal时，StackPanel中的元素则占满垂直方向空间，其中元素的高度Height都相同。

StackPanel里还有一个属性：LayoutTransform。这个属性可以把StackPanel内的UI元素一起放大、缩小或旋转。

1.在XAML中使用StackPanel

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        Icon="https://demosc.chinaz.net/Files/pic/iconsico/8254/e10.ico"
        mc:Ignorable="d"
        Title="无题" Height="200" Width="200">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Margin="5" Orientation="Vertical">
            <TextBlock FontSize="20" Text="昨夜星辰昨夜风，" Background="Wheat"/>
            <TextBlock FontSize="20" Text="画楼西畔桂堂东。" Background="Wheat"/>
            <TextBlock FontSize="20" Text="身无彩凤双飞翼，" Background="Wheat"/>
            <TextBlock FontSize="20" Text="心有灵犀一点通。" Background="Wheat"/>
        </StackPanel>
    </ScrollViewer>
</Window>

2.在C#中使用StackPanel
StackPanel和其中元素间的父子关系（这里的父子关系指的是一种包容关系，而不是继承关系）更加清晰。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.Title = "无题";
        StackPanel sp = new StackPanel();
        this.Content = sp;
        sp.Children.Add(CreatTextBlock("昨夜星辰昨夜风，"));
        sp.Children.Add(CreatTextBlock("画楼西畔桂堂东。"));
        sp.Children.Add(CreatTextBlock("身无彩凤双飞翼，"));
        sp.Children.Add(CreatTextBlock("心有灵犀一点通。"));
    }

    private TextBlock CreatTextBlock(String text)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.FontSize = 20;
        textBlock.Foreground = new SolidColorBrush(Color.FromRgb(200, 100, 100));
        textBlock.Text = text;
        return textBlock;
    }
}

有时候需要把视窗的大小根据其中的内容来自动调整，方法是设置视窗的SizeToContent属性. SizeToContent是枚举类型。

若你对StackPanel和窗口间或UI元素与UI元素间的距离不满意，可以调整StackPanel或界面元素的Margin属性。

Margin的类型为Thickness，可以对其左、右、上、下分别设置。

上面谈到当视窗里的内容比视窗小时，可以用设置视窗的SizeToContent的属性让视窗根据其中的内容进行自动调整。但更常遇到的是另外一种情况：视窗里的内容比计算机可用屏幕的尺寸还要大，这时候就要在视窗内加滚动条。

WPF提供ScrollBar和ScrollViewer来实现屏幕滚动，ScrollViewer比ScrollBar在滚动视窗中的内容时用起来方便。

ScrollViewer有两个控制滚动条显示方式的相关属性：HorizontalScrollBarVisibility和VerticalScrollBarVisibility。

VerticalScrollBarVisibility用来控制竖直滚动条，而HorizontalScrollBarVisibility则用来控制水平滚动条。

HorizontalScrollBarVisibility的默认值是Disbaled，而VerticalScrollBarVisibility的默认值是“auto”。

ScrollViewer提供了8个用于控制每次滚动范围的方法：LineUp、LineDown、LineLeft、LineRight、PageUp、PageDown、PageLeft和PageRight这些方法可以在程序中模拟人工操作滚动条。

当视窗的大小，滚动条的位置或视点发生改变时，ScrollViewer会产生ScrollChanged事件。

三、WrapPanel

WrapPanel是和StackPanel最相近的一个控制面板，StackPanel把其中的UI元素按行或列排列，而WrapPanel则可根据其中UI元素的尺寸和其自身可能的大小自动地把其中的UI元素排列到下一行或下一列。Windows操作系统中的文件管理器就是这样的例子，当选择图标显示模式时，文件管理器将根据视窗的宽度和文件图标的大小，自动布置文件在其中的位置。

WrapPanel中有三个属性ItemWidth、ItemHeight和Orientation，这三个属性来安排其中UI元素的位置：

● ItemWidth：定义所有子元素的宽度。每个子元素在其中显示的宽度由子元素自己的Width及HorizontalAlignment属性确定，若子元素的宽度大于ItemWidth，WrapPanel就会自动剪掉子元素超过ItemWidth的部分。ItemWidth的默认值为NaN，在这种情况下，WrapPanel使用其中最大子元素的宽度来作为列的宽度。

● ItemHeight：定义所有子元素的高度。每个子元素在其中显示的高度由子元素自己的Height及VerticalAlignment确定，若子元素的宽度大于ItemHeight，WrapPanel就会自动剪掉子元素超过ItemHeight的部分。ItemHeight的默认值为NaN，在这种情况下，WrapPanel使用其中最大子元素的高度来作为行的高度。

● Orientation：和StackPanel相同，唯一的区别是在WrapPanel中，Orientation的默认值为Horizontal（水平放置）。

对照一下与前面StackPanel的区别:
a.可用鼠标调整视窗的大小，当视窗的宽度只能放置1个矩形时，WrapPanel的效果和StackPanel的效果一样。

b.当视窗的宽度小于其中矩形宽度的总和时，排在右面的矩形会自动排列到下一行；当视窗的宽度大于其中矩形宽度的总和时，排在下一行最左边的矩形会自动进入上一行。

四、停靠面板（DockPanel）

停靠（Dock）这个概念并不是新的东西，在传统的视窗应用程序中，通常在视窗的顶端有菜单，最下面有状态行，有时还有工具条，工具条一般放在菜单的下面等。控制这些UI元素在视窗中的位置就是停靠，只不过在WPF之前，需要自己做大量工作，或使用第三方提供的工具。

DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。

默认情况下，后添加的元素只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。

WPF的DockPanel定义了一个Dock附加属性，其类型为Dock，是枚举类型，可取Left、Right、Top和Bottom四个值。注意Dock并没有一个Fill或Center的值，当LastChildFill属性设为True时，DockPanel用最后一个加入的UI元素填充所有剩下的地方。

在XAML中设置UI元素的语法为（以TextBlock为例，其他UI元素都一样）：

<TextBlock DockPanel.Dock=Dock.Top>
...
</TextBlock>

在C#里，可以用两种方法来设定UI元素在DockPanel中的停靠位置，一种是用UI元素中的SetValue()方法，比如设定控件myControl的停靠位置：

myControl.SetValue(DockPanel.DockProperty,Dock.Top);

另外一种方法是在DockPanel里设置：

DockPanel.SetDock(myControl,Dock.Top);

实例：

点击查看代码

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        Icon="https://demosc.chinaz.net/Files/pic/iconsico/8254/e10.ico"
        mc:Ignorable="d"
        Title="无题" Height="500" Width="800" WindowStartupLocation="CenterScreen">
    <DockPanel>
        <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
        <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
        <Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
        <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
        <Button  Content="ButtonTop"></Button>
    </DockPanel>
</Window>

六、表格式面板（Grid）

Grid控制面板是WPF中最常用的控制面板，当用Visual Studio或ExpressBlend创建WPF程序时，Visual Studio会自动在XAML中添加标记。

Grid排版和HTML表格排版是一样的，尽管现在有无数的网站，提供的内容丰富多彩，但网页版面设计都是基于表格排版的。

WPF中还有一个和Grid的类似的类——Table。Table类常用于文档，而Grid则多用于用户界面。

在XAML中定义Grid的语法为：

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

上面的这段XAML定义了3行3列的Grid 。在C#里创建Grid的语法和创建其他对象一样：

Grid myGrid = new Grid();
for(int i = 0; i < 3; i++)
{
    RowDefinition rowdef = new RowDefinition();
    myGrid.RowDefinitions.Add(rowdef);
}
for(int j = 0; j < 3; j++)
{
    ColumnDefinition coldef = new ColumnDefinition();
    myGrid.ColumnDefinitions.Add(coldef);
}

Grid类中含有行容器RowDefinitions和列容器ColumnDefinitions。

行和列分别用RowDefinition和ColumnDefinition类来表达。

1.设定UI元素在Grid中的位置

设定Grid中UI元素在Grid中的相对位置要使用Grid的两个附加属性Row和Column,若Grid里面含有Label，则使用XAML设置Label的行列位置的语法为：

<Label Grid.Row="1" Grid.Column="1"  VerticalContentAlignment="Center" FontSize="20">I'm here.</Label>

上面的XAML句子把标签“I'm here.”放在Grid的第二行、第二列的位置。

注意：Grid中的行列号为从0开始的整数，设定UI元素在Grid中的行列号，该行列号一定要在Grid所定义的范围内；换句话说，若你定义了3行3列的Grid，则不能设定UI元素的行列号为大于或等于3。

2.设定Grid行或列的尺寸

和普通UI元素可以设定Height和Width属性不同，RowDefinition类和ColumnDefinition类中相应的属性的类型不是Double，而是System.Window.GridLength。

Grid调整Grid行列尺寸的方法有如下三种：

● 绝对尺寸把Grid行列大小尺寸设为一个数值，这时Grid的行列尺寸不会随着其中UI元素的大小进行自动调整。

● 自动尺寸把Grid的Height和Width设为Auto。这时WPF会根据Grid中的UI元素自动调整其行列的高度或宽度。其原则为：Grid的行高度由该行中元素的最大高度决定，Grid的列宽度由该列中元素的最大宽度决定。使用这种方法可以保证Grid中的UI元素不会只显示一部分。

● 按比例分割行列尺寸把有限的平面大小按照一定的比例划分行的高度或列的宽度，其比例的数值可以是浮点数。如第一列的宽度设为“”、第二列的宽度设为“1.2”、第三列的宽度设为“2.5*”，等等。

WPF默认设置行的高度和列的宽度为1个*，即每行或每列的大小一样。在XAML中设定行列尺寸的语法：

<RowDefinition Height="100"/>  (绝对比例)
<RowDefinition Height="Auto"/>  (自动尺寸)
<RowDefinition Height="2*"/>  (按比例尺寸)

在C#中设定行列尺寸的语法：

RowDefinition rowdef = new RowDefinition();
rowdef.Height = new GridLength(100, GridUnitType.Pixel);  (绝对比例)
rowdef.Height = GridLength.Auto;  (自动尺寸)
rowdef.Height = new GridLength(2, GridUnitType.Star);  (按比例尺寸)

实例：

3. 元素横跨多个行列时的设定

有时候需要设置某个UI元素横跨多行或多列，Grid支持这种操作。

用XAML设置跨行和跨列的例子如下：

<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" VerticalContentAlignment="Center" FontSize="40">I'm here.~~~~~</Label>

用C#设置跨行和跨列的例子如下：

TextBlock tb = new TextBlock();
tb.Width = 100;
tb.Height = 100;
Grid.SetRowSpan(tb, 2);  // 跨越两行
Grid.SetColumnSpan(tb, 2);  // 跨越两列

4.在Grid中保持多行或多列大小的一致性

有时候希望Grid中的一些行或列无论在什么情况下都保持相同的高度或宽度，使用RowDefinition和ColumnDefinition中的SharedSizedGroup可以达到这一目的。

首先在Grid层面设置了一个IsSharedSizeScope属性为True,表明在Grid中，会有行或列使用SharedSizeGroup属性。在ColumnDefinition中，笔者把第1列和第3列的SharedSizeGroup设为“mgroup1”，把第2列和第4列的SharedSize-Group设为“mgroup2”。SharedSizedGroup可以设为任何字符串，具有相同Shared-SizedGrou字符串的行或列，其高度或宽度相同。字符串大小写敏感，如mgroup1和mGroup1是不同的字符串。

设定SharedSizeGroup后，位于同一组中的列的宽度保持相同的比例。

六、UniformGrid

有时候觉得使用Grid过于烦琐的话，可以设置行列数，行列的宽度或高度等属性，实际上就是需要一种大小相等在平面上均匀排列的表格。UniformGrid支持这种表格的排版类，它是一般Grid的一个特例。这时，不必要定义行列的集合；不必设定每行的列数或行数，UniformGrid总是把行数和列数设为相等；每个单元只含有一个子元素，所以也不必用附加属性来说明哪个元素位于哪个单元。

七、画布面板（Canvas）

过去视窗界面排版都是用绝对坐标，比如，用户设计的对话框，每个控件在对话框中的位置，都是用x，y值确定的；又比如用户要在窗口内显示文字或图形，也要指出所要显示图素的确切位置。WPF也支持这种精确定位的排版，Canvas面板就是为此设计的。

Canvas中的坐标值是一种与设备无关的单位值，其坐标原点位于Canvas的左上角。X坐标轴从原点指向屏幕的右边，Y坐标轴从原点指向屏幕的下方。UI元素并没有指定其位置的坐标属性，要把某个元素放在Canvas上的某个位置，需要使用Canvas的Left和Top附加属性。

XAML:

<Canvas>
    <TextBlock Canvas.Left="15" Canvas.Top="15" Background="Aquamarine">Location1</TextBlock>
    <TextBlock Canvas.Left="100" Canvas.Top="100" Background="Bisque">Location2</TextBlock>
</Canvas>

C#:

public MainWindow()
{
    InitializeComponent();
    TextBlock tb1 = new TextBlock();
    tb1.Text = "Location1";
    tb1.Background = new SolidColorBrush(Color.FromRgb(0, 255, 0));
    Canvas.SetLeft(tb1, 15);
    Canvas.SetTop(tb1,15);
    TextBlock tb2 = new TextBlock();
    tb2.Text = "Location2";
    tb2.Background = new SolidColorBrush(Color.FromRgb(0, 255, 0));
    Canvas.SetLeft(tb2, 100);
    Canvas.SetTop(tb2, 100);
    Canvas cv = new Canvas();
    cv.Width = 400;
    cv.Height = 400;
    cv.Background = new SolidColorBrush(Color.FromRgb(255,200,0));
    cv.Children.Add(tb1);
    cv.Children.Add(tb2);
    this.AddChild(cv);
}

在WPF中,Canvas排版常用在对图形元素的版面布置上。虽然可以设置图形元素在Canvas上的左上角或右下角的位置，但若设置了图形元素的左上角的位置，同时又设置了图形元素右下角的位置，WPF就会自动忽略所设的右下角的位置坐标。

七、小结

本节介绍了WPF中的排版系统，重点在StackPanel、WrapPanel、DockPanel、Grid、UniformGrid等元素的使用方法。WPF允许这些面板类可以互相包含，甚至在UI元素(如Button)中也可以包含面板元素作为其自身的子元素,这些排版元素组合起来使得WPF很容易支持各种版面设计。还有与排版相关的一些UI类，如LayoutTransform，该类支持FrameWorkElement在版面上的变换。还有一些处在控件和版面设计之间的类，如TabControl；使用TabControl的例子如IE 7.0。这个类可用作版面设计，但在属性上应把它归于UI控件元素。

码农公寓