WP7开发第二课:基本布局系统以及基本控件(其一)

简介:

源地址:http://www.cnblogs.com/zhangdongzi/archive/2011/08/29/2158902.html

上一课主要讲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默认为竖排列方式。

结果如下:

二: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,得到如下所示:

三: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列的内容,显示结果为:

看见了吧,Grid是很有用处的。

以上就是主要的布局容器,可以作为顶层容器,也可以作为子容器,一般是不能被其他非容器包含的,但是有个东西除外,那就是Border,这个是边框,可以为容器设定一个边框,例如下面:

 <Border  BorderThickness="10" BorderBrush="Yellow"> 容器</Border>

运行结果如下:

好了,就到这里,比较简单,但是如果能好好的利用这些布局容器以及组件,加上样式Style调优的话,你会布局出非常酷的界面,当然我们要以项目为基础,下面一节就开始我们的普通控件的简要介绍了,由于篇幅有限,我们一般只介绍普通用法,以及常用属性,方法等,需要了解更多更具体内容,可以参考官方资料。

 



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/archive/2011/11/12/2246765.html,如需转载请自行联系原作者

目录
相关文章
|
4月前
|
开发者 编解码
界面适应奥秘:从自适应布局到图片管理,Xamarin响应式设计全解析
【8月更文挑战第31天】在 Xamarin 的世界里,构建灵活且适应性强的界面是每位开发者的必修课。本文将带您探索 Xamarin 的响应式设计技巧,包括自适应布局、设备服务协商和高效图片管理,帮助您的应用在各种设备上表现出色。通过 Grid 和 StackLayout 实现弹性空间分配,利用 Device 类检测设备类型以加载最优布局,以及使用 Image 控件自动选择合适图片资源,让您轻松应对不同屏幕尺寸的挑战。掌握这些技巧,让您的应用在多变的市场中持续领先。
39 0
|
4月前
|
数据可视化 数据挖掘 持续交付
Axure Web端元件库:从Quick UI到500+组件的飞跃
在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能,赢得了全球设计师和开发者的信赖。而Axure Web端元件库,则是这一平台上的一颗璀璨明珠,它以超过500个精心设计的组件为基础,为设计师们打开了一扇通往高效、高质量原型设计的大门。
170 0
OFFICE技术讲座:WP布局方向有哪些
OFFICE技术讲座:WP布局方向有哪些
87 0
|
JSON 缓存 JavaScript
AT-UIの入手某东的UI框架
用Element-UI做了两个后台,时间长了有点视觉劳累,挑来挑去,入选了某东的AT-UI,搭建了一个雏形的后台骨架,下面记录一下使用方法(此时应附地址:官网传送门)。
603 0
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1245 0
|
C#
潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航
原文:潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航 本样式 含有  触发器 和 动画    模板  ,多条件触发器,还有布局   本人博客园地址  http://www.
1649 0
UWP开发入门(十五)——在FlipView中通过手势操作图片
原文:UWP开发入门(十五)——在FlipView中通过手势操作图片   本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作。在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧。
1583 0