黑马程序员技术交流社区

标题: ❺ 黑马日记五：关于Silverlight布局系统的初学 [打印本页]
作者: yy312232557    时间: 2011-11-8 22:19
标题: ❺ 黑马日记五：关于Silverlight布局系统的初学
本帖最后由 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元素

  1.     <Grid x:Name="LayoutRoot" Background="White">
  2.         <!--1.通过Canvas.Left和Canvas.Top进行页面布局-->
  3.         <Canvas Background="Black" Width="400" Height="300">
  4.             <Ellipse Width="100" Height="100" Fill="Red"  Canvas.Left="50" Canvas.Top="50"/>
  5.         </Canvas>


  8.         <!--2.Canvas画布嵌套-->
  9.         <!--<Canvas Width="400" Height="400" Background="Blue">
  10.             <Canvas Width="300" Height="300" Background="Brown" Canvas.Left="50" Canvas.Top="50">
  11.                 <Canvas Width="200" Height="200" Background="Red" Canvas.Left="50" Canvas.Top="50">     
  12.                 </Canvas>
  13.             </Canvas>
  14.         </Canvas>-->


  17.         <!--3.Canvas作为容器可以布局几乎所有的xaml元素-->
  18.         <!--<Canvas>
  19.             <Button Content="传智播客001" Width="150" Height="80" Background="Red" Canvas.Top="50" Canvas.Left="50"/>
  20.             <Button Content="传智播客002" Width="150" Height="80" Background="Blue" Canvas.Top="150" Canvas.Left="100"/>
  21.             <Button Content="传智播客003" Width="150" Height="80" Background="Green" Canvas.Top="250" Canvas.Left="150"/>
  22.         </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，但是又不一样
  1. <Grid x:Name="LayoutRoot" Background="White">
  2. <!--在这里进行row和column的定义-->
  3. <!--定义行数和行高-->
  4. <Grid.RowDefinitions>
  5. <RowDefinition Height="100"/>
  6. <RowDefinition Height="100"/>
  7. <RowDefinition Height="100"/>
  8. <RowDefinition Height="*"/>
  9. </Grid.RowDefinitions>

  11. <!--定义列数和列宽-->
  12. <Grid.ColumnDefinitions>
  13. <ColumnDefinition Width="200"/>
  14. <ColumnDefinition Width="200"/>
  15. <ColumnDefinition Width="200"/>
  16. <ColumnDefinition Width="Auto"/>
  17. </Grid.ColumnDefinitions>

  19. <!--然后就根据Grid.Row 和Grid.Column 控制所有xaml元素的布局和位置-->
  20. <Button Content="Button001" Width="150" Height="80" Grid.Row="0" Grid.Column="0"/>
  21. <Button Content="Button002" Width="150" Height="80" Grid.Row="0" Grid.Column="1"/>
  22. <Button Content="Button003" Width="150" Height="80" Grid.Row="0" Grid.Column="2"/>
  23. <Button Content="Button004" Width="150" Height="80" Grid.Row="1" Grid.Column="0"/>
  24. <Button Content="Button005" Width="150" Height="80" Grid.Row="1" Grid.Column="1"/>
  25. <Button Content="Button006" Width="150" Height="80" Grid.Row="1" Grid.Column="2"/>
  26. </Grid>
复制代码
看到没，这个是通过先定义行和列，下面再通过 Grid.Row 和 Grid.Column来控制位置的，上面的运行效果如下：

下面看Grid的 另外两个设置值的属性，一般都是设置数字，这里还可以为  auto  和 *，如下代码：
  1. <Grid x:Name="LayoutRoot" Background="White">
  2. <!--定义行数和行高-->
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="200"/>
  5. </Grid.RowDefinitions>

  7. <!--定义列数和列宽,理解Auto 和 *-->
  8. <Grid.ColumnDefinitions>
  9. <ColumnDefinition Width="Auto"/>
  10. <!--列宽为Auto表示这一列的列宽可以自动匹配这一列中的xaml元素的大小-->
  11. <ColumnDefinition Width="*"/>
  12. <!--列宽为*表示这一列单元格自动填充完着整个Grid剩余的列宽-->
  13. </Grid.ColumnDefinitions>

  15. <Button Content="Button001" Grid.Row="0" Grid.Column="0" Width="200" Height="80"/>
  16. <Button Content="Button002" Grid.Row="0" Grid.Column="1" Width="200" Height="80"/>
  17. </Grid>
