silverlight:Silverlight专题(8)-布局介绍

  问题:  大家应该看过不少Silverlight网站WebSite

  肯定有时候有时候会很纳闷自己做得网页为什么那么难看

  而网络上些范例那么好看

  事实上就是布局功劳(当然配色也是很重要)

  正如带兵打仗不会排兵布阵有再好兵也枉然

  设计:  Silverlight为咱们排兵布阵提供了 3个神兵利器Grid,StackPanel和Canvas

  下面我分别对这 3种布局Control控件做下介绍

  Grid:个有点类似Table(表格)Control控件

  如下所示我将Grid分成了 3行两列高度以及列Control控件如代码所示

Silverlight专题(8)-布局介绍

  你可以通过给放置在GridControl控件设置Grid.Row以及Grid.Column来设定该Control控件该放在哪行哪列(默认值都为0)

  此外还可以通过设定Grid.RowSpan,Grid.ColumnSpan来设定Control控件占据几行几列(默认值都为1)

  范例如下(模拟登陆页面):

1<Grid>
2   <Grid.RowDefinitions>
3     <RowDefinition Height="Auto"/>
4     <RowDefinition Height="Auto"/>
5     <RowDefinition Height="Auto"/>
6   </Grid.RowDefinitions>
7   <Grid.ColumnDefinitions>
8     <ColumnDefinition Width="Auto"/>
9     <ColumnDefinition Width="Auto"/>
10   </Grid.ColumnDefinitions>
11   
12   <TextBlock Foreground="#ED3798" Text="User Name:" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="18"/>
13   <TextBox Grid.Column="1" Margin="2,5" Width="200"/>
14   <TextBlock Foreground="#ED3798" Text="Password:" Margin="5" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="18"/>
15   <TextBox Grid.Row="1" Grid.Column="1" Margin="2,5" Width="200"/>
16   <Button Content="Submit" FontSize="18" Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,5" Padding="4,2"/>
17</Grid>
  运行结果如下:

Silverlight专题(8)-布局介绍

  StackPanel:以水平或者垂直方向依次排列放在里面Control控件(通过Orientation这个属性来决定Horizontal为水平排列Vertical为垂直排列-默认模式)

  如下所示为水平方向放置:

1<StackPanel Orientation="Horizontal"> 
2   <Image Width="80" Source="Image/blue.jpg" Margin="2,0"/> 
3   <Image Width="80" Source="Image/red.jpg" Margin="2,0"/> 
4   <Image Width="80" Source="Image/green.jpg" Margin="2,0"/> 
5   <Image Width="80" Source="Image/orange.jpg" Margin="2,0"/> 
6</StackPanel>


  运行结果如下:

Silverlight专题(8)-布局介绍

  最后种布局工具是Canvas:种通过绝对坐标来定位Control控件放置位置布局Control控件

  其使用两个属性Canvas.Left(离左边多远为double型数据)和Canvas.Top(离顶端多远为double型数据)来定位放置在Canvas中Control控件绝对位置

  范例如下:

1<Canvas> 
2   <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20" Width="80" Height="80"/> 
3   <Rectangle Fill="Red" Canvas.Left="110" Canvas.Top="20" Width="80" Height="80"/> 
4   <Rectangle Fill="Green" Canvas.Left="200" Canvas.Top="20" Width="80" Height="80"/> 
5   <Rectangle Fill="Orange" Canvas.Left="290" Canvas.Top="20" Width="80" Height="80"/> 
6</Canvas>


  运行结果如下:

Silverlight专题(8)-布局介绍

  最后再介绍下BorderControl控件

  这个Control控件在布局时候经常会用到

  特别是它圆角功能屡试不爽^_^

  如QQ TM版本登陆界面圆角(CornerRadius属性)就可以用Silverlight很快实现

Silverlight专题(8)-布局介绍

  大致模拟下上面部分如下:

1<Border Width="180" Height="600" CornerRadius="8,8,8,15" Margin="10"> 
2   <Border.Background> 
3     <LinearGradientBrush StartPo="0.5,0" EndPo="0.5,1"> 
4       <GradientStop Off="0.05" Color="#73CFFF"></GradientStop> 
5       <GradientStop Off="0.05" Color="#D7EDFF"/> 
6       <GradientStop Off="1" Color="#D7EDFF"/> 
7     </LinearGradientBrush> 
8   </Border.Background> 
9   <Grid> 
10     <Grid.RowDefinitions> 
11       <RowDefinition Height="30"/> 
12       <RowDefinition/> 
13     </Grid.RowDefinitions> 
14 
15     <Grid Margin="5,0"> 
16       <TextBlock Text="QQ 2009 Preview" Foreground="White" VerticalAlignment="Center"/> 
17       <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal"> 
18         <Image Width="20" Source="Icons/2.png"/> 
19         <Image Width="20" Source="Icons/1.png"/> 
20         <Image Width="20" Source="Icons/3.png"/> 
21       </StackPanel> 
22     </Grid> 
23   </Grid> 
24</Border>




  运行结果如图(图标没有严格按照qq自己图标大家见谅毕竟我不是美工呵呵):

Silverlight专题(8)-布局介绍

  如何布局谋篇大家还是需要在实际项目中去学习和整理总结

  我在这里只是粗略介绍下希望对大家有所帮助



Tags:  silverlight2 silverlight.2.0 silverlight是什么 silverlight

延伸阅读

最新评论

发表评论