Windows 8实例教程系列 - 布局控制

原创 2013年03月04日 01:06:23

与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI。 本篇将讨论Windows8布局设计控制。

Windows 8布局控件

在Windows Store应用设计中,布局控件是控制对象位置和尺寸的,由于Windows Store应用不仅仅面向桌面操作系统,而且还需要适应移动设备的部署,所以在设计时,往往需要考虑到不同的分辨率或者硬件屏幕尺寸标准下应用布局的适配性,最大程度的保持设计灵活性是应用设计原则重要环节之一。根据功能性不同,Windows 8为开发人员提供丰富的布局控件,以达到应用布局设计需求。其中包括:

Grid 

Canvas

StackPanel

WrapGrid

VariableSized WrapGrid

Virtualizing StackPanel

从MSDN开发文档中可以看出,以上布局控件皆派生自Panel类,而Panel类可以装载不同类型的控件作为子控件。

而熟悉Silverlight,WPF和Windows Phone的开发人员会发现一些布局控件是相同的。下面我们快速浏览这些布局控件的效果以及使用方法,

 

Grid

Grid是类似于HTML表格的一种布局控件,由于其灵活性高,所以在应用设计中经常被使用到。一个Grid控件包含一个Row(行)和Column(列)的集合。开发人员可以将不同的对象控件布置在不同的行列中,达到位置控制的效果。

基本代码:

<Grid x:Name="myGrid"></Grid>

表格定义代码:

复制代码
<Grid x:Name="myGrid">

<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
复制代码

