WPF教程(二十六)StackPanel

2016-10-23 12:29:16来源:CSDN作者:seanbei人点击

第七城市

StackPanel基本和WrapPanel一样,但是有一个重要的区别:StackPanel不会自动切换内容。相反,它会让内容朝一个方向延伸,一个接一个的堆起来。先来快速看一个例子:

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="StackPanel" Height="160" Width="300">        <StackPanel>                <Button>Button 1</Button>                <Button>Button 2</Button>                <Button>Button 3</Button>                <Button>Button 4</Button>                <Button>Button 5</Button>                <Button>Button 6</Button>        </StackPanel></Window></span>
A simple StackPanel in Vertical mode

一眼就能看出StackPanel根本不管是否有足够的空间放下里面的内容,它不会以任何形式包住内容,也不会自动提供滚动的功能(你可以添加一个ScrollViewer控件来实现滚动,后面会讲到)。

我们还发现,StackPanel默认的排列方向是垂直的,不像WrapPanel默认的是水平方向。这个方向也是很容易就能修改的:

<span style="font-size:14px;"><StackPanel Orientation="Horizontal"></span>
A simple StackPanel in Horizontal mode

另外一个你值得注意的是,StackPanel会自动延伸它的子控件。在一个垂直向的StackPanel里,所有的子控件往水平方向延伸,如前面第一个例子就是。而在一个水平向的StackPanel,所有子控件往垂直方向延伸,如上面这个例子。StackPanel通过设置子控件的HorizontalAlignment和VerticalAlignment属性来实现延伸,你可以随时重写这两个属性。下面我们把上面的例子稍作修改,给所有的按钮指定VerticalAlignment属性:

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="StackPanel" Height="160" Width="300">        <StackPanel Orientation="Horizontal">                <Button VerticalAlignment="Top">Button 1</Button>                <Button VerticalAlignment="Center">Button 2</Button>                <Button VerticalAlignment="Bottom">Button 3</Button>                <Button VerticalAlignment="Bottom">Button 4</Button>                <Button VerticalAlignment="Center">Button 5</Button>                <Button VerticalAlignment="Top">Button 6</Button>        </StackPanel></Window></span>
A StackPanel in Vertical mode with differently aligned controls

我们使用Top、Center和Bottom值来将按钮放置成一个漂亮的模式,当然只是为了好玩。同样的,垂直向的StackPanel也可以这样做,使用HorizontalAlignment属性:

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="StackPanel" Height="160" Width="300">        <StackPanel Orientation="Vertical">                <Button HorizontalAlignment="Left">Button 1</Button>                <Button HorizontalAlignment="Center">Button 2</Button>                <Button HorizontalAlignment="Right">Button 3</Button>                <Button HorizontalAlignment="Right">Button 4</Button>                <Button HorizontalAlignment="Center">Button 5</Button>                <Button HorizontalAlignment="Left">Button 6</Button>        </StackPanel></Window></span>
A StackPanel in Horizontal mode with differently aligned controls

如你所见,按钮依旧从上往下排列,不同的是它们按设置的属性值分布到左边、右边和中间。





第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台