WPF学习二 布局

合肥程序员群：49313181。    合肥实名程序员群：128131462 (不愿透露姓名和信息者勿加入)
Q  Q:408365330     E-Mail:egojit@qq.com

所有界面程序开发都是从布局开始，好的布局让人善心悦目。对于Windows 开发人员设计用户界面的方法，WPF有重大的改进。WPF布局系统使用基于流布局标准。WPF使用XAML这种基于XML格式的文档定义去布局和做界面。它很好的使设计人员和Coder分开。这里给大家推荐一款很好的WPF设计人员使用的工具expression blend。这个可以设计出非常漂亮的WPF界面。功能当然比VS自带强大很多。

WPF布局和之前的WinForm布局相比已经是一门艺术（个人见解）。做好了可以适应各种分辨率设备并且看起来更加好看，做不好就是奇丑无比。：）。而且WPF不学布局，我们很难开始编码。尝试下就知道差距有多大。

在WPF中布局是一门比较专业的学问。和WinForm有着很大的区别。WPF中使用最为广泛的就是Grid。Grid控制面板是WPF种最强大的布局容器。Grid将元素分割到不可见的行列网格中。当然单元格中可以去放其它布局元素。在Grid布局的时候有这样一个原则就是没个单元格一个元素。

新建一个WPF项目。

因为Grid之强大和常用，所以WPF窗体默认就在Windows下加了Grid元素。对于生成的App.xaml暂时我们知道它相对于入口文件就行了，这里定义了初始窗口。

自动添加的代码如下：

<Window x:Class="WPFGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>

这个很容易看出在Window节点下默认生成了Grid节点。首先我们需要定义行和列，在这里我们定义两行两列。

            <Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="206*"></ColumnDefinition>
                    <ColumnDefinition Width="845*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>

分别定义了RowDefinitions和ColumnDefinitions。这样就会出现如图所示，我们可以将元素放置到相应的单元格中。

那怎么将元素放入相应的单元格呢？可以通过Grid.Row和Grid.Column来设置元素所在行和列来设置单元格。这里我们不考虑布局的合理性。在做边第一列的两行上面放置一个树控件（我们这里很多控件是Dev控件，Dev控件就不做过多介绍。只介绍WPF自带控件）这样Grid中的布局代码就如下：

<Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="206*"/>
                    <ColumnDefinition Width="845*"/>
                </Grid.ColumnDefinitions>
                
                <dxg:TreeListControl Grid.Row="0" AutoPopulateColumns="True"  Grid.RowSpan="2" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch">
                    <dxg:TreeListControl.Columns>
                        <dxg:TreeListColumn/>
                        <dxg:TreeListColumn/>
                        <dxg:TreeListColumn/>
                        <dxg:TreeListColumn/>
                        <dxg:TreeListColumn/>
                    </dxg:TreeListControl.Columns>
                    <dxg:TreeListControl.View>
                        <dxg:TreeListView ShowTotalSummary="True"/>
                    </dxg:TreeListControl.View>
                </dxg:TreeListControl>
            </Grid>

 我们很容易看到TreeList控件中有Grid.Row="0"，也就是让它在第一行。Grid.Column="0"。树被放在了第一行，第一列。但是其中有一个很重要的属性别忘了。我们这里跨行了，那么Grid.RowSpan=“2”就指明我们跨两行。VerticalAlignment="Stretch"  HorizontalAlignment="Stretch"这两个属性就是元素的横向布局和纵向布局都是平铺满。参照运行下图：

之前我设置了Grid的属性ShowGridLines="True".就是让Grid有边框这样便于我们理解。Grid有Hight属性和Width属性。上面代码中RowDefinition 的height属性我没做设置，默认的是上下等分。也就是两行一样高。其实Height有几种设置。可以给一个固定值，例如Height="60",也可以是这样的形式Height="*",在本例子用我们可以将第一行设置成Height="60",第二行设置成Height="*".因为只有两行，这样有一个好处就是我们明确了第一行的高度，第二行就可以行分配剩下的作为高度。这样不需要人为去计算没一行的高度，我们将剩下的都作为一行就行了。ColumnDefinition的Width也有同样的设置方式。同样Grid有一个很好的属性。学过HTML的可能很好理解。一个Margin属性，设置元素的外边距，panding设置布局元素的内边距，是不是很熟悉。

跨越行我们已经用过RowSpan它的值是跨越的行数。列也有同样的设置方式。

对于Grid的基本应学会了。Grid一般用来做整体的布局，细微的布局和调整可能是其它元素，这有点类似于HTML早前的Table布局（现在DIV+CSS较多）。

学到这里我们可以用Grid做基本的布局了。

版权：归博客园和Egojit所有，转载请标明出处。