在以上代码中,Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定义两行两列的Grid,这里使用附加属性RowDefinitions描述行列集合。(附加属性(Attached Property)XAML重要概念,详细请参考 XAML实例教程系列

后台代码声明行和列集合 :

Grid.RowDefinitions = new List<RowDefinitions>();

Grid.ColumnDefinitions = new List<ColumnDefinitions>();

完成表格的定义,将控件对象放在指定的表格位置,例如在第一行第一列添加一个TextBlock文本框,代码如下:

复制代码
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbName" Grid.Row="0" Grid.Column="0" />
</Grid>
复制代码

从代码中可以看出,因为在TextBlock中,没有实现Row和Column的属性,所以放置控件对象到表格是通过附加属性Grid.Row和Grid.Column实现的。通过附加属性和依赖属性的概念,可以理解通过Grid可以存取其所有的子控件。

在完成控件的位置控制后,下面来看看尺寸控制,Grid有三种常见尺寸控制方法:

1. 绝对尺寸控制, 该方法是直接设置固定的宽度和高度值,其局限性比较大,例如,定义行高50像素,列宽150像素的表格,代码如下:

复制代码
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
</Grid>
复制代码

2. 相对尺寸控制,该方法使用"*"符号作为宽或高的值,其含义是控件对象将占据布局控件中剩余所有有效空间。由于是由星型标志组成,所以也可以称为星型尺寸控制。该方法可以灵活控制表格的宽度和高度,所以在布局设计中非常实用。

例如:定义一个第一行是第二行高度两倍的表格,其代码如下:

复制代码
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
复制代码

以上代码无论第一行控件占据空间多少,都永远是第二行的两倍高度。例如,如果Grid高度为600像素,那么第一行则被分配400px,第二行则是200px。

如果在以上表格中添加一个3*,其表格比率则为3:2:1, 则行高度将被分配为300px, 200px, 100px.

3. 自动尺寸控制, 设置宽度和高度为“Auto”,该方法将根据控件对象的高度和宽度自动调节分配表格高度和宽度,该控制方式经常与相对尺寸控制配合使用。例如下面的代码,第一行高度将根据控件的高度自动分配,而第二行高度则取剩余布局控件高度值。

复制代码
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
复制代码

实例代码:

复制代码
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="普通按钮" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="1" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="2" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="3" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Left" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="2" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Right" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="3" d:IsHidden="True"/>
    </Grid>
复制代码

 

Canvas

Canvas被称为最简单的布局控件,其使用绝对位置控制对象的位置。声明定义Canvas后,对象使用附加属性Canvas.Left 和 Canvas.Top设置相对左距离和上距离,以达到控制对象显示位置的目的。另外Canvas还提供了ZIndex属性定义控件Z坐标,如果有两个控件重叠覆盖,则ZIndex值越大的控件显示在上方。

实例代码:

复制代码
<Canvas Margin="0" Grid.Row="1">
            <Button Content="布局按钮" Canvas.Left="785" Canvas.Top="427"/>
            <TextBlock Canvas.Left="814" TextWrapping="Wrap" Text="布局文本" Canvas.Top="248" FontSize="24"/>
            <TextBlock Canvas.Left="355" TextWrapping="Wrap" Text="布局文本" Canvas.Top="203" FontSize="24" />
            <TextBlock Canvas.Left="420" TextWrapping="Wrap" Text="布局文本" Canvas.Top="450" FontSize="24"/>
            <Rectangle Fill="Red" Height="50" Width="70" Canvas.Top="319" Canvas.Left="241" />
            <Ellipse Fill="Yellow" Height="75" Width="75" Canvas.Top="202" Canvas.Left="611" />
        </Canvas>
复制代码

 

StackPanel

StackPanel控件被称为堆栈面板,也被称为列表控件,该控件没有行或者列的概念,只有水平对齐和垂直对齐的概念。在StackPanel中使用Orientation属性设置内部对象的对齐方式。

但是由于StackPanel对于内部对象位置控制较为直接和简单,通常来说,需要使用Margin属性调节对象的间距。

实例代码:

复制代码
<StackPanel Margin="0" Grid.Row="1">
            <Button Content="头部" HorizontalAlignment="Stretch"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="底部" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
            </StackPanel>
        </StackPanel>
复制代码

 

 

WrapGrid

WrapGrid可以理解为特殊的Grid,普通的Grid是通过行和列制定对象的位置,而WrapGrid是根据对象集合的尺寸的不同显示不同的效果。WrapGrid的子控件集合类型是ItemsControl,按照从左到右,从上到下的顺序展示集合中的子元素到用户界面,当元素到达WrapGrid最右边或者最下边,将自动开始新的行或者列继续展示剩余的子元素,直到列举所有元素完成。

在WrapGrid中,使用Orientation控制子元素显示方向,默认情况下,将以垂直的方式展示。

复制代码
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation = "Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
复制代码

实例代码:

复制代码
<ItemsControl x:Name="xItems">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
复制代码

 

VariableSizedWrapGrid

VariableSizedWrapGrid控件和StackPanel非常类似,其布局效果是从左到右从上到下展示布局内子元素。

与StackPanel不同的是VariableSizedWrapGrid控件子元素到达右边界或下边界是将自动切换新行或者列继续展示子元素,直到达到MaximumRowsOrColumns值或者所有子元素展示完毕。

该控件可以通过VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan附加属性跨行或跨列显示子对象元素。

另外值得注意的是,正如VariableSizedWrapGrid名字所言,VaribaleSized,其含义是每个Cell单元会根据子控件内容的不同动态填充尺寸。

复制代码
<VariableSizedWrapGrid Orientation = "Horizontal">
<TextBlock> 文本1</TextBlock>
<TextBlock> 文本2</TextBlock>
<TextBlock></TextBlock>
<TextBlock> 测试文本1</TextBlock>
</VariableSizedWrapGrid>
复制代码

实例代码:

 

复制代码
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
            <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
            <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
        </VariableSizedWrapGrid>
复制代码

 

VirtualizingStackPanel

VirtualizingStackPanel是一款同样类似于StackPanel的布局控件,与StackPanel不同的是VirtualizingStackPanel在数据绑定后仅显示当前绑定项,而并非全部数据集合。这样的绑定显示方式在载入超大数据量时,性能差异非常明显,VirtualizingStackPanel数据载入比StackPanel快出数十倍,其内存占有率非常低。

VirtualizingStackPanel很少被用于独立控件效果,经常会配合ListBox,ComboBox等ItemsControl使用,主要用于大数据量绑定。

复制代码
  <ComboBox x:Name="comboboxList1" VerticalAlignment="Top">
            <ComboBox x:Name="comboboxList2" VerticalAlignment="Top">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
        </ComboBox>
复制代码

代码实例:

复制代码
        <StackPanel>

            <StackPanel.Resources>
                <local:LotsOfItems x:Key="data"/>
            </StackPanel.Resources>

            <ListBox Height="150" ItemsSource="{StaticResource data}"
                     VirtualizingStackPanel.VirtualizationMode="Recycling">
            </ListBox>

        </StackPanel>
复制代码

 

Border

Border是最后要提及的布局控件,由于它不是派生自Panel类,所以放在最后讲述。Border是Windows store应用中常见的布局控件之一,主要目的是显示一个边框在一个或者多个对象外围。

开发人员可通过Border属性控制其边框效果以及显示位置等。

<Border BorderBrush="Red" BorderThickness="2" Width="150"
            Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
   <TextBlock Text="边框演示" />
</Border>

实例代码:

复制代码
<Border BorderBrush="Yellow"
                BorderThickness="3"
                Width="220"
                Height="100"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="549,363,0,0">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="边框演示:Windows 8实例教程 - 银光中国" />
                <TextBlock Text="Http://www.silverlightchina.net" />
            </StackPanel>
        </Border>
复制代码

 

本篇就讨论到这里,欢迎大家一起讨论学习。

源代码下载


 

 

欢迎大家留言讨论学习Windows 8应用开发,希望能够看到更多优秀的Windows store应用。

欢迎大家加入QQ技术群,一起学习讨论Windows 8&Silverlight&WPF&Widnows Phone开发技术。 
22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人

Windows 8实例教程系列

与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI。 本篇将讨论Windows8布局设计控制。 Windows 8布局控件 在Windows Store应用设计中,...

Windows 8实例教程系列 - 理解应用框架

Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的。Windows 8继承Windows桌面的优点,同时提供一种新的用...
  • jv9
  • jv9
  • 2012年11月21日 15:14
  • 2363

Windows 8实例教程系列 - 数据绑定高级实例

上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用。本篇将介绍较为复杂的数据绑定控件实例, 其中包括ListV...
  • jv9
  • jv9
  • 2013年03月26日 11:27
  • 1802

Windows 8实例教程系列 - 数据绑定基础实例

数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windo...
  • jv9
  • jv9
  • 2013年03月25日 15:06
  • 5439

十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程

一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问...
  • jarniyy
  • jarniyy
  • 2016年03月21日 14:46
  • 3329

Windows 8 Metro 开发疑难杂症——不规则宫格布局以及不同Item对应不同模版

我先介绍下win8里面带有的列表控件: ItemsControl  ItemsControl  是所有列表控件的基类,实际使用过程中不常用。ListBox listbox控件在win8里面的地位...

第十天 div+css网页标准布局实例教程(三)

前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了。为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的列表页详细页等页面也得做。还要配合程序员把整个网站完成,这样才...

第十天 div+css网页标准布局实例教程(一)

今天学习《十天学会web标准(div+css)》的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的完成,整个流...

十天学会DIV+CSS第十天 div+css网页标准布局实例教程

有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了。先分析...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Windows 8实例教程系列 - 布局控制
举报原因:
原因补充:

(最多只允许输入30个字)