silver light基础1页面布局

页面布局就是合理调整页面各个控件的位置和大小，要定位可视化对象，您必须将它们放置于Panel 或其他容器对象中，在Silverlight中，容器主要有三种方式：

　　1. Cavas

　　2. StackPanel

　　3. Grid

下面分别进行介绍：

1. Cavas

    首先看例子：

<Canvas Height="100" Name="canvas1" Width="200" Background="LightBlue">
       <Button Content="11111" Canvas.ZIndex="1" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button>
       <Button Content="22222" Canvas.ZIndex="2" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button>
</Canvas>

第1行：Name为Canvas的名称，Height和Width决定Canvas的大小，如果不写，默认Canvas占据整个网页（貌似控件都这么设置），Background为Canvas的背景色

第2,3行：在Canvas中设置两个按钮，Canvas.Left和Canvas.Top决定按钮的位置，Height和Width决定按钮的大小

               其中，Canvas.ZIndex决定按钮加载的顺序，值越大，按钮加载的顺序越靠后

              本例中，由于2个按钮大小相同，第二个按钮后加载，覆盖第一个按钮，显示内容22222

    效果如下：

　　

     使用 Canvas 对对象进行绝对定位在某些情况下很有用，但是在大小可变的浏览器窗口中，这通常是一个很糟糕的策略。绝对定位不允许对象根据浏览器窗口的大小调整在页面上重新排列，对象保留在各自的指定像素位置。StackPanel 和 Grid 允许内容重新排列。Grid 对象是 Visual Studio Silverlight 模板使用的根元素。尽管在使用方面 Grid 对象比其他 Panel 对象要复杂一些，但是它支持内容的重新排列，并且其灵活性足以使您创建各种对象布局。要获得最佳的窗口大小调整行为（除了使用 Panel 对象定位子对象外），通常来说最好的办法是将 DOM 的宽度和高度属性保留为 100%，并且在 XAML 文件的根元素或布局根元素中不包含任何宽度或高度声明。

     可以canvas封装一组控件，例如canvas中有两个button，一个btn1，一个btn2，判断鼠标经过canvas，两个button显示各自的名称

.xmal中

<Canvas Height="100" Name="canvas1" Width="200" Background="LightBlue" MouseEnter="canvas1_MouseEnter">
        <Button Name="btn1" Content="11111" Canvas.ZIndex="1" Canvas.Left="20" Width="60" Height="30" Canvas.Top="22"></Button>
        <Button Name="btn2" Content="22222" Canvas.ZIndex="2" Canvas.Left="20" Width="60" Height="30" Canvas.Top="58"></Button>
</Canvas>

.xmal.cs中

 

