一步一步学Silverlight 2系列（3）：界面布局

野性酷女 2021-12-17 05:43 259阅读 0赞

<table style="table-layout:fixed;width:650px;"> 
 <tbody> 
 <tr> 
 <td> 
 <div> 
 版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 
 <a style="text-decoration:underline;" href="http://terrylee.blog.51cto.com/342737/67209" rel="nofollow">原始出处</a> 、作者信息和本声明。否则将追究法律责任。 
 <a href="http://terrylee.blog.51cto.com/342737/67209" rel="nofollow">http://terrylee.blog.51cto.com/342737/67209</a> 
 </div> </td> 
 </tr> 
 <tr> 
 <td> 
 <div style="font-size:10pt;"> 
 <h2>概述</h2> 
 <div>
 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。 
 </div> 
 <div>
 本文为系列文章第三篇，学习Silverlight 2中的界面布局，Silverlight 2中新增加了Grid和Panel两个布局容器，使得界面布局更加的强大和灵活。 
 </div> 
 <h2>Canvas面板</h2> 
 <div>
 Canvas是在Silverlight 1.0时代就有的一种基础布局面板，它采用绝对坐标定位。可以使用附加属性（Attached Property）对Canvas中的元素进行定位，通过附加属性我们指定控件相对于其直接父容器Canvas 控件的上、下、左、右坐标的位置。如下面的XAML声明了两个矩形，它们分别相对于父容器Canvas的左边距是50，相对于父容器Canvas的上边距分别是50和150： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0020_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345248484.gif">&nbsp; 
 </div> 
 <div>
 运行后界面的效果如下所示： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0021_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345258843.gif">&nbsp; 
 </div> 
 <div>
 除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外，还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序，如下面的XAML声明： 
 </div> 
 <pre>&lt;Canvas Background="#46461F"&gt;
 &lt;Rectangle Fill="#0099FF" Width="160" Height="80"
 Canvas.Top="100" Canvas.Left="100"&gt;
 &lt;Rectangle Fill="#FF9900" Width="160" Height="80"
 Canvas.Top="100" Canvas.Left="100"/&gt;
 &lt;/Canvas&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 指定两个矩形相对于父容器Canvas的边距相同，这时默认的后声明的橙色矩形会覆盖蓝色矩形： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0023_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345271953.gif">&nbsp; 
 </div> 
 <div>
 指定Canvas.ZIndex为1 
 </div> 
 <pre>&lt;Canvas Background="#46461F"&gt;
 &lt;Rectangle Fill="#0099FF" Width="160" Height="80"
 Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/&gt;
 &lt;Rectangle Fill="#FF9900" Width="160" Height="80"
 Canvas.Top="100" Canvas.Left="100"/&gt;
 &lt;/Canvas&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 将会让蓝色矩形显示在上面，值最大的显示在最上面： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0024_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345290218.gif">&nbsp; 
 </div> 
 <h2>StackPanel</h2> 
 <div>
 StackPanel支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排列显示，如下面的XAML声明三个矩形： 
 </div> 
 <pre>&lt;StackPanel Background="#46461F"&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;/StackPanel&gt;</pre> 
 <div> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>运行后在界面显示效果如下： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0025_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345306328.gif">&nbsp; 
 </div> 
 <div>
 当然我们也可以指定为水平排列，通过Orientation属性指定： 
 </div> 
 <pre>&lt;StackPanel Background="#46461F" Orientation="Horizontal"&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;Rectangle Fill="#0099FF" Stroke="White"
 Width="100" Height="50" Margin="10"/&gt;
 &lt;/StackPanel&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 运行后界面显示效果如下： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0026_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345317281.gif">&nbsp; 
 </div> 
 <div>
 在这里为了让各个控件之间有一定的距离，使用了Margin属性，该属性类似于HTML中的Margin。 
 </div> 
 <h2>Grid</h2> 
 <div>
 Grid控件类似与HTML中的Table，只不过子元素不用放在单元格中。通过&lt;Grid.RowDefinitions&gt; 和 &lt;Grid.ColumnDefinitions&gt;来定义Grid的行和列，使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置，这是一种非常灵活的布局方式。如下面的XAML声明： 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True"&gt;
 &lt;Grid.RowDefinitions&gt;
 &lt;RowDefinition Height="120"/&gt;
 &lt;RowDefinition Height="*"/&gt;
 &lt;/Grid.RowDefinitions&gt;
 &lt;Grid.ColumnDefinitions&gt;
 &lt;ColumnDefinition Width="100"/&gt;
 &lt;ColumnDefinition Width="*"/&gt;
 &lt;/Grid.ColumnDefinitions&gt;
 &lt;TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"&gt;&lt;/TextBlock&gt;
 &lt;TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"&gt;&lt;/TextBlock&gt;
 &lt;TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"&gt;&lt;/TextBox&gt;
 &lt;TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"&gt;&lt;/TextBox&gt;
 &lt;/Grid&gt;</pre> 
 <div> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>定义一个两行两列的Grid，做一个简单的用户登录的布局，为了明显起见，把ShowGridLines属性设为True，以便能够显示出边框线。同时，我们指定了第一行的高度为120，而第二行的则是剩余的高度，用*来指定。运行后效果如下： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0027_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345330046.gif">&nbsp; 
 </div> 
 <h2>综合实例</h2> 
 <div>
 分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0028_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345344187.gif">&nbsp; 
 </div> 
 <div>
 首先我们添加一个两行两列的Grid控件，分别指定行高和列宽： 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="White"&gt;
 &lt;Grid.ColumnDefinitions&gt;
 &lt;ColumnDefinition Width="260" /&gt;
 &lt;ColumnDefinition Width="*" /&gt;
 &lt;/Grid.ColumnDefinitions&gt;
 &lt;Grid.RowDefinitions&gt;
 &lt;RowDefinition Height="120" /&gt;
 &lt;RowDefinition Height="120" /&gt;
 &lt;/Grid.RowDefinitions&gt;
 &lt;/Grid&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 添加颜色显示区域，用一个矩形显示，放入Grid的第0行第1列： 
 </div> 
 <pre>&lt;Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"
 Fill="#FF6600" Margin="10" Stroke="#666666" StrokeThickness="2" /&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 再添加颜色值显示区，嵌套一个StackPanel控件，让它里面的子控件垂直显示： 
 </div> 
 <pre>&lt;StackPanel Grid.Row="1" Grid.Column="1" &gt;
 &lt;TextBlock FontSize="12"&gt;Color&lt;/TextBlock&gt;
 &lt;TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/&gt;
 &lt;/StackPanel&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 左边用四个Silder控件和四个TextBlock控件显示，需要对Grid的行进行合并Grid.RowSpan属性： 
 </div> 
 <pre>&lt;StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center"&gt;
 &lt;TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0"/&gt;
 &lt;Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/&gt;
 &lt;TextBlock Text="Red" FontSize="12" Margin="10,15,0,0"/&gt;
 &lt;Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/&gt;
 &lt;TextBlock Text="Green" FontSize="12" Margin="10,15,0,0"/&gt;
 &lt;Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255" Value="102" ValueChanged="RedSlider_ValueChanged"/&gt;
 &lt;TextBlock Text="Blue" FontSize="12" Margin="10,15,0,0"/&gt;
 &lt;Slider x:Name="BlueSlider" Margin="20,0,10,0" Maximum="255" Value="0" ValueChanged="RedSlider_ValueChanged"/&gt;
 &lt;/StackPanel&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 这样我们就完成了上面这样相对复杂的界面布局，对Slider控件添加事件处理程序： 
 </div> 
 <pre>private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs&lt;double&gt; 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();
 }</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>运行后，可以选取不同的颜色值： 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight23_10315/TerryLee_Silverlight2_0029_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206345355593.gif">&nbsp; 
 </div> 
 <h2>结束语</h2> 
 <div>
 关于界面布局就说到这里，在Silverlight 2中，通过上面的三种布局控件相结合，可以进行非常强大和灵活的界面布局。 
 </div> 
 本文出自 “<a href="http://terrylee.blog.51cto.com/" rel="nofollow">TerryLee技术专栏</a>” 博客，请务必保留此出处<a href="http://terrylee.blog.51cto.com/342737/67209" rel="nofollow">http://terrylee.blog.51cto.com/342737/67209</a> 
 <a href="http://terrylee.blog.51cto.com/342737/67209" rel="nofollow">本文出自 51CTO.COM技术博客</a> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361513.html