Windows8应用开发学习(二)布局控件篇

      我们可以用XAML来绘制Windows8应用的UI, 关于XAML语言,不在此详述,google之,bing之,莫度娘之。。。- -# 控件大概可分为布局控件,数据绑定控件以及常规控件。本篇只介绍布局控件,常规控件将在下一篇介绍,数据绑定控件会在以后的数据绑定篇介绍。

布局控件

Grid

Grid类似于HTML中的table, 可自定义m行n列,见如下代码:

 1 <Grid>
 2             <Grid.RowDefinitions>
 3                 <RowDefinition Height="*"/>
 4                 <RowDefinition Height="*"/>
 5                 <RowDefinition Height="*"/>
 6             </Grid.RowDefinitions>
 7             <Grid.ColumnDefinitions>
 8                 <ColumnDefinition Width="*"/>
 9                 <ColumnDefinition Width="*"/>
10                 <ColumnDefinition Width="*"/>
11             </Grid.ColumnDefinitions>
12 </Grid>
这段代码定义了一个三行散列的Grid, 每一行高度一样,每一列宽度也一样。如果我们将Height或者Width设置为auto, 行高和列宽会随着内容而改变,也可设为数值,如100,200. “*”为占满所有控件,我们可以通过设置“x*”来按比例控制。如上代码,设置了三行,行高均为“*”, 这Grid的三行行高相同,如设置为"*", "2*", "*", 则为第一行行高占整个控件高度的25%, 第二行行高占整个控件高度的50%, 第三行行高占整个控件高度的25%.
像Grid中填充元素,需要给填充的元素制定位于哪一行哪一列,如下:
View Code
 1         <Grid>
 2             <Grid.RowDefinitions>
 3                 <RowDefinition Height="*"/>
 4                 <RowDefinition Height="*"/>
 5                 <RowDefinition Height="*"/>
 6             </Grid.RowDefinitions>
 7             <Grid.ColumnDefinitions>
 8                 <ColumnDefinition Width="*"/>
 9                 <ColumnDefinition Width="*"/>
10                 <ColumnDefinition Width="*"/>
11             </Grid.ColumnDefinitions>
12             <TextBlock Grid.Row="0" Grid.Column="0" Text="第一行第一列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>            
13             <TextBlock Grid.Row="0" Grid.Column="2" Text="第一行第三列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
14             <TextBlock Grid.Row="1" Grid.Column="1" Text="第二行第二列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
15             <TextBlock Grid.Row="2" Grid.Column="0" Text="第三行第一列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
16             <TextBlock Grid.Row="2" Grid.Column="2" Text="第三行第三列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
17         </Grid>

运行效果如下:

由代码可知,index从0开始算起,这对我们码屌来说并不陌生。

StackPanel

这玩意儿它会自动帮你排列控件,你只需要给它设置是让控件横着排还是竖着排就好了,见代码:

 1         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
 2             <TextBlock Text="横一" FontSize="30" Margin="10"/>
 3             <TextBlock Text="横二" FontSize="30" Margin="10"/>
 4             <TextBlock Text="横三" FontSize="30" Margin="10"/>
 5         </StackPanel>
 6         <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Top">
 7             <TextBlock Text="竖一" FontSize="30" Margin="10"/>
 8             <TextBlock Text="竖二" FontSize="30" Margin="10"/>
 9             <TextBlock Text="竖三" FontSize="30" Margin="10"/>
10         </StackPanel>

运行结果如下:

第一个StackPanel的Orientation属性设置为Horizontal, 则控件在里面为横向排列,第二个StackPanel的Orientation属性设置为Vertical, 则控件在里面为纵向排列。HorizontalAlignment和VerticalAlignment分别设置了横向和纵向对齐方式。

VirtualizingStackPanel

