WPF体验（2）

 

布局

 

上一次我们简单介绍了XAML的写法，这一次，我们着重介绍XAML中界面的布局。

同ASP.NET的Table类似，Grid也可以用来布局，下面的XAML显示了2*2的网格：

 

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

>

<Border Grid.Column="0" Background="LightBlue" Margin="10"/>

<Border Grid.Column="1" Background="yellow" Margin="10"/>

<Border Grid.Row="1" Background="Red" Margin="10" />

<Border Grid.Row="1" Grid.Column="1" Background="Blue" Margin="10" />

<ColumnDefinition />

<ColumnDefinition />

<RowDefinition />

<RowDefinition />

</Grid>

 

虽然Grid可以用于布局，但是我们需要一种更灵活一点的布局方法，那就是采用面板，下面的代码演示了一种网页式的布局，上面是一个Header面板，然后是菜单栏，左边一个导航面板，最底下是Footer面板：

 

<StackPanel DockPanel.Dock="Top" Height="100" Background="Blue" />

 

<Menu DockPanel.Dock="Top" Background="LightBlue" >

<MenuItem Header="File"/>

<MenuItem Header="Eidt" />

<MenuItem Header="View" />

<MenuItem Header="Tools"/>

<MenuItem Header="Help"/>

</Menu>

 

<StackPanel DockPanel.Dock="Bottom" Height="40" Background="DarkBlue" />

<StackPanel DockPanel.Dock="Left" Width="120" Background="LightGray" />

<StackPanel />

 

</DockPanel>

 

使用面板进行布局，先后次序是比较重要的，次序不同，布局的效果就不同。如果你细心的话，你会发现最后一个空的面板，如果忽略了这个面板，那么Dock到左边的面板就会跑到中间。当然，除了使用面板，你也可以使用其他元素来进行布局。不过要记住，如果你需要在布局中加入其他非容器类元属，需要把它们放在容器类中。也就是说作为容器的子元素。

如果你觉得到目前为止，界面还不够Cool, 那么下一次我们将介绍风格或者叫做样式。

WPF体验(一）
WPF体验(三）
WPF体验(四）
WPF体验(五)