WPF Step By Step 完整布局介绍

回顾

上一篇，我们介绍了基本控件及控件的重要属性和用法，我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景，当

然这些都是本人在实际项目中的使用经验，可能还存在错误之处，还请大家指出。

本文大纲

1、Grid

2、StackPanel

3、DockPanel

4、WrapPanel

Grid

1、Row和Column

我们下面来介绍Grid的行的用法，及我们在UI设计过程中需要注意的细节。

由于前面我们在第一章中已经介绍了基本的关于Grid的表格行和列的定义及相关属性，为了防止大家遗忘，我们这里再次介绍下：

为了加深大家对Grid布局的印象，我们这里加入控件来展示效果。

下面在每个单元格都加入子控件

上面指定了控件在Grid表格中的哪一行那一列，如果我们的某个控件跨行或者跨列如何做呢？

关于跨行和跨列一样，只不过将Grid.ColumnSpan换成Grid.RowSpan。

下面介绍，在Grid如何将控件设置为自适应宽度和高度，或者是固定宽度或固定高度时，应该注意的细节。

1、自适应区域：

2、顶部对齐或底部对齐

对于顶部对齐和底部对齐，相对来说都一样。

3、左右对齐时：

4、下面来举个例子，我们来如何分析，根据原型来使用Grid布局来达到要求和目标：

例如下图：

我们以博客园为例，可能例子不太合适，但是如果我们想做一个博客园的桌面版，保持风格一致的情况下，如果我们使用Grid布局如何来布局呢？

A、有Logo图片,上面还有设置等菜单，所以，我们可以吧这块设置为二行，这样比较容易区分页面的布局和设置

B、下面有几个二级菜单，新闻、博问等一行

C、左侧有网站分类。必须1列

D、右侧有内容区。上面有区分首页、精华、候选、新闻、关注等、1列

E、右侧有找找看、还有最新新闻等 1列。

F、最下面，肯定还有状态栏，如果我们开发桌面系统。1行

根据上面的分析，我们的Grid表格至少5行、3列

关于其他的设计，我们通过Grid表格的组合来进行控制。

下面我们就来实现下：

先设置大体布局如下：

关于上述布局的具体实现如下：

<Window x:Class="Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="800">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.ColumnSpan="2">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="何戈洲" Margin="5,0,0,0"/>
                <Button Content="我的博客" Margin="5,0,0,0"/>
                <Button Content="短消息" Margin="5,0,0,0"/>
                <Button Content="设置" Margin="5,0,0,0"/>
                <Button Content="退出" Margin="5,0,0,0"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.Row="1">
            <Image Source="/Samples;Component/Images/logo_small.gif" />
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">
            <StackPanel Orientation="Horizontal">
                <Button Margin="5,0,0,0">园子</Button>
                <Button Margin="5,0,0,0">新闻</Button>
                <Button Margin="5,0,0,0">博问</Button>
                <Button Margin="5,0,0,0">闪存</Button>
                <Button Margin="5,0,0,0">网摘</Button>
                <Button Margin="5,0,0,0">招聘</Button>
                <Button Margin="5,0,0,0">专题</Button>
                <Button Margin="5,0,0,0">知识</Button>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
            <Image Source="/Samples;Component/Images/main.png" />
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,0,0,0">关于我们</Button>
                <Button Margin="5,0,0,0">联系我们</Button>
                <Button Margin="5,0,0,0">广告服务</Button>
                <Button Margin="5,0,0,0">人才服务</Button>
                <Button Margin="5,0,0,0">版权</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

从上面的代码可以看出来，非常的简单，Grid特别适合软件系统的整体布局，在实际的项目中通过Grid与其他的布局控件相结合一起完成页面的整体布局。

StackPanel

StackPanel 适合水平或者垂直方向的布局，在上面的例子中我们大量的使用该种布局方式。适合局部区域的布局。比如博客园中的如下区域就可以采用StackPanel进行布局。

对于这类的固定的区域，我们可以不适用Grid来进行布局，使用StackPanel也可以达到目标。

我们来使用StackPanel来进行布局

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                <GroupBox Header="网站分类" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content=".NET技术(16)"/>
                        <Button Content="编程语言(13)"/>
                        <Button Content="软件设计(3)"/>
                        <Button Content="Web前端(16)"/>
                        <Button Content="软件工程(26)"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="链接" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content="反馈和建议"/>
                        <Button Content="官方博客"/>
                        <Button Content="电子期刊" />
                        <Button Content="人才服务"/>
                        <Button Content="博客模板"/>
                    </StackPanel>
                </GroupBox>
            </StackPanel>