看名字就知道这哥们和StackPanel是哥俩好,不过它稍微牛逼一点,但它也不能单独拿出来使用,一般作为包含item的数据绑定控件(eg. GridView, ListView等)的ItemsPanel使用,从外观上表现为一个包含在ScrollViewer中的StackPanel,我们可以通过拖动滚动条来查看数据。优点在于,通过拖动滚动条查看数据时,在数据进入可视范围前,并不加载数据,而是在滚动进度条使item进入可视范围时才会加载,这对节省内存改变性能有很大好处。代码如下:

1 <ListView>
2     <ListView.ItemsPanel>
3         <ItemsPanelTemplate>
4             <VirtualizingStackPanel Orientation = "Vertical" />
5         </ItemsPanelTemplate>
6     </ListView.ItemsPanel>
7 </ListView>

WrapGrid

WrapGrid同样不可以单独拿出来使用,它也要作为包含item的数据绑定控件的ItemsPanel使用,从命名可以看出,它是支持wrap的,当我们给它设置了orientation, height和width属性,item排列时会在达到WrapGrid边缘时自动换到下一行或下一列,见代码:

1         <ListView>
2             <ListView.ItemsPanel>
3                 <ItemsPanelTemplate>
4                     <WrapGrid Orientation="Horizontal" Width="500" Height="300"/>
5                 </ItemsPanelTemplate>
6             </ListView.ItemsPanel>            
7         </ListView>

此代码设置了WrapGrid中的元素横向排列,WrapGrid宽500,高300,若item的宽为100,则第五个元素刚好充满容器的第一行,第六个元素则会自动换到第二行进行排列。

VariableSizedWrapGrid

从命名上不难看出,VariableSizedWrapGrid具备WrapGrid的wrap功能,并且每一个item的size可以不同,这个控件还可以单独拿来使用。见代码:

1         <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="100" ItemWidth="200">
2             <Rectangle Fill="Blue"/>
3             <Rectangle Fill="Green" VariableSizedWrapGrid.ColumnSpan="2"/>
4             <Rectangle Fill="Red" VariableSizedWrapGrid.RowSpan="2"/>
5             <Rectangle Fill="Yellow"/>
6             <Rectangle Fill="Aqua" VariableSizedWrapGrid.RowSpan="2"/>
7             <Rectangle Fill="Orange"/>
8         </VariableSizedWrapGrid>

运行结果如下:

ViewBox

ViewBox可以让它包含的元素根据它的大小进行缩放,这个控件只能包含一个子元素。见代码:

 1         <StackPanel Orientation="Horizontal">
 2             <Rectangle Width="200" Height="200" Fill="Green" Margin="50"/>
 3             <StackPanel>
 4                 <Viewbox Height="100" Width="100" Stretch="Uniform" StretchDirection="Both">
 5                     <Rectangle Width="200" Height="200" Fill="Blue"/>
 6                 </Viewbox>
 7                 <Viewbox Height="300" Width="300" Stretch="Uniform" StretchDirection="Both">
 8                     <Rectangle Width="200" Height="200" Fill="Red"/>
 9                 </Viewbox>
10                 <Viewbox Height="300" Width="200" Stretch="Fill" StretchDirection="Both">
11                     <Rectangle Width="200" Height="200" Fill="Yellow"/>
12                 </Viewbox>
13             </StackPanel>
14         </StackPanel>

运行效果:

绿色矩形为原始大小,蓝色、红色和黄色为通过ViewBox缩放后的大小。

Canvas

这个控件就比较简单了,主要用作在上面摆放其他控件,可以通过设置摆放控件的Canvas.Left和Canvas.Top属性来控制控件在Canvas中的摆放位置。代码如下:

1         <Canvas Background="Green" Width="300" Height="300">
2             <Rectangle Canvas.Left="50" Canvas.Top="100" Width="100" Height="100" Fill="Blue"/>
3         </Canvas>

运行效果:

'

蓝色矩形位于距离Canvas顶端100, 左边缘50的位置。

OK, 今天先到这里。

posted @ 2013-03-25 14:22  Allen Li  阅读(1931)  评论(2编辑  收藏  举报