silverlight(三.布局控件)

2019独角兽企业重金招聘Python工程师标准>>> silverlight(三.布局控件)

1.Grid

Grid 主要是用来定义由列和行组成的可变网格区域。Grid 是用来做布局，不可做数据绑定。如果要使用数据绑定就要用DataGrid。

silverlight(三.布局控件)

(使用VS2010视图开发起来比较简单快捷，鼠标右键点击Grid选择网格行或网格列就可以分别添加行和列；其高宽与frame框架设置类似可以使用*代替剩余的布局，也可以将剩余部分按等分，如高 2* 和 * 是分别把余下的高度等分三份然后各取所需)

VerticalAlignment="Center" : 垂直局中

HorizontalAlignment="Center" : 水平居中

Margin="0" ：单元格内居中

Grid代码

< Grid Height = " 300 " Name = " grid1 " Width = " 400 " Background = " AliceBlue " VerticalAlignment = " Center " HorizontalAlignment = " Center " >
         < Grid.ColumnDefinitions >
             < ColumnDefinition Width = " 125 " />
             < ColumnDefinition Width = " 174 " />
             < ColumnDefinition Width = " 101* " />
         Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        Grid.RowDefinitions>
        <TextBlock Grid.Column="1" Height="23" Name="textBlock1" Text="新用户注册"  VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0"  FontSize="16"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,8,0,0" Name="textBlock2" Text="用户名：" VerticalAlignment="Top" Grid.Row="1" FontSize="13"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,9,0,0" Name="textBlock3" Text="密      码：" VerticalAlignment="Top" Grid.Row="2"  FontSize="13"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,9,0,0" Name="textBlock4" Text="重复密码：" VerticalAlignment="Top" Grid.Row="3"  FontSize="13"/>
        <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Center" Margin="5,8,0,0" Name="textBox1" VerticalAlignment="Top" Width="140" />
        <TextBox Height="23" HorizontalAlignment="Center" Margin="5,9,0,0" Name="textBox2" VerticalAlignment="Top" Width="140" Grid.Row="2" Grid.Column="1" />
        <TextBox Height="23" HorizontalAlignment="Center" Margin="5,9,0,0" Name="textBox3" VerticalAlignment="Top" Width="140" Grid.Column="1" Grid.Row="3" />
        <Button Content="确定" Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="19,22,0,0" Name="button1" VerticalAlignment="Top" Width="63" />
        <Button Content="重置" Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="98,22,0,0" Name="button2" VerticalAlignment="Top" Width="61" />
    Grid>

从代码可以看出，Grid编码再也不像table那样直观，Grid先画出格子，然后在直接拖入控件然后标明是显示到哪一个单元格内。如两个按钮分别设置了 Grid.Column="1" Grid.Row="4" 指明在第5行第2个单元格

2.Canvas

Canvas 定义了一个区域，在该区域中可以使用相对于该区域的坐标显式定位子对象。通过指定 x 和 y 坐标，可以控制对象在 Canvas 中的定位。这些坐标以像素为单位。x 和 y 坐标通常使用 Canvas.Left 和 Canvas.Top的附加属性来指定。

隐藏Canvas方法：设置一下任意一个属性即可

Height=0，Width=0，Background=null，Opacity=0，visibility=Visibility.Collapsed,Canvas的上级对象不可见。

silverlight(三.布局控件) (Canvas与Grid均可嵌套)

代码

< Canvas Height = " 300 " Name = " canvas1 " Width = " 400 " Background = " #FFF41313 " >
         < Canvas Canvas.Left = " 31 " Canvas.Top = " 27 " Height = " 243 " Name = " canvas2 " Width = " 323 " Background = " #FFE7F012 " >
             < Canvas Canvas.Left = " 34 " Canvas.Top = " 33 " Height = " 180 " Name = " canvas3 " Width = " 253 " Background = " #FF1EDD17 " />
         Canvas>
    Canvas>

3.StackPanel

StackPanel 将子元素排列成一行（可沿水平或垂直方向）。设置Orientation属性即可，默认是垂直的。

silverlight(三.布局控件)

silverlight(三.布局控件) 代码

< Grid x:Name = " LayoutRoot " Background = " White " >
         < StackPanel Height = " 300 " HorizontalAlignment = " Left " Name = " stackPanel1 " VerticalAlignment = " Top " Width = " 100 " >
             < Rectangle Fill = " Red " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Blue " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Green " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Purple " Width = " 50 " Height = " 50 " Margin = " 5 " />
         StackPanel>
        <StackPanel Height="100" HorizontalAlignment="Left" Margin="106,103,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="266" Orientation="Horizontal">
            <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
            <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
        StackPanel>
    Grid>

转载请保留此处：小绿虫博客开始学习silverlight,很多东西是看着文档自己摸索的，如果有不正确的地方，请多多指教！

随笔回顾：

silverlight(一.安装和新建项目)

silverlight(二.silverlight项目介绍)

作者: 小绿虫发表于 2010-10-01 23:37 原文链接

评论: 6 查看评论发表评论

最新新闻：
· 微软Kinect即将上线完全中国制造(2010-10-26 22:41)
· 亚马逊推出免费版iPad应用Windowshop(2010-10-26 22:37)
· 谁来取代QQ？(2010-10-26 21:58)
· 《Facebook效应》作者力挺扎克伯格(2010-10-26 21:43)
· 访谈 Instapaper 创始人 Marco Arment(2010-10-26 21:40)

编辑推荐：开发人员需要知道如何做，做什么，和为什么做

网站导航：博客园首页我的园子新闻闪存小组博问知识库

转载于:https://my.oschina.net/simcoder/blog/9243

silverlight(三.布局控件)

相关推荐