一步一步学Silverlight 2系列(3):界面布局_转载

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第三篇,学习Silverlight 2中的界面布局,Silverlight 2中新增加了Grid和Panel两个布局容器,使得界面布局更加的强大和灵活。

Canvas面板

Canvas是在Silverlight 1.0时代就有的一种基础布局面板,它采用绝对坐标定位。可以使用附加属性(Attached Property)对Canvas中的元素进行定位,通过附加属性我们指定控件相对于其直接父容器Canvas 控件的上、下、左、右坐标的位置。如下面的XAML声明了两个矩形,它们分别相对于父容器Canvas的左边距是50,相对于父容器Canvas的上边距分别是50和150:

TerryLee_Silverlight2_0020

运行后界面的效果如下所示:

TerryLee_Silverlight2_0021

除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外,还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对于父容器Canvas同样的边距,则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序,如下面的XAML声明:

<Canvas Background="#46461F"><Rectangle Fill="#0099FF" Width="160" Height="80"Canvas.Top="100" Canvas.Left="100"><Rectangle Fill="#FF9900" Width="160" Height="80"Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

指定两个矩形相对于父容器Canvas的边距相同,这时默认的后声明的橙色矩形会覆盖蓝色矩形:

TerryLee_Silverlight2_0023

指定Canvas.ZIndex为1

<Canvas Background="#46461F"><Rectangle Fill="#0099FF" Width="160" Height="80"Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/><Rectangle Fill="#FF9900" Width="160" Height="80"Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

将会让蓝色矩形显示在上面,值最大的显示在最上面:

TerryLee_Silverlight2_0024

StackPanel

StackPanel支持用行或列的方式来进行页面布局,默认情况下所有的子元素会垂直的排列显示,如下面的XAML声明三个矩形:

<StackPanel Background="#46461F"><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/>
</StackPanel>

运行后在界面显示效果如下:

TerryLee_Silverlight2_0025

当然我们也可以指定为水平排列,通过Orientation属性指定:

<StackPanel Background="#46461F" Orientation="Horizontal"><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/><Rectangle Fill="#0099FF" Stroke="White"Width="100" Height="50" Margin="10"/>
</StackPanel>

运行后界面显示效果如下:

TerryLee_Silverlight2_0026

在这里为了让各个控件之间有一定的距离,使用了Margin属性,该属性类似于HTML中的Margin。

Grid

Grid控件类似与HTML中的Table,只不过子元素不用放在单元格中。通过<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义Grid的行和列,使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置,这是一种非常灵活的布局方式。如下面的XAML声明:

<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True"><Grid.RowDefinitions><RowDefinition Height="120"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="100"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"></TextBlock><TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"></TextBlock><TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox><TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>
</Grid>

定义一个两行两列的Grid,做一个简单的用户登录的布局,为了明显起见,把ShowGridLines属性设为True,以便能够显示出边框线。同时,我们指定了第一行的高度为120,而第二行的则是剩余的高度,用*来指定。运行后效果如下:

TerryLee_Silverlight2_0027

综合实例

分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器:

TerryLee_Silverlight2_0028

首先我们添加一个两行两列的Grid控件,分别指定行高和列宽:

<Grid x:Name="LayoutRoot" Background="White"><Grid.ColumnDefinitions><ColumnDefinition Width="260" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="120" /><RowDefinition Height="120" /></Grid.RowDefinitions>
</Grid>

添加颜色显示区域,用一个矩形显示,放入Grid的第0行第1列:

<Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"Fill="#FF6600" Margin="10" Stroke="#666666" StrokeThickness="2" />

再添加颜色值显示区,嵌套一个StackPanel控件,让它里面的子控件垂直显示:

<StackPanel Grid.Row="1" Grid.Column="1" ><TextBlock FontSize="12">Color</TextBlock><TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/>
</StackPanel>

左边用四个Silder控件和四个TextBlock控件显示,需要对Grid的行进行合并Grid.RowSpan属性:

<StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center"><TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0"/><Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/><TextBlock Text="Red" FontSize="12" Margin="10,15,0,0"/><Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/><TextBlock Text="Green" FontSize="12" Margin="10,15,0,0"/><Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255" Value="102" ValueChanged="RedSlider_ValueChanged"/><TextBlock Text="Blue" FontSize="12" Margin="10,15,0,0"/><Slider x:Name="BlueSlider" Margin="20,0,10,0" Maximum="255" Value="0" ValueChanged="RedSlider_ValueChanged"/>
</StackPanel>

这样我们就完成了上面这样相对复杂的界面布局,对Slider控件添加事件处理程序:

private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{Color color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);PreviewColor.Fill = new SolidColorBrush(color);HexColor.Text = color.ToString();
}
运行后,可以选取不同的颜色值:

TerryLee_Silverlight2_0029

结束语

关于界面布局就说到这里,在Silverlight 2中,通过上面的三种布局控件相结合,可以进行非常强大和灵活的界面布局。

 

转载出处声明:

作者:TerryLee
出处:http://terrylee.cnblogs.com
原文链接:http://www.cnblogs.com/Terrylee/archive/2008/03/07/Silverlight2-step-by-step-part3.html

 

转载于:https://www.cnblogs.com/ZhangHuaning/archive/2010/04/20/1715962.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网址

Html5 &#xff1a; http://fff.cmiscm.com/#!/main 20个案例让你了解用HTML5可以做出什么作品转载于:https://www.cnblogs.com/wangdyy/archive/2013/01/21/2869545.html

Spring学习11-Spring管理各种数据源

Spring 完全可以不依赖容器,自己管理数据源,但是却依赖第三方的开源的数据源管理框架. Spring在第三方依赖包中包含了两个数据源的实现类包&#xff0c;其一是Apache的DBCP&#xff0c;其二是 C3P0。可以在Spring配置文件中利用这两者中任何一个配置数据源。 1、DBCP数据源…

b树与b+树的区别_一文详解 B-树,B+树,B*树

B-树B-树是一种多路搜索树&#xff08;并不一定是二叉的&#xff09;1970年&#xff0c;R.Bayer和E.mccreight提出了一种适用于外查找的树&#xff0c;它是一种平衡的多叉树&#xff0c;称为B树&#xff08;或B-树、B_树&#xff09;。一棵m阶B树(balanced tree of order m)是一…

提交按钮禁用的办法

1.html: οnclick"this.value正在打印&#xff0c;请稍候;this.disabled true;" <input id"Button2" type"button" value"打印测试" οnclick"this.disabled true;" /> 效果如下&#xff1a; 2.如果是ASP.NET的服务…

share-Nothing原理

Share nothing理论在数据库设计和优化中的实践应用 首先介绍share nothing概念。最早接触它是在 DataBaseManagentSystem一书的并行数据库章节中。 并行数据库要求尽可能的去并行执行数据库操作&#xff0c;从而提高性能。在并行计算体系结构实现中有很多可选的体系结构。包括&…

linux查看逻辑卷命令,Linux命令--逻辑卷管理

往卷组中添加新的物理卷10.vgcfgbackup备份卷组中各物理卷的VGDA信息到/etc/vmconf目录的文件中11.vgcfgrestore从文件中恢复卷组中物理卷的VGDA12.vgchange改变卷组属性13.vgck检测卷组中VGDA的一致性14.vgdisplay显示卷组信息15.vgexport输出卷组使系统不能识别该卷组16.vgim…

python怎么创建文件夹_如何使用python在文件夹中创建文本文件?

我试图在一个不是运行脚本的目录的文件夹中创建一个.txt文件。我有一个脚本所在的文件夹&#xff0c;我可以在脚本所在的同一个目录中创建该文件夹&#xff0c;但它不会在该文件夹中创建文本文件。我通常遇到两个错误中的一个&#xff1a;PermissionError: [Errno 13] Permissi…

顺利搭建了oracle

哈哈转载于:https://www.cnblogs.com/zzzzw/p/5182224.html

php 计算n天后

法一:date("Y-m-d",mktime(0,0,0,date("m"),date("d")7,date("Y"))); 法二:date("Y-m-d H:i:s",strtotime("-7 day"));转载于:https://www.cnblogs.com/kwishly/archive/2013/01/23/2872834.html

