silverlight:学Silverlight 2系列(3):界面布局

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

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

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



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



　　除了上面我们用到Canvas.Top和Canvas.Left两个附加属性外还有个Canvas.ZIndex附加属性如果指定了两个Control控件相对于父容器Canvas同样边距则后面声明Control控件父覆盖前面声明Control控件这时我们可以使用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边距相同这时默认后声明橙色矩形会覆盖蓝色矩形:



　　指定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>　　将会让蓝色矩形显示在上面值最大显示在最上面:



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

<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>　　运行后在界面显示效果如下:



　　当然我们也可以指定为水平排列通过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>　　运行后界面显示效果如下:



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

　　Grid　　GridControl控件类似和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而第 2行则是剩余高度用*来指定运行后效果如下:



　　综合例子　　分别了解了上面 3个布局Control控件接下来我们看个综合例子如何完成如下个取色器:



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

<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" />　　再添加颜色值显示区嵌套个StackPanelControl控件让它里面子Control控件垂直显示:

<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>　　左边用 4个SilderControl控件和 4个TextBlockControl控件显示需要对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>　　这样我们就完成了上面这样相对复杂界面布局对SliderControl控件添加事件处理:

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



　　结束语　　有关界面布局就说到这里在Silverlight 2中通过上面 3种布局Control控件相结合可以进行非常强大和灵活界面布局

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放