WP7开发第二课:基本布局系统以及基本控件(其一)
2011-08-29 21:58
225 查看
上一课主要讲WP7应用的一些基本常识,是作为快速上手使用的,但是这往往是不够的,我们还需要知道更多的细节,那么接下来的几课就比较有针对性的讲一些知识。
当然,我们一般先从控件开始,WP7的控件基本上是来自silverlight控件,当然它也去除了一些不适合WP7的东西。
首先我们来看下布局控件吧。
一:StackPanel 这是一个堆栈面板,其子元素一般是按照横排,或是竖排,放置,默认为竖排。可以设置Orientation属性
调整子元素排布方式。例如:
<StackPanel Orientation="Horizontal"> <Button Content="按钮"/> <Button Content="按钮"/> <Button Content="按钮"/> <StackPanel> <Button Content="按钮"/> <Button Content="按钮"/> <Button Content="按钮"/> </StackPanel> </StackPanel>
从上面可以知道:容器为:StackPanel,其子组件是横排列,其中一个组件又有子组件,里面内容默认是竖排列,因为StackPanel默认为竖排列方式。
结果如下:
![](http://pic002.cnblogs.com/images/2011/100754/2011082920434888.jpg)
二:Canvas这是一个画布面板(绝对布局),其子元素一般是依据Canvs的属性进行排布,也就是依赖属性,相当于x,y坐标,但是它是Canvas.Top,Canvas.Left表示。例如:
<Canvas> <Button Content="按钮" Canvas.Left="0" Canvas.Top="0"/> <Button Content="按钮" Canvas.Left="80" Canvas.Top="0"/> <Button Content="按钮" Canvas.Left="160" Canvas.Top="0"/> <Button Content="按钮" Canvas.Left="80" Canvas.Top="45"/> </Canvas>
以上我们定义4个按钮,然后设置其Canvas.Top,Canvas.Left 属性,也就是y,x方向坐标,当然默认为0,0,得到如下所示:
![](http://pic002.cnblogs.com/images/2011/100754/2011082920544396.jpg)
三:Grid这是一个表格面板(相当于Table),其子元素一般是依据Grid指定的单元格布局,可以设定子元素为哪行哪列,也可以合并2个单元格,这与普通的Table是一样的。合并单元格的属性主要是: Grid.RowSpan="2" Grid.ColumnSpan="2" 合并2行或者 2列。例如:
<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Content="按钮"/> <Button Content="按钮" Grid.Row="1" Grid.Column="0" Background="Blue"/> <Button Content="按钮" Grid.Column="1" Grid.RowSpan="2" Background="Gray"/> <Button Content="按钮" Grid.Row="2" Grid.ColumnSpan="2" Background="Red"/> </Grid>
以上定义3行2列的表格,默认的子组件位于一行一列,也就是Grid.Row="0" Grid.Column="0" ,它是以0为索引开始布局的。我们需要注意的是
Grid.RowSpan="2" Grid.ColumnSpan="2" 属性,它表示跨越2行,跨越2列的内容,显示结果为:
![](http://pic002.cnblogs.com/images/2011/100754/2011082921485325.jpg)
看见了吧,Grid是很有用处的。
以上就是主要的布局容器,可以作为顶层容器,也可以作为子容器,一般是不能被其他非容器包含的,但是有个东西除外,那就是Border,这个是边框,可以为容器设定一个边框,例如下面:
<Border BorderThickness="10" BorderBrush="Yellow"> 容器</Border>
运行结果如下:
![](http://pic002.cnblogs.com/images/2011/100754/2011082921544974.jpg)
好了,就到这里,比较简单,但是如果能好好的利用这些布局容器以及组件,加上样式Style调优的话,你会布局出非常酷的界面,当然我们要以项目为基础,下面一节就开始我们的普通控件的简要介绍了,由于篇幅有限,我们一般只介绍普通用法,以及常用属性,方法等,需要了解更多更具体内容,可以参考官方资料。
相关文章推荐
- WP7开发第二课:基本布局系统以及基本控件(其一)
- 开发ASP.NETAtlas服务器端Extender控件—基本概念以及预先需求
- Android开发之基本控件和四种布局方式详解
- 【插件开发】—— 6 SWT 复杂控件使用以及布局
- Android开发之基本控件和详解四种布局方式
- 【插件开发】—— 5 SWT控件以及布局使用
- iOS开发之UI控件——UIPickerView实现点菜系统界面布局
- 开发ASP.NET Atlas服务器端Extender控件——基本概念以及预先需求
- android系统学习第二讲:初识activity及android基本的控件
- Android文件目录,线性布局以及基本控件
- Android开发之基本控件和详解四种布局方式
- 开发ASP.NET Atlas服务器端Extender控件——基本概念以及预先需求
- 【iOS开发-56】案例BUG:button的enabled、控件的userInteractionEnabled以及两种提示框UIAlert和UIActionSheet
- IOS开发--第二阶段--通讯--JSON系统解析
- android开发之四种基本布局和自定义控件
- Silverlight之UI设计学Blend五【基本布局控件3】-----------ScrollViewer\Border\Viewbox
- 自定义控件(子类化)和系统控件一起布局出现问题的解决方法
- Android六大布局的介绍 Android开发布局:.xml 页面排版 1.线性布局(LinearLayout) LinearLayout是线性不布局控件,它包含的子控件将以横向或者竖向的方式
- Android 开发之 布局控件的各个属性
- 【unity】【jit】【游戏开发】讲解ios系统不支持JIT的来龙去脉,以及unity在IOS上需要使用反射时候的替代方案