Silverlight玩转控件(三)——StackPanel布局
来源:互联网 发布:drools rete算法 编辑:程序博客网 时间:2024/05/21 03:59
d在上一次文章中,我们介绍了Canvas的布局。我们也知道,在Silverlight中有Canvas,StackPanel,Grid三种布局方式,今天我们就来详细地说一下StackPanel的布局。
Stack,栈!这个词我们大家再熟悉不过,一种先进后出的数据结构。我觉得用这个来比喻我们这种布局方式蛮形象。呵呵,稍后再说这个。
StackPanel其实像极了JAVA GUI中的FlowLayout,流布局。
我们来看个例子:
<StackPanel Background="White"> <Button Content="AAA"></Button> <Button Content="BBB"></Button></StackPanel>
效果如下:
想起来FlowLayout了么?
我们看看默认的布局方式:
1. 默认情况下,是水平布局。像不像一个栈底在上的栈,我们把每个控件不停地压进去呢?
2. 默认情况下,是Stretch,也就是拉伸方式来填充我们的控件屏幕。
好,那我们如何改变。
先来看第一种情况,让我们将水平布局改成垂直布局。
<StackPanel Background="White" Orientation="Horizontal"> <Button Content="AAA"></Button> <Button Content="BBB"></Button></StackPanel>
效果如下:
看到啦!拉伸效果,垂直布局。
接下来,我们不允许按钮以拉伸方式来填充控件空间。很简单,我们来显式地设置控件的长和宽就OK了!看代码:
<StackPanel Background="White"> <Button Content="AAA" Width="30"></Button> <Button Content="BBB" Width="60"></Button></StackPanel>
垂直布局情况下也是一样,只不过我们在水平布局的时候设置的是控件的Width属性,而当我们垂直布局的时候只需要设置控件的Height属性罢了!
接下来,我们看一个小技巧,在上文中,我们看到我们可以自己定制控件的长宽,使其避免以拉伸方式填充屏幕。但是我们这个时候发现,控件都是以居中方式布局。
好了,我们在上文中提出了两种默认的布局情况,在这里我们提出第三条:
3. 默认情况下,是居中布局。
同样,我们也是考虑如何修改,这里给出两种修改的方式:
1. 为每个控件提供自己独有的布局方式:
<StackPanel Background="White"> <Button Content="AAA" Width="30" HorizontalAlignment="Left"></Button> <Button Content="BBB" Width="60" HorizontalAlignment="Center"></Button> <Button Content="CCC" Width="30" HorizontalAlignment="Right"></Button></StackPanel>
当然,我们还可以用我们熟悉的Margin属性来改变布局方式:
<StackPanel Background="White"> <Button Content="AAA" Width="30" Margin="10,0,0,0"></Button> <Button Content="BBB" Width="60" Margin="20,40,20,19"></Button> <Button Content="CCC" Width="30" ></Button></StackPanel>
我们看到的并非我们想象中的代码,而是:
其实,他的Margin的距离是这样的:(我们在这里只限于讨论水平布局的情况):
Left – Right: 于居中布局的距离
Top:于顶部控件(如果是最顶部控件则是屏幕最上方)的距离
Buttom:于底部控件(如果是最底部控件则是屏幕最下方)的距离
恩!好了,说过的水平的布局,垂直的布局其实也是一样:
我们来看下代码:
<StackPanel Background="White" Orientation="Horizontal"> <Button Content="AAA" Width="30" VerticalAlignment="Bottom"></Button> <Button Content="BBB" Width="60" VerticalAlignment="Center"></Button> <Button Content="CCC" Width="30" VerticalAlignment="Top"></Button></StackPanel>
所得到的效果如下:
好了,StackPanel的基本布局方式就说到这里,关于StackPanel的技巧型用法也像我上文中所说的Panel局部一样,不再赘述。
在这里,我谈下对StackPanel的看法。个人认为,在实际应用中,StackPanel的应用并不广泛,他没有Panel的灵活,也没有Grid的定制,因此相对属于一个鸡肋的布局控件。
好了,今天就说到这- Silverlight玩转控件(三)——StackPanel布局
- Silverlight玩转控件(二)——Canvas布局
- Silverlight玩转控件(四)——Grid布局
- silverlight三个基本布局控件(Canvas、StackPanel、Grid ) 详解
- Silverlight:三个基本布局控件(Canvas、StackPanel、Grid )
- Silverlight 三个基本布局控件(Canvas、StackPanel、Grid )
- WPF之路——StackPanel布局(堆栈面板)
- WPF 4.5 和C#(3.1)——布局(Stackpanel, Margin)
- WPF快速入门2—布局WrapPanel,DockPanel,StackPanel
- 【WPF】—StackPanel && Grid 初识布局容器(1)
- StackPanel布局
- silverlight Canvas、StackPanel、Grid三者之间的关系
- Silverlight开发历程—(布局控件-Canvas)
- wpf之布局控件stackpanel、wrappanel、dockpanel的前世今生
- 布局篇-StackPanel布局
- 布局篇-StackPanel布局
- Silverlight布局控件
- WPF控件-StackPanel控件
- DigitalOcean和ghost搭建个人blog[1]
- 炫酷!简化if语句
- [言简意赅]ccx-lua 和 ccx-js 相比有哪些优势
- 戏谈:设计模式之观察者模式(二)
- 最初的梦想
- Silverlight玩转控件(三)——StackPanel布局
- poj3258River Hopscotch(二分)
- cx_freeze生成可执行文件.exe,运行时去掉黑框的方法
- hdu1249
- cocos2d下载官网
- touch,keydown事件遇到的问题
- Silverlight玩转控件(四)——Grid布局
- 由谷歌语音服务想到的
- poj 2528 Mayor's posters(数据结构:线段树+离散化)