Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border-阿里云开发者社区

开发者社区> 技术小牛人> 正文

Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

简介:
+关注继续查看
 
上一篇,介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollViewer和Border。
相对于Grid和Canvas来说,StackPanel,ScrollViewer和Border是比较简单的布局控件,实现的功能相对来说单一。
首先来说说StackPanel控件。从字面意思理解,是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列,排列方式分水平排列和垂直排列两种方式。
对于StackPanel的使用,主要是对控件水平或者垂直排列,使用该控件排列控件,比Grid设置表格控制要容易很多。
例如,在Grid中要设置Row和Column,然后将控件放置到各个Cell中,才能达到对齐布局的效果,而在StackPanel中只要使用Orientation属性控制就可以了。
这里我们简单演示一下,在Blend中应用StackPanel
选中StackPanel后,在主窗口画一个StackPanel容器。
然后选择按钮控件,在StackPanel中,画一个高为30的按钮。然后选中该按钮,复制创建三个新按钮,在复制粘贴的时候,会发现,每次创建一个新按钮会在布局中自动向下排列。这点和Grid和Canvas不同,在Grid和Canvas中复制粘贴控件,将会自动覆盖上一个控件,需要用ZIndex控制其位置。
选中StackPanel,查看右边Properties属性栏,其中Layout中多了一个Orientation选项,默认为Vertical垂直排列。
点击展开下拉菜单,可以看到Horizontal水平排列,选中后,以上四个按钮分布将自动以水平方式排列。
和Grid相同,StackPanel也支持Margin和Horizontal Alignment,Vertical Alignment属性,这里我就不在赘述,详细大家可以看“布局快速入门Grid
 
ScrollViewer控件,是从WPF中移植来的,针对大内容控件的布局控件。由于该控件内仅能支持一个子控件,所以在多数情况下,ScrollViewer控件都会和Stackpanel,Canvas和Grid相互配合使用。如果遇到内容较长的子控件,ScrollViewer会生成滚动条,提供对内容的滚动支持。
创建一个ScrollViewer控件,会看到该控件右边自带滚动框,
我们将上例拖拽进新创建的ScrollViewer控件,Blend会提示按“Alt”将拖拽控件放入ScrollViewer,
放置成功后,由于内容过长,ScrollViewer的滚动条自动激活。对于ScrollViewer的滚动条,可以通过Properties属性栏进行设置控制,可以禁用,隐藏,或者设置仅在需要时候自动显示。
HorizontalScrollBarVisibility和VerticalScrollBarVisibility属性:
Auto = 仅在需要时候自动显示滚动条
Disabled = 禁用滚动条
Hidden = 隐藏滚动条
Visible =显示滚动条
 
Border控件,是最简单的布局控件,也是最早期的一款Silverlight布局控件,该控件允许用户创建一个带有边框的布局控件。使用Border控件唯一需要注意的是该控件内仅能支持一个子控件。
在Blend中,绘制Border控件同样很简单,
 
将上例中的StackPanel拖拽进新创建的Border控件。
Blend会提示按着“Alt”是将控件放置在Border中,否则将修改Margin进行重新布局。这里我们按着Alt,完成拖拽。
Blend自动生成XAML代码如下:
 
1 <Border Margin="154,17,22,80" Grid.Column="1" Grid.Row="1" BorderBrush="Black" BorderThickness="1">
2     <StackPanel Margin="20,12,25,15" Orientation="Vertical">
3         <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>
4         <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>
5         <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>
6         <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>
7     </StackPanel>
8 </Border>
 
其中BorderBrush是边框颜色;
BorderThickness是边框的宽度;
修改以上两个属性,同样可以在右边的Properties属性栏进行修改。
 
至此,Silverlight的布局控件,我们已经介绍完了,笔者建议,在学习的过程中,还要配合实践,这样会达到熟练的效果。


本文转自冷秋寒 51CTO博客,原文链接:http://blog.51cto.com/kevinfan/287339 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Oracle迁移PPAS:中文表名的处理
Oracle迁移到RDS for PPAS(PostgreSQL)时我们会用到很多不同的工具,在中国有些用户会用 中文 作为表名,甚至字段名。迁移可能会出现ERROR: zero-length delimited identifier at or near """"的错误。针对于此,做了以下DEM.
4356 0
Shell常用命令教程
1.打印当前目录 命令:pwd pwd命令图示.png 2.获取当前计算机的名称 命令:hostname hostname命令图示.png Win10修改计算机名称的方法: 修改计算机名称1.png 修改计算机名称2.png 修改计算机名称3.png 完成上面3步之后,多次点击确定并重启电脑就可以完成修改计算机名。
828 0
jQuery EasyUI API 中文文档 - 日历(Calendar)
Calendar 日历 用 $.fn.calendar.defaults 重写了 defaults。 用法 1. 1. $('#cc').calendar({   2.     width:600,   3.     height:600,   4.     current:new Date()   5. });  特性 名称 类型 说明 默认值 width number 日历组件的宽度。
582 0
Directx11教程(45) alpha blend(2)
在myTutorialD3D11_40中,我们在场景中再添加一个box,并把box放在水里,实现半透明的效果。如下图所示:       我们要特别注意一点的就是场景中物体的渲染次序,先渲染山谷、第二个box,第三个水。
689 0
Directx11教程(47) alpha blend(4)-雾的实现
除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果。通过逐渐清晰的雾气效果,可以增加场景的真实感。      雾的效果实现很简单,首先我们要一种颜色来表示雾,通常使用用灰色。
733 0
Oracle 一个中文汉字 占用几个字节,由Oracle中字符集编码决定
Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('language') from dual; 如果显示如下,一个汉字占用两个字节 SIMPLIFIED CHINESE_CHINA.
1059 0
深度剖析阿里云ECS最强计算实例
日前,阿里云在2017云栖大会·深圳峰会上宣布,华北3地域超大规模数据中心正式对外开放运营,云服务器ECS全系列降价20%。首次披露阿里云十余种基于最新平台计算实例背后的那些研发秘密。
11013 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载