初学SilverLight - （3）简单布局

在VS里面我没有找到xaml的design模式，不知道是少安装了什么东西。不过还好我安装了Blend express，这个工具主要用做开发silverlight的界面，是一个标准的design工具。下面看看怎么用。

1. 打开vs的solution explorer，右键一个xaml文件，可以看到

2. 看到Open in Expression Blend了吧，别想了，直接点吧

 

这个界面以后还要慢慢熟悉，不过基本上MS提供的东西用户体验还是非常好的，这个blend就属于那种直接就能上手的工具啦。好了，废话不多说，这篇要讲layout，也就是布局。布局在设计页面的时候是非常重要的，它是实现程序细节的前提条件。Silverlight提供了一些基本的布局控件供开发使用。看上图左上角，Assers->Controls->Panels，这里列出了silverlight布局控件

1. Canvas - 通过坐标，用绝对位置来定位controls

 

<Canvas> 
<Button Canvas.Top="50" Canvas.Left="50" Content="Button 1" FontSize="18" Width="150" Height="45" />
<Button Canvas.Top="150" Canvas.Left="20" Content="Button 2" FontSize="18" Width="150" Height="45" />
<Button Canvas.Top="70" Canvas.Left="80" Canvas.ZIndex="99" Content="Button 3" FontSize="18" Width="150" Height="45" />
</Canvas>

2. Grid - 类似于表格，把control放在一个个分开的小格子中

 

 

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Grid.Row="0" Content="Button 1" FontSize="18" Width="150" Height="45" />
    <Button Grid.Column="2" Grid.Row="0" Margin="10" Content="Button 2" FontSize="18" Width="150" Height="45" />  
    <Button Grid.Column="1" Grid.Row="2" Margin="10" Content="Button 3" FontSize="18" Width="150" Height="45" /> 
</Grid>

 

3. StackPanel - 控件按照横向或者纵向依次排列

<StackPanel>   
<Button Margin="10" Content="Button 1" FontSize="18" Width="150" Height="45" />   
<Button Margin="10" Content="Button 2" FontSize="18" Width="150" Height="45" />   
<Button Margin="10" Content="Button 3" FontSize="18" Width="150" Height="45" />  
</StackPanel>

4. TabPanel - control被分散放在不同的tab中。

 

            	<System_Windows_Controls_Primitives:TabPanel Height="363" Width="407">
            		<controls:TabItem Header="TabItem1">
            			<Grid/>
            		</controls:TabItem>
            		<controls:TabItem Header="TabItem2">
            			<Grid/>
            		</controls:TabItem>
            		<controls:TabItem Header="TabItem3">
            			<Grid/>
            		</controls:TabItem>
            	</System_Windows_Controls_Primitives:TabPanel>

 

5. VirtualizingStackPanel - 从名字上看就是虚拟的StackPanel。它的意义在于，如果silverlight容器内包含大量控件，虽然不在一个页中显示出来，但是实际也是生成了，这样可能会造成性能上的损失。用虚拟化的方法假设当前没有显示出来的控件是存在的，然后计算layout，只有当前可见控件才会创建，仅当实际需要的时候显示的时候才会显示那些不可见控件。。。现在可能能用到的场景不是很多吧。

 

OK，这篇就写这么多啦。