private void canvas1_MouseEnter(object sender, MouseEventArgs e)
        {
            foreach (Control c in this.canvas1.Children)
            {
                Button b = c as Button;
                if (b.Name == "btn1")
                {
                    b.Content = "按钮1";
                }
                else if (b.Name == "btn2")
                {
                    b.Content = "按钮2";
                }
                else 
                {  
                }
        }

 

    效果如下：

 

2. StackPanel

     stackpanel里的控件布局类似于堆栈，控件默认由上而下逐次排列（可以修改为从左到右<StackPanel　Background="White"　Orientation="Horizontal">），不能直接手动修改控件（鼠标拖拽控件位置）的位置和排列顺序

首先看例子：

   <StackPanel Background="White" Name="StackPanel1">
        <Button Name="btn1" Content="11111" VerticalAlignment="Top" HorizontalAlignment="Center"></Button>
        <Button Name="btn2" Content="22222" Width="161" VerticalAlignment="Top" HorizontalAlignment="Center"></Button>
        <Button Name="btn3" Content="33333" Height="83" Width="279" VerticalAlignment="Top" HorizontalAlignment="Center"></Button>
    </StackPanel>

第1行：Name为stackpanel的名称，Height和Width未写，默认stackpanel占据整个页面，控件排列顺序未写，默认从上到下

第2,3,4行：设置三个按钮，只能设置按钮的Height和Width，不能直接手动设置（鼠标拖拽控件位置）按钮的位置（与canvas不同），按钮控件只能按顺序由上到下（或者由左到右）排列

VerticalAlignment和HorizontalAlignment设置按钮在列上的所处位置（top，center，bottom，stretch）和行上的所处位置（left，center，right，stretch）

    本例中选择在列上靠上显示，行上居中显示按钮

效果如下：

 按钮的位置虽然不能手工拖拽，不过可以通过以下方式间接设置

 <Button Name="btn1" Content="11111" Margin="10,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Center"></Button>

其中Margin="10,5,8,15"表示，按钮btn1,离左边控件距离10个pixel，离上面控件距离5个pixel，离右面控件距8离个pixel，离15下面控件距离个pixel。

 

 

3. Grid

Grid控件貌似用途最多，和asp.net中的grid控件差不多，不过asp.net中的grid控件边定义行列边赋值，silverlight中的grid控件先定义行列后赋值

例如以grid显示以下的值

          1   2

          3   4

 asp.net的grid

<table　border="2">
　　<tr>
　　　　<td>1</td>
　　　　<td>2</td>
　　</tr>
　　<tr>
　　　　<td>3</td>
　　　　<td>4</td>
　　</tr>
</table>

  silverlight的grid

   <Grid x:Name="Grid1" Background="White" Width="400" Height="300" ShowGridLines="True">          
       
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition ></RowDefinition>              
        </Grid.RowDefinitions>          
        <Grid.ColumnDefinitions>                
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>                            
        </Grid.ColumnDefinitions>
          
        <TextBlock Text="1" Grid.Row="0" Grid.Column="0"></TextBlock>          
        <TextBlock Text="2" Grid.Row="0" Grid.Column="1"></TextBlock>                       
        <TextBlock Text="3" Grid.Row="1" Grid.Column="0"></TextBlock>          
        <TextBlock Text="4" Grid.Row="1" Grid.Column="1"></TextBlock>          
       
    </Grid>

 

看完了例子，下面学习下silverlight中的grid控件

 

 <Grid x:Name="Grid1" Background="White" Width="400" Height="300" ShowGridLines="True">          
        <Grid.RowDefinitions>
            <RowDefinition Height="20*"></RowDefinition>
            <RowDefinition Height="40*"></RowDefinition>              
        </Grid.RowDefinitions>          
        <Grid.ColumnDefinitions>                
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="200"></ColumnDefinition>                
            <ColumnDefinition></ColumnDefinition>              
        </Grid.ColumnDefinitions>
          
        <TextBlock Text="111" Grid.Row="0" Grid.Column="0"></TextBlock>          
        <TextBlock Text="222" Grid.Row="0" Grid.Column="1"></TextBlock>          
        <TextBlock Text="333" Grid.Row="0" Grid.Column="2"></TextBlock>          
        <TextBlock Text="444" Grid.Row="1" Grid.Column="0"></TextBlock>          
        <TextBlock Text="555" Grid.Row="1" Grid.Column="1"></TextBlock>          
        <TextBlock Text="666" Grid.Row="1" Grid.Column="2"></TextBlock>
</Grid>

 

第1行：设置grid的名称，背景色，大小，ShowGridLines="True"设置每个格子间是否显示分界线

第2-9行：设置grid的行列，先设置行，第一行高20*，第二行高40*，这个表示第一行高度=grid高度 * 20/60，第二行高度=grid高度 * 40/60

              第6行开始设置grid的列，第一列宽100，第二列宽200，第三列宽度为grid剩下的宽度

第10-    ：设置6个TextBlock，分别处于grid的各个各自中

 

此外，grid的行列的宽度和高度，Height和 Width可以设置最大值，宽（高）度在这个范围内时，宽（高）度设置为auto，根据内容自动调整宽（高）度。

eg：

<ColumnDefinition　Width="Auto"　MinWidth="30"　MaxWidth="150"></ColumnDefinition>