XAML 实例演示之二
使用DockPanel 和 Border 进行页面布局
计划将整个windows Form使用DockPanel和Border控件分为三个区域-Top/Left/Right。下面,首先定义Grid 和 DockPanel 包容器元素。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="Welcome" Height="480" Width="690">
<Grid>
<DockPanel LastChildFill="False">
接下来是TOP 区域的Border控件定义:
<Border
DockPanel.Dock="Top"
BorderBrush="Black"
BorderThickness="1"
Height="70">
<Label
FontFamily="Verdana"
FontSize="32"
HorizontalAlignment="Center">EntLib.com – 开源ASP.NET/C# 技术论坛</Label>
</Border>
左边区域Border 控件的定义:
<Border
DockPanel.Dock="Left"
BorderBrush="Black"
BorderThickness="1"
Width="400">
<StackPanel>
<Label
FontFamily="Verdana"
FontWeight="Bold" FontSize="18"
HorizontalAlignment="Center">Left</Label>
</StackPanel>
</Border>
右边区域 Border 控件的定义:
<Border
DockPanel.Dock="Right"
BorderBrush="Black"
BorderThickness="1"
Width="290">
<Image Name="imgLogo" Margin="0, 10, 0, 0" HorizontalAlignment="Center" VerticalAlignment="Top"
Source=" http://forum.entlib.com/images/entlib.gif" Width="220" />
</Border>
最后,关闭相关的控件。
</DockPanel>
</Grid>
</Window>
下面是通过Kaxaml 工具的运行效果图:
下面,进一步采用StackPanel、Label、Separator 控件实现左侧区域的效果。StackPanel 实现控件从上至下摆放,Separator控件用来进一步隔离不同的控件。
左侧Border 及其内部控件代码 – 请下载附件中的范例代码。
通过Kaxaml工具,范例XAML 的最终演示效果如下:
从上述范例,我们可以看到XAML具有非常强大的界面定义功能,允许我们创建复杂的界面布局和引入本地及Web资源。另外,XAML也可以设计动画,这里就不具体介绍了。