返回对应对象的克隆方法

代码 usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Collections;usingSystem.Reflection;namespaceCommon.CloneObjBase{ ///<summary>///BaseObject类是一个用来继承的抽象类。 ///每一个由此类继承而来的类将自动支持克隆方法…

linux磁盘使用情况脚本,技术|用 Linux Shell 脚本来监控磁盘使用情况并发送邮件...

市场上有很多用来监控 Linux 系统的监控工具&#xff0c;当系统到达阀值后它将发送一封邮件。它监控所有的东西例如 CPU 利用率、内存利用率、交换空间利用率、磁盘空间利用率等等。然而&#xff0c;它更适合小环境和大环境。想一想如果你只有少量系统&#xff0c;那么什么是最…

markdown 语法_Markdown 基本语法

Markdown 是一种轻量级的标记语言&#xff08;markup language&#xff09;&#xff0c;由 John Gruber&#xff08;1973 ~&#xff09;与 Aaron Swartz &#xff08;1986 ~ 2013&#xff09;于2004年创造&#xff0c;被网站用于编写说明文件&#xff08;readme&#xff09;、技…

原来fb可以在一个工程里面输出多个swf模块

转载于:https://www.cnblogs.com/wonderKK/archive/2013/01/23/2873555.html

MYSQL的全表扫描,主键索引(聚集索引、第一索引),非主键索引(非聚集索引、第二索引),覆盖索引四种不同查询的分析...

文章出处&#xff1a;http://inter12.iteye.com/blog/1430144 MYSQL的全表扫描&#xff0c;主键索引(聚集索引、第一索引)&#xff0c;非主键索引(非聚集索引、第二索引)&#xff0c;覆盖索引四种不同查询的分析 1.前置条件&#xff1a; 本次是基于小数据量&#xff0c;且数据块…

控件(View)之TextSwitcher, Gallery, ImageSwitcher, GridView, ListView, ExpandableList【转】

在 Android 中使用各种控件(View) TextSwitcher - 文字转换器控件&#xff08;改变文字时增加一些动画效果&#xff09;Gallery - 缩略图浏览器控件ImageSwitcher - 图片转换器控件&#xff08;改变图片时增加一些动画效果&#xff09;GridView - 网格控件ListView - 列表控件E…

linux下php反编译apk,php反编译

Host IP&#xff1a;运行APP的Host侧IP地址。 Compile Path&#xff1a;推理场景为ATC的执行路径&#xff0c;训练场景为脚本执行路径。用于存储算子编译中间生成的输出件和pbtxt&#xff0c;一般为“kernel_meta”文件的父路径(例如&#xff1a;~/model_convert)。 图1 参数配…

13 对话一 【96】

13 对话一 【96】 This line is taking forever! It sure is. But lunch hour is the busiest time of day. That’s true. Especially at the end of the month. Mm-hmm. You know, you look really familiar. Don’t I know you from somewhere? I’m not sure. I think we…

程序员狂想曲

【前序】博客园首页对博文的规定有&#xff1a;原创精品、排版整齐、有足够的篇幅、与程序员相关、能够让读者从中学到知识的基本要求。我心想&#xff0c;除非不同时空&#xff0c;否则这绝对是我原创的&#xff1b;段落分明排版自然问题不大&#xff1b;一千三百来字的文章远…

python异常处理的语法格式_Python异常处理

Python异常处理 一. 异常的概念 程序在运行时&#xff0c;如果 Python 解释器 遇到 到一个错误&#xff0c;会停止程序的执行&#xff0c;并且提示一些错误信息&#xff0c;这就是 异常。 程序停止执行并且提示错误信息 这个动作&#xff0c;我们通常称之为&#xff1a;抛出(ra…

Cheatsheet: 2010 04.26 ~ 04.30

Web Telling robots about your crawl-able Ajax apps Scrollin’ Scrollin’ Scrollin’ to the NextPoint The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books Database MongoDB vs. SQL Server 2008 Performance Showdown Raven…