WPF Step By Step 完整布局介绍

回顾

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

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

本文大纲

1、Grid

2、StackPanel

3、DockPanel

4、WrapPanel

Grid

1、Row和Column

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

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

image

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

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

image

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

image

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

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

image

1、自适应区域:

image

2、顶部对齐或底部对齐

image

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

3、左右对齐时:

image

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

例如下图:

image

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

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

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

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

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

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

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

 

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

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

下面我们就来实现下:

先设置大体布局如下:

image

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

<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进行布局。

image

image

image

对于这类的固定的区域,我们可以不适用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>

运行效果如下:

image

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

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

image

我们通过表格中的使用对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的方向后,所有的子控件,都是从右向左方向进行绘制和显示,效果如下:

image

所以对于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,这样,系统会将最后的一个子区域填充。

上面设置后的效果如下。

image

当然,这个页面的整体,我们也可以采用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>

 

运行上述代码效果如下:

image

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

 

 

 

WrapPanel

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

image 我们看到了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>

 

运行后,效果如下:

image

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

image

运行查看效果。

image

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

 

总结

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

thedarkside

这是一个最好的时代,这是一个最坏的时代。

stay connected

228,480

Fans

21,563

Followers

20,563

Followers

8,125

Subscribers

2,253

Subscribers

10,563

Followers

最新文章

entertainment
Buckingham Palace soil used in Tate exhibit
Oct 13, 2016
Sports
Legendary coach Steve Spurrier was truly
Oct 13, 2016
Technology
Acer reveals all-in-one Windows 10 PC
Oct 13, 2016
entertainment
Revival allows Selena Gomez to shed
Oct 13, 2016
entertainment
Buckingham Palace soil used in Tate exhibit
Oct 13, 2016
Sports
Legendary coach Steve Spurrier was truly
Oct 13, 2016
Technology
Acer reveals all-in-one Windows 10 PC
Oct 13, 2016
entertainment
Revival allows Selena Gomez to shed
Oct 13, 2016