silverlight的整个页面就是一个内容控件继承自UserControl。这是一个内容控件,具有Content属性。此属性只能是唯一的,所以在页面的跟元素下,添加一个以上的控件或者文本会提示:“属性"Content"已设置多次。”,但是我们可以通过嵌套布局控件来达到复杂的布局需求。
一,布局容器
1. Grid:新建SL应用程序时,系统默认生成的布局控件相当于Html中的表格布局。
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition />
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
</Grid>
这个是4列3行的Grid 其中一列是用集合编辑器添加。右键点击Grid选择属性就会在属性窗口看到2个按钮分别为行和列。编辑其中可以设定行或者列的宽度、高度、最大宽度,最小宽度。其中宽度和高度的默认值是“*”这个是告诉容器此行或者列占用剩余的所有空间。
grid的动态创建
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Content = _creatNewGrid();
}
public Grid _creatNewGrid()
{
Grid _grid = new Grid();
for (int i = 0; i < 3;i++ )//创建3行
{
RowDefinition _rows = new RowDefinition();
_rows.Height = new System.Windows.GridLength(1, GridUnitType.Star);
_grid.RowDefinitions.Add(_rows);
}
for (int j = 0; j < 3; j++)//创建3列
{
ColumnDefinition _col = new ColumnDefinition();
_col.Width = new System.Windows.GridLength(1, GridUnitType.Auto);
_grid.ColumnDefinitions.Add(_col);
}
TextBox _textbox = new TextBox(); //添加一个TextBox控件
_textbox.Text = "Grid布局中添加一个控件!";
Grid.SetRow(_textbox, 0);
Grid.SetColumn(_textbox, 0);//添加到第一行第一列注意行号从0开始,添加时使用的是Grid的静态方法!
_grid.Children.Add(_textbox);
return _grid;
}
}
当然作为类似表格布局一样的存在,Grid也可以单独设置每一行或列的属性,还可以合并单元格。
2.StackPanel 小区域布局控件,给定一组控件按照Orientation属性的值(水平和垂直)来决定控件的显示方式。
3.Canvas控件,基于坐标的布局控件。
其内的控件主要属性为:Canvas.ZIndex,Canvas.Left 和Canvas.Top 这3个属于依赖属性(DependencyProperty)。
这3种容器控件,是SL应用程序中最常用到的。
4.ScrollViewer, 要想让你的页面具有滚动条你就要在容器的外面在包上一层,代码最直观!
<ScrollViewer Name="svContainer" Background="#dcdcdc" HorizontalContentAlignment="Left" VerticalAlignment="Top" BorderBrush="Beige" BorderThickness="0" HorizontalAlignment="Left" Width="900" Height="600" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0">
<ScrollViewer.Content>
<Border VerticalAlignment="Top" HorizontalAlignment="Left" BorderThickness="1" BorderBrush="White" >
<Canvas Name="cnsDesignerContainer" VerticalAlignment="Top" HorizontalAlignment="Left" Width="900" Height="580" Background="#ffffff">
</Canvas>
</Border>
</ScrollViewer.Content>
</ScrollViewer>
相当的虎头蛇尾,基本的页面布局就着4种控件了。