运行效果如下：

与预期的效果相同，对于其他的模块，我们也可以在局部，对于水平或者垂直方向要求进行布局的，我们都可以采用StackPanel来进行布局。

下面我们来看看横向布局的例子：

我们通过表格中的使用对StackPanel的停靠定位，进而通过Stackpanel对内部的子控件的停靠方向设置，我们通过如下代码实现上述效果：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
               <Button Content="何戈洲" Margin="5,0,0,0"/>
               <Button Content="我的博客" Margin="5,0,0,0"/>
               <Button Content="短消息" Margin="5,0,0,0"/>
               <Button Content="设置" Margin="5,0,0,0"/>
               <Button Content="退出" Margin="5,0,0,0"/>
</StackPanel>

StackPanel在父容器中是右对齐的。

然后再StackPanel容器中，如果也采用内容右对齐，会有什么效果呢？

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="我的博客" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="短消息" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="设置" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="退出" Margin="5,0,0,0" HorizontalAlignment="Right"/>
</StackPanel>

设置子控件的停靠方式时，不会起到任何作用，默认情况下，Stack的水平布局时，从左至右。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
                <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="我的博客" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="短消息" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="设置" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="退出" Margin="5,0,0,0" HorizontalAlignment="Right"/>
</StackPanel>

修改了FlowDirection设置了StackPanel的方向后，所有的子控件，都是从右向左方向进行绘制和显示，效果如下：

所以对于StackPanel我们基本上是用上述的属性和对StackPanel的停靠方式进行设置后，即可满足布局的要求。

DockPanel

DockPanel停靠容器，专门负责自适应窗口的布局,之前我们介绍了DockPanel的布局设置，这里再回顾下：

<DockPanel>
                <StackPanel DockPanel.Dock="Top" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Left" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Bottom" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Width="200">
                    <GroupBox Header="最新新闻" Height="160">
                        <StackPanel Orientation="Vertical">
                            <Button Content="宅急送近日宣布降价抢"/>
                            <Button Content="腾讯联手华为操盘四核手机"/>
                            <Button Content="Windows 8各版本区别与售价"/>
                            <Button Content="数方程将无线网络带宽提高一个数量级"/>
                            <Button Content="中移动：Lumia 920T将于11月上市"/>
                            <Button Content="Windows 8下一站：10月25日纽约"/>
                        </StackPanel>
                    </GroupBox>
                    <GroupBox Header="48小时阅读排行榜" Height="160">
                        <StackPanel Orientation="Vertical">
                            <Button Content="子用户-角色-权限-菜单浅谈：子账户设计方案"/>
                            <Button Content="网站已恢复正常，让大家久等了"/>
                            <Button Content="拿什么拯救你，我的51Job简历？——UBB漏洞"/>
                            <Button Content="这些年我们没用过的JS"/>
                            <Button Content="多少钱才可让人重拾理想"/>
                            <Button Content="准备购买的Dell服务器的硬件配置"/>
                        </StackPanel>
                    </GroupBox>
                </StackPanel>
                <StackPanel >

<Button Content=" 我铺满"/>

</StackPanel>
</DockPanel>

上面的DockPanel在进行自适应布局时，默认最后的一个区域时默认填充，可以理解为fill。而必须制定其他的区域后，该设置才有效，所以，我们上面设置了top,left,bottom 占用的空间都是0，这样，系统会将最后的一个子区域填充。

上面设置后的效果如下。

当然，这个页面的整体，我们也可以采用DockPanel进行布局，布局的效果，完全可以达到上述效果，下面我们来使用DockPanel来对整体进行布局吧。

最终的代码如下：

