波斯马BOSSMA Information Technology

Silverlight布局控件[2]–StackPanel

发布时间:2008年11月15日 / 分类:ASP.NET, Silverlight / 11,084 次浏览 / 评论

[源自Silverlight tutorial和Silverlight Documentation]

布局控件在Silverlight应用程序中是必需的,它用来管理你应用中的其它控件(包括布局控件)。你可以把布局控件想象为“容器”。我们经常使用的布局控件有三个:
这三个控件都继承于Panel,具体详情请查看官方文档。


Grid: 表格,通过列和行指定对象的位置
StackPanel: 一个接一个的排列对象
Canvas: 按照其中控件的绝对位置布局

这篇文章介绍StackPanel控件:
StackPanel控件通常结合其它布局控件,它允许你处置的堆放一个个的对象,或者并排放置(像书架上的书)。
使用这个控件的一个便利就是,你不用其中对象的位置,这些对象会自动定位自己相对于它前面已经定义的控件。

1、一个垂直堆放的例子
在这个例子中,我们会从下到上对方这几个控件:一个CheckBox,一个Button,一个TextBox,一个TextBlock.

<UserControl x:Class="SLDemo.StackPanel"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="400" Height="300">
 <StackPanel Background="Beige" Orientation="Vertical" >
 <TextBlock Text="Your name?" HorizontalAlignment="Left" Margin="10,2,0,1"/>
 <TextBox Width="150" Height="30" HorizontalAlignment="Left" Margin="10,2,0,1"/>
 <Button Content="Submit this information" HorizontalAlignment="Left" Margin="10,2,0,1" Height="30" Width="150" />
 <CheckBox Content="With Zing!" HorizontalAlignment="Left" Margin="10,2,0,1" />
 </StackPanel>
</UserControl>

Orientation指定了堆放的方式,在这里是垂直。
其中控件定义的顺序决定了他们堆放的顺序。

StackPanel效果图1

StackPanel效果图1

关于控件的margin属性,原文做了详细说明,因我在上一篇文章中已做了详细介绍,而且这个属性和css中的margin极其相似,这里进提供一个例子:

<StackPanel Background="Beige" Orientation="Vertical" >
 <TextBlock Text="Your name?" HorizontalAlignment="Left" Margin="10,2,0,1"/>
 <TextBox Width="150" Height="30" HorizontalAlignment="Left" Margin="50,30,240,40"/>
 <Button Content="Submit this information" HorizontalAlignment="Left" Margin="10,2,0,1" Height="30" Width="150" />
 <CheckBox Content="With Zing!" HorizontalAlignment="Left" Margin="10,2,0,1" />
 </StackPanel>
stackpanel效果图2

stackpanel效果图2

2、一个水平堆放的例子

<StackPanel Background="Beige" Orientation="Horizontal" >
 <TextBlock Text="Your name?" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1"/>
 <TextBox Width="150" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1"/>
 <Button Content="Submit this information" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1" Height="30" Width="150" />
 <CheckBox Content="With Zing!" HorizontalAlignment="Left" VerticalAlignment="Center"? Margin="10,2,0,1" />
</StackPanel>

做了哪些更改呢?
1、VerticalAlignment=”Center”
2、Orientation=”Horizontal”

关于StackPanel更多的属性,请参看文档中的介绍。
OK,这一节就到这里。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Silverlight布局控件[2]–StackPanel

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论