Silverlight初学者的入门课程(3)

在上面代码，看见如下代码
InitParameters="PageName=Page1"
这里设置的“InitParameters”具有键-值对关系标识默认打开的 xaml 页面。 现在， 将在 App.xaml 文件中读取这个属性并为 Application.RootVisual 属性设置适 当的页面。这里有个示例用在 App.xaml.cs 中实现这一目标：
private void Application_Startup(object sender, StartupEventArgs e) {
~ 14 ~
程序员之家

IDictionary parameters = e.InitParams; if(parameters == null) { // 没有参数传递时，打开默认的 xaml this.RootVisual = new DefaultPage(); } else if(parameters["PageName"] == "Page1") { this.RootVisual = new Page1(); } else if(parameters["PageName"] == "Page2") { this.RootVisual = new Page2(); } else { //打开默认的 xaml this.RootVisual = new DefaultPage(); } }
第十八章 在 Silverlight 布局控件
在 Silverlight 中提供了 3 种类型的布局面板。Grid 控件是其中的一种。 Silverlight 提供的 3 种类型的布局面板： 1. Canvas – 绝对定位子元素 x，y 的位置。 2. StackPanel – 子元素按行或者列来进行页面布局。 3. Grid – 子元素放在行列表格中进行布局。 创建每一个 xaml 页面时必须添加一个布局面板。所有其他 UI 元素必须放在布局面板中。 每个页面需要一个确切的布局面板控件。
Silverlight 中的布局面板控件 - Canvas
Silverlight 提供了 3 种面板控件用来定义页面布局和在页面中控件的位置。 Canvas 是 布局控件之一。 Canvas 定义了一个区域，你通过制定 x 和 y 坐标的位置放置其他的控件。这样在 Canvas 中可能重叠多个控件。与通常的 HTML 相反，当控件在 Canvas 重叠时，被重叠控件可以被 其他控件隐藏。 当控件放置在 Canvas 中，使用 Canvas.Left 和 Canvas.Top 属性为每个控件指定那个 x 和 y 坐标。 此示例演示在 Canvas 中放置矩形控件并制定 x 和 y 坐标：
~ 15 ~
程序员之家

<Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="25&q
uot; Canvas.Top="40" Fill="green" Width="100" Height="100" /> </Canvas>
上面的 xaml 标签定义了矩形， 填充绿色

资料,教程,编程,文集

大小为 100×100 像素。 这个矩形放置在离 Canvas 左边 25 像素，离 Canvas 顶端 40 像素。 下面例子演示 3 个矩形相互重叠：
<Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100" Height="100" /> <Rectangle Canvas.Left="50" Canvas.Top="65" Fill="yellow" Width="100" Height="100" /> <Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100" Height="100" /> </Canvas>
下面图形是输出的样子：
Silverlight 中的布局面板控件 - StackPanel
StackPanel 支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排 列显示，如下面的 XAML 声明三个矩形：
<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
~ 16 ~
程序员之家

<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
运行后在界面显示效果如下：
当然我们也可以指定为水平排列，通过 Orientation 属性指定：
<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"/>
运行后界面显示效果如下：
在这里为了让各个控件之间有一定的距离， 使用了 Margin 属性， 该属性类似于 HTML 中的 Margin。
Silverlight 中的布局面板控件 – Grid
Grid 控件类似与 HTML 中的 Table，只不过子元素不用放在单元格中。通过 <Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义 Grid 的行和列， 使用 Grid.Row 和 Grid.Column 两个附加属性指定子元素在 Grid 中显示的位置，这是 一种非常灵活的布局方式。如下面的 XAML 声明：
<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True">
~ 17 ~
程序员之家

<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" HorizontalAlignm
ent="Left"></TextBox> </Grid>
定义一个两行两列的 Grid，做一个简单的用户登录的布局，为了明显起见，把 ShowGridLines 属性设为 True，以便能够显示出边框线。同时，我们指定了第一行的高 度

资料,教程,编程,文集

为 120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：
第十九章 如何在 Silverlight 控件中显示图像？
在 Silverlight 中，image 控件可以用来显示图像。用法和前面的相似。使用 Image 控 件的语法如下：
<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" > </ …… 此处隐藏：3089字，全部文档内容请下载后查看。喜欢就下载吧 ……