<DockPanel>
          <StackPanel DockPanel.Dock="Top" Height="100">
              <Grid>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="20"/>
                      <RowDefinition Height="50"/>
                      <RowDefinition Height="30"/>
                  </Grid.RowDefinitions>
                  <Grid >
                      <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
                          <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                          <Button Content="我的博客" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                          <Button Content="短消息" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                          <Button Content="设置" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                          <Button Content="退出" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                      </StackPanel>
                  </Grid>
                  <Grid Grid.Row="1">
                      <Image Source="/Samples;Component/Images/logo_small.gif" HorizontalAlignment="Left"/>
                  </Grid>
                  <Grid Grid.Row="2">
                      <StackPanel Orientation="Horizontal">
                          <Button Margin="5,0,0,0">园子</Button>
                          <Button Margin="5,0,0,0">新闻</Button>
                          <Button Margin="5,0,0,0">博问</Button>
                          <Button Margin="5,0,0,0">闪存</Button>
                          <Button Margin="5,0,0,0">网摘</Button>
                          <Button Margin="5,0,0,0">招聘</Button>
                          <Button Margin="5,0,0,0">专题</Button>
                          <Button Margin="5,0,0,0">知识</Button>
                      </StackPanel>
                  </Grid>
              </Grid>
          </StackPanel>
          <StackPanel DockPanel.Dock="Bottom" Height="30" Orientation="Horizontal" HorizontalAlignment="Center">
              <Button Margin="5,0,0,0">关于我们</Button>
              <Button Margin="5,0,0,0">联系我们</Button>
              <Button Margin="5,0,0,0">广告服务</Button>
              <Button Margin="5,0,0,0">人才服务</Button>
              <Button Margin="5,0,0,0">版权</Button>
          </StackPanel>
          <StackPanel DockPanel.Dock="Left" Width="150">
              <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                  <GroupBox Header="网站分类" Height="Auto">
                      <StackPanel Orientation="Vertical">
                          <Button Content=".NET技术(16)"/>
                          <Button Content="编程语言(13)"/>
                          <Button Content="软件设计(3)"/>
                          <Button Content="Web前端(16)"/>
                          <Button Content="软件工程(26)"/>
                      </StackPanel>
                  </GroupBox>
                  <GroupBox Header="链接" Height="Auto">
                      <StackPanel Orientation="Vertical">
                          <Button Content="反馈和建议"/>
                          <Button Content="官方博客"/>
                          <Button Content="电子期刊" />
                          <Button Content="人才服务"/>
                          <Button Content="博客模板"/>
                      </StackPanel>
                  </GroupBox>
              </StackPanel>
          </StackPanel>
          <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Width="200">
              <GroupBox Header="最新新闻" Height="160">
                  <StackPanel Orientation="Vertical">
                      <Button Content="宅急送近日宣布降价抢"/>
                      <Button Content="腾讯联手华为操盘四核手机"/>
                      <Button Content="Windows 8各版本区别与售价"/>
                      <Button Content="数方程将无线网络带宽提高一个数量级"/>
                      <Button Content="中移动：Lumia 920T将于11月上市"/>
                      <Button Content="Windows 8下一站：10月25日纽约"/>
                  </StackPanel>
              </GroupBox>
              <GroupBox Header="48小时阅读排行榜" Height="160">
                  <StackPanel Orientation="Vertical">
                      <Button Content="子用户-角色-权限-菜单浅谈：子账户设计方案"/>
                      <Button Content="网站已恢复正常，让大家久等了"/>
                      <Button Content="拿什么拯救你，我的51Job简历？——UBB漏洞"/>
                      <Button Content="这些年我们没用过的JS"/>
                      <Button Content="多少钱才可让人重拾理想"/>
                      <Button Content="准备购买的Dell服务器的硬件配置"/>
                  </StackPanel>
              </GroupBox>
          </StackPanel>
          <StackPanel >
              <Button Content=" 我铺满"/>
          </StackPanel>
      </DockPanel>

运行上述代码效果如下：

通过DockPanel完成对整体的布局，然后内部结合一些其他的布局控件，完成局部的细节的布局。

WrapPanel

WrapPanel容器我们也介绍过，该容器可以看做自动换行功能的StackPanel容器。下面我们就来分析下该容器的一般应用场景。

我们看到了windows8中的如下页面，如果我们仿制该页面的时候，其实我们可以采用wrappanel来实现自动的换行，下面我们来试试吧

最终代码如下：

<Window x:Class="Samples.Window8Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window8Window" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Label Content="开始" FontFamily="微软雅黑" FontSize="30"/>
        </Grid >
        <Grid Grid.Row="1">
            <WrapPanel Orientation="Horizontal" ItemHeight="100" ItemWidth="190">
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
            </WrapPanel>
        </Grid>
    </Grid>
</Window>

运行后，效果如下：