复制代码
不多解释，我在代码里面加了注释，上效果图：


下面继续看，还可以写成Width="0.50*"这样的，呵呵，是不是很性感呀
  1. <Grid x:Name="LayoutRoot" Background="White">
  2. <!--定义行数和行高-->
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="200"/>
  5. </Grid.RowDefinitions>

  7. <!--定义列数和列宽,理解Auto 和 *-->
  8. <Grid.ColumnDefinitions>
  9. <ColumnDefinition Width="0.50*"/>
  10. <ColumnDefinition Width="0.35*"/>
  11. <ColumnDefinition Width="0.15*"/>
  12. </Grid.ColumnDefinitions>


  15. <Button Content="我的宽占了整个Grid的50%" Background="Red" Grid.Column="0"/>
  16. <Button Content="我的宽占了整个Grid的35%" Background="Black" Grid.Column="1"/>
  17. <Button Content="我的宽占了整个Grid的15%" Background="Yellow" Grid.Column="2"/>
  18. </Grid>
复制代码
效果图：


OK，这第二种布局空间就说到这里，网上说这一种最重要， 呵呵，不知道你们看出来没

最后，我们来看看Silverlight的第三种布局控件 StackPanel ， 这种也很好用，主要是可以很容易的控制水平和垂直布局
看下面代码，我同样也写了三种，代码如下：
  1. <Grid x:Name="LayoutRoot" Background="White">
  2. <!--1.通过StackPanel进行垂直或者水平布局-->
  3. <StackPanel Background="Chartreuse" Opacity="0.5" Width="700" Height="700">
  4. <StackPanel Width="300" Height="300" Background="Black">
  5. <Rectangle Fill="Red" Width="50" Height="50" Margin="5"/>
  6. <Rectangle Fill="Green" Width="50" Height="50" Margin="5"/>
  7. <Rectangle Fill="Yellow" Width="50" Height="50" Margin="5"/>
  8. <Rectangle Fill="Tan" Width="50" Height="50" Margin="5"/>
  9. </StackPanel>

  11. <StackPanel Width="300" Height="300" Background="Beige" Orientation="Horizontal">
  12. <Rectangle Fill="Red" Width="50" Height="50" Margin="5"/>
  13. <Rectangle Fill="Green" Width="50" Height="50" Margin="5"/>
  14. <Rectangle Fill="Yellow" Width="50" Height="50" Margin="5"/>
  15. <Rectangle Fill="Tan" Width="50" Height="50" Margin="5"/>
  16. </StackPanel>
  17. </StackPanel>


  20. <!--2.理解Orientation-->
  21. <!--<StackPanel>

  23. <StackPanel>
  24. <TextBlock Text="传" FontSize="50"/>
  25. <TextBlock Text="智" FontSize="50"/>
  26. <TextBlock Text="播" FontSize="50"/>
  27. <TextBlock Text="客" FontSize="50"/>
  28. </StackPanel>

  30. <StackPanel Orientation="Horizontal">
  31. <TextBlock Text="传" FontSize="50"/>
  32. <TextBlock Text="智" FontSize="50"/>
  33. <TextBlock Text="播" FontSize="50"/>
  34. <TextBlock Text="客" FontSize="50"/>
  35. </StackPanel>

  37. </StackPanel>-->


  40. <!--3.StackPanel元素布局-->
  41. <!--<StackPanel Background="LightGoldenrodYellow" Width="500" Height="500" Margin="200">

  43. <StackPanel Orientation="Horizontal">
  44. <Rectangle Width="200" Height="100" Fill="Black"/>
  45. <Ellipse Width="200" Height="100" Fill="Blue"/>
  46. </StackPanel>

  48. <StackPanel Orientation="Horizontal">
  49. <Ellipse Width="200" Height="100" Fill="Blue"/>
  50. <Rectangle Width="200" Height="100" Fill="Black"/>
  51. </StackPanel>

  53. </StackPanel>-->
  54. </Grid>
复制代码
上面三个的运行效果图如下三个，上面有注释，可以分别对照代码看：
StackPanel效果一（如上代码片段1）：

StackPanel效果二（如上代码片段2）：


StackPanel效果三（如上代码片段3）：


好了，到此为止，  Silverlight的三中布局控件就学习完毕，不知道大家有对我的学习补充的吗？
作者: 夏雪锐    时间: 2011-11-13 20:13
高人就是不一样



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2