本帖最后由 yy312232557 于 2011-11-8 22:24 编辑
一直想转行到Windows phone 的开发中去,虽然现在相关的工作还不是很多,但是相信这是一个潮流,未来这移动开发肯定错不了,
所以自己业余也开始学习Silverlight了,因为这是想做Windows Phone 开发的必修课。
废话不多说,开始跟大家一起学习,首先,Silverlight跟我们以前学的ASP.NET页面完全不一样,刚开始连怎么布局都知道,
那好,我们就开始学习Silverlight的布局系统。 想说的是,我是从零开始的,如果我有不对的地方,大家留言提出来,我们一起学习。
大致上网看了一下,Silverlight的布局系统主要分为三块:
第一,Canvas
第二,Grid
第三,Stackpanel
那么上面这三个就是Silverlight的主要布局方式
1 . Canvas: 这是以前我们没学过的东西,中文是“画布”的意思, Silverlight的控件都可以在这个上面画, 好像这也是 html5所特有的东西,具体的我也还没研究那么深入。
新建一个Silverlight项目,我测试了三种Canvas布局,1.通过Canvas.Left和Canvas.Top进行页面布局,这种相当于坐标一样的;2.Canvas画布是可以嵌套的;3.Canvas作为容器可以布局几乎所有的xaml元素
- <Grid x:Name="LayoutRoot" Background="White">
- <!--1.通过Canvas.Left和Canvas.Top进行页面布局-->
- <Canvas Background="Black" Width="400" Height="300">
- <Ellipse Width="100" Height="100" Fill="Red" Canvas.Left="50" Canvas.Top="50"/>
- </Canvas>
- <!--2.Canvas画布嵌套-->
- <!--<Canvas Width="400" Height="400" Background="Blue">
- <Canvas Width="300" Height="300" Background="Brown" Canvas.Left="50" Canvas.Top="50">
- <Canvas Width="200" Height="200" Background="Red" Canvas.Left="50" Canvas.Top="50">
- </Canvas>
- </Canvas>
- </Canvas>-->
- <!--3.Canvas作为容器可以布局几乎所有的xaml元素-->
- <!--<Canvas>
- <Button Content="传智播客001" Width="150" Height="80" Background="Red" Canvas.Top="50" Canvas.Left="50"/>
- <Button Content="传智播客002" Width="150" Height="80" Background="Blue" Canvas.Top="150" Canvas.Left="100"/>
- <Button Content="传智播客003" Width="150" Height="80" Background="Green" Canvas.Top="250" Canvas.Left="150"/>
- </Canvas>--> </Grid>
复制代码 上面我写了三种,我分别注释其中两个,运行的效果如下:
效果1(请对照上面的代码):我们在宽400像素高300像素的黑色画布当中画了一个直径为100像素的园,填充为红色,并且通过Canvas.Left和Canvas.Top设置距离左和上个50像素,如下图
效果2(请对照上面的代码):Canvas画布三层嵌套
效果3(请对照上面的代码):在画布里面随意通过 Canvas.Top 和Canvas.Left 布局按钮元素
OK,第一种布局控件到此为止,下面看Grid,这是最重要的一个,也是最方便的(网上这么说的,我还没弄懂)
2. Grid: 这里说的Grid可不是网格的意思啊,这是一个容器。可以理解为asp里面的table,但是又不一样
- <Grid x:Name="LayoutRoot" Background="White">
- <!--在这里进行row和column的定义-->
- <!--定义行数和行高-->
- <Grid.RowDefinitions>
- <RowDefinition Height="100"/>
- <RowDefinition Height="100"/>
- <RowDefinition Height="100"/>
- <RowDefinition Height="*"/>
- </Grid.RowDefinitions>
- <!--定义列数和列宽-->
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="200"/>
- <ColumnDefinition Width="200"/>
- <ColumnDefinition Width="200"/>
- <ColumnDefinition Width="Auto"/>
- </Grid.ColumnDefinitions>
- <!--然后就根据Grid.Row 和Grid.Column 控制所有xaml元素的布局和位置-->
- <Button Content="Button001" Width="150" Height="80" Grid.Row="0" Grid.Column="0"/>
- <Button Content="Button002" Width="150" Height="80" Grid.Row="0" Grid.Column="1"/>
- <Button Content="Button003" Width="150" Height="80" Grid.Row="0" Grid.Column="2"/>
- <Button Content="Button004" Width="150" Height="80" Grid.Row="1" Grid.Column="0"/>
- <Button Content="Button005" Width="150" Height="80" Grid.Row="1" Grid.Column="1"/>
- <Button Content="Button006" Width="150" Height="80" Grid.Row="1" Grid.Column="2"/>
- </Grid>
复制代码 看到没,这个是通过先定义行和列,下面再通过 Grid.Row 和 Grid.Column来控制位置的,上面的运行效果如下:
下面看Grid的 另外两个设置值的属性,一般都是设置数字,这里还可以为 auto 和 *,如下代码:
- <Grid x:Name="LayoutRoot" Background="White">
- <!--定义行数和行高-->
- <Grid.RowDefinitions>
- <RowDefinition Height="200"/>
- </Grid.RowDefinitions>
- <!--定义列数和列宽,理解Auto 和 *-->
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="Auto"/>
- <!--列宽为Auto表示这一列的列宽可以自动匹配这一列中的xaml元素的大小-->
- <ColumnDefinition Width="*"/>
- <!--列宽为*表示这一列单元格自动填充完着整个Grid剩余的列宽-->
- </Grid.ColumnDefinitions>
- <Button Content="Button001" Grid.Row="0" Grid.Column="0" Width="200" Height="80"/>
- <Button Content="Button002" Grid.Row="0" Grid.Column="1" Width="200" Height="80"/>
- </Grid>
复制代码 不多解释,我在代码里面加了注释,上效果图:
下面继续看,还可以写成Width="0.50*"这样的,呵呵,是不是很性感呀
- <Grid x:Name="LayoutRoot" Background="White">
- <!--定义行数和行高-->
- <Grid.RowDefinitions>
- <RowDefinition Height="200"/>
- </Grid.RowDefinitions>
- <!--定义列数和列宽,理解Auto 和 *-->
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="0.50*"/>
- <ColumnDefinition Width="0.35*"/>
- <ColumnDefinition Width="0.15*"/>
- </Grid.ColumnDefinitions>
- <Button Content="我的宽占了整个Grid的50%" Background="Red" Grid.Column="0"/>
- <Button Content="我的宽占了整个Grid的35%" Background="Black" Grid.Column="1"/>
- <Button Content="我的宽占了整个Grid的15%" Background="Yellow" Grid.Column="2"/>
- </Grid>
复制代码 效果图:
OK,这第二种布局空间就说到这里,网上说这一种最重要, 呵呵,不知道你们看出来没
最后,我们来看看Silverlight的第三种布局控件 StackPanel , 这种也很好用,主要是可以很容易的控制水平和垂直布局
看下面代码,我同样也写了三种,代码如下:
- <Grid x:Name="LayoutRoot" Background="White">
- <!--1.通过StackPanel进行垂直或者水平布局-->
- <StackPanel Background="Chartreuse" Opacity="0.5" Width="700" Height="700">
- <StackPanel Width="300" Height="300" Background="Black">
- <Rectangle Fill="Red" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Green" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Yellow" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Tan" Width="50" Height="50" Margin="5"/>
- </StackPanel>
- <StackPanel Width="300" Height="300" Background="Beige" Orientation="Horizontal">
- <Rectangle Fill="Red" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Green" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Yellow" Width="50" Height="50" Margin="5"/>
- <Rectangle Fill="Tan" Width="50" Height="50" Margin="5"/>
- </StackPanel>
- </StackPanel>
- <!--2.理解Orientation-->
- <!--<StackPanel>
- <StackPanel>
- <TextBlock Text="传" FontSize="50"/>
- <TextBlock Text="智" FontSize="50"/>
- <TextBlock Text="播" FontSize="50"/>
- <TextBlock Text="客" FontSize="50"/>
- </StackPanel>
- <StackPanel Orientation="Horizontal">
- <TextBlock Text="传" FontSize="50"/>
- <TextBlock Text="智" FontSize="50"/>
- <TextBlock Text="播" FontSize="50"/>
- <TextBlock Text="客" FontSize="50"/>
- </StackPanel>
- </StackPanel>-->
- <!--3.StackPanel元素布局-->
- <!--<StackPanel Background="LightGoldenrodYellow" Width="500" Height="500" Margin="200">
- <StackPanel Orientation="Horizontal">
- <Rectangle Width="200" Height="100" Fill="Black"/>
- <Ellipse Width="200" Height="100" Fill="Blue"/>
- </StackPanel>
- <StackPanel Orientation="Horizontal">
- <Ellipse Width="200" Height="100" Fill="Blue"/>
- <Rectangle Width="200" Height="100" Fill="Black"/>
- </StackPanel>
- </StackPanel>-->
- </Grid>
复制代码 上面三个的运行效果图如下三个,上面有注释,可以分别对照代码看:
StackPanel效果一(如上代码片段1):
StackPanel效果二(如上代码片段2):
StackPanel效果三(如上代码片段3):
好了,到此为止, Silverlight的三中布局控件就学习完毕,不知道大家有对我的学习补充的吗? |