当然，我们的界面效果，还打不到美感，但是的确是自动换行。我们将水平方向，修改为垂直方向后，运行：

运行查看效果。

通过上面的简单案例，我们基本上知道了wrapPanel的用法。

总结

通过上面的介绍和demo的演示，我们知道了如何在项目中什么情况下，使用什么样的布局容器，通过实际的案例，我们更容易理解和掌握布局的模式。错误之处，还请大家反馈，我及时改正，谢谢！

时间： 2024-10-06 17:09:40

WPF Step By Step 完整布局介绍的相关文章

WPF入门教程系列六——布局介绍与Canvas

从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感觉这个软件没有多少使用价值. 一. 总体介绍 WPF的布局控件都在System.Windows.Controls.Panel这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进行排列组合. Pane类的公共属性太多了.就简单介绍几个常

WPF入门教程系列六——布局介绍与Canvas（一）

WPF学习（一）--布局控件简介

WPF的4种基本布局介绍 1.Grid的布局这个就没啥特别好说的,其实,基本上复杂的布局,都需要用到Grid. 主要就是对行和列进行进行设置和定义. 1.行表格列表格: 包含行和列的表格 2.StackPanel 垂直方向: 3.DockPanel 4.WarpPanel

WPF Step By Step 控件介绍

WPF Step By Step 控件介绍回顾上一篇,我们主要讨论了WPF的几个重点的基本知识的介绍,本篇,我们将会简单的介绍几个基本控件的简单用法,本文会举几个项目中的具体的例子,结合这些例子,希望我们可以对WPF的掌握会更深刻.本文涉及的内容可能较多.请大家慢慢看看.错误之处,还请指出. 本文大纲 1.基本控件介绍与用法. 基本控件介绍与用法文本控件 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label

C++开发WPF，Step by Step

示例代码使用C++来开发WPF,主要是如何在MFC(Win32)的窗口中Host WPF的Page.下面我就做个详细的介绍. 一.创建工程, 由于MFC的Wizard会生成很多用不到的代码,所以我准备从一个空的工程开始创建一个MFC的工程. a) 打开VS2005,菜单File->New->Projects-, 左面选择Visual C++->Win32,右面选择Win32 Console Application,给工程起个名字CPlusPlus_WPF, Ok进入下一

WPF Step By Step 系列-Prism框架在项目中使用

WPF Step By Step 系列-Prism框架在项目中使用回顾上一篇,我们介绍了关于控件模板的用法,本节我们将继续说明WPF更加实用的内容,在大型的项目中如何使用Prism框架,并给予Prism框架来构建基础的应用框架,并且如何来设计项目的架构和模块,下面我们就来一步步开始吧. 本文大纲 1.Prism框架下载和说明 2.Prism项目预览及简单介绍. 3.Prism框架如何在项目中使用. Prism框架下载和说明 Prism框架是针对WPF和Silverlight的MVVM框架,这

WPF Step By Step 自定义模板

WPF Step By Step 自定义模板回顾上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现的方案和最终的运行效果. 本文大纲 1.控件模板及数据模板 2.ListBox深度定制模板. 3.TreeView高级模板使用实例. 控件模板及数据模板控件模板什么是控件模板,指定可以在控件的多个实例之间共享 Control 的可视结构和性能方面的方面.控件模板其实就是我们在可视方面的自定义模板

WPF Step By Step 系列 - 开篇

公司最近要去我去整理出一个完整的WPF培训的教程,我刚好将自己学习WPF的过程和经验总结整理成笔记的方式来讲述,这里就不按照书上面的东西来说了,书本上一般都是按部就班,深入浅出.我这里主要是以实战和具体的代码为准来讲述. 目前使用WPF的时间不算长,大概有2年多,比园子里很多的大师,还是会差很多.现在才刚刚算是对WPF基本的应用时掌握了,但是距离UI设计方面,还是有很大的欠缺.由于本人不太擅长美感的东西. WPF参考书推荐下面先整理下,本人主要学习的WPF参考书: 1.WPF编程宝典(C#20

WPF MVVM 架构 Step By Step(6)（把actions从view model解耦）

到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击button这样的行为用命令来联系.view model和model在内部通信. 但是在上面的架构中有一个问题,command类和view model有很严重的耦合.如果你记得command类的代码(在下面也有展示),在构造函数中传递view model对象,意味着这个command 类不能再其他的vie