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