肯定有时候有时候会很纳闷自己做得网页为什么那么难看
而网络上些范例那么好看
事实上就是布局功劳(当然配色也是很重要)
正如带兵打仗不会排兵布阵有再好兵也枉然
设计: Silverlight为咱们排兵布阵提供了 3个神兵利器Grid,StackPanel和Canvas
下面我分别对这 3种布局Control控件做下介绍
Grid:个有点类似Table(表格)Control控件
如下所示我将Grid分成了 3行两列行高度以及列Control控件如代码所示
你可以通过给放置在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>
运行结果如下: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>
运行结果如下:
最后种布局工具是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>
运行结果如下:
最后再介绍下BorderControl控件
这个Control控件在布局时候经常会用到
特别是它圆角功能屡试不爽^_^
如QQ TM版本登陆界面圆角(CornerRadius属性)就可以用Silverlight很快实现
大致模拟下上面部分如下:
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自己图标大家见谅毕竟我不是美工呵呵):
如何布局谋篇大家还是需要在实际项目中去学习和整理总结
我在这里只是粗略介绍下希望对大家有所帮助
最新评论