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人

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

WPF布局

本文通过5个实例来演示WPF中5个常用布局控件Grid、StackPanel、DockPanel、Canvas、WrapPanel的使用方法。   实例1 使用Grid进行布局 使用Grid将画面分割...
  • tiana0
  • tiana0
  • 2014-08-24 15:53
  • 2030

WPF实例

9.5 WPF实例--TextReader前面简单介绍了WPF应用程序的类型和开发模式,本节将通过一个WPF独立应用程序实例TextReader进一步介绍WPF应用程序开发的一般过程。9.5.1 Te...
  • vssvss
  • vssvss
  • 2009-10-26 13:18
  • 11386

使用Grid来对WPF页面进行布局排版

对于以前用 Windows Form 来开发客户端程序的程序员,在使用 WPF 开发客户端的程序时,在窗体布局上将是他必须面对的一个坎。       布局产生困惑的一个典型场景如下:     ...

Win10 UWP开发系列:实现Master/Detail布局

在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式。Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面。关于这种 样式的说明可参看MSDN文档:...

C#学习笔记-WPF前端布局和控件的使用

最近在做一个串口助手程序练练手,之前对wpf的很多控件不熟悉,在学习上不怎么全面,我也只有用哪里学哪里的笨办法了,这样掌握的快一点。 下面就是当时使用控件的一些笔记:     checkbox复选框,...

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

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

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

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

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

有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了。先分析...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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