WPF实例学习（A-03）

Page1.xaml

<Page

 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

 <DockPanel    

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

    <TextBlock Background="LightBlue"

                DockPanel.Dock="Top">Some Text</TextBlock>

    <TextBlock DockPanel.Dock="Bottom"

                background="http://www.blog.com.cn/LightYellow">Some text at the bottom of the page.</TextBlock>

    <TextBlock DockPanel.Dock="Left"

                background="http://www.blog.com.cn/Lavender">Some More Text</TextBlock>

    <DockPanel background="http://www.blog.com.cn/Bisque">

      <StackPanel DockPanel.Dock="Top">

        <Button HorizontalAlignment="Left"

                Height="30px"

                Width="100px"

                Margin="10,10,10,10">Button1</Button>

        <Button HorizontalAlignment="Left"

                Height="30px"

                Width="100px"

                Margin="10,10,10,10">Button2</Button>

      </StackPanel>

      <TextBlock background="http://www.blog.com.cn/LightGreen">Some Text Below the Buttons</TextBlock>

    </DockPanel>

 </DockPanel>

</Page>

 

这个例子的MyApp.xaml文件依然没有变化，但是Page1.xaml文件却增加了很多的内容。首先是布局（LayOut）的变化。[Page]元素里面的布局变为[DockPanel]，而在[DockPanel]内部添加了三个[TextBlock]和一个嵌套的[DockPanel]，在嵌套的[DockPanel]内部又嵌套了[StackPanel]。可见XAML的布局是可以任意的嵌套使用的。

在VS2005中安装Orcas插件之后可以通过Design看到，控件的布局，如下图所示

500){this.resized=true;this.style.width=500;}" resized="true">

下面先介绍一下[DockPanel]，[DockPanel]把整个布局分为4个部分，上（Top），下（Bottom），左（Left），右（Right），可以使用DockPanel.Dock="Left"来设定控件或者子布局的位置。

例如:上例中的

<TextBlock Background="LightBlue" DockPanel.Dock="Top">Some Text</TextBlock>

指定Some Text文本位于[DockPanel]的上部；

<TextBlock DockPanel.Dock="Bottom" background="http://www.blog.com.cn/LightYellow">Some text at the bottom of the page.</TextBlock>

指定Some text at the bottom of the page 文本位于[DockPanel]的下部；

<TextBlock DockPanel.Dock="Left" background="http://www.blog.com.cn/Lavender">Some More Text</TextBlock>

指定Some More Text文本位于[DockPanel]的右部。

现在我们对[DockPanel]有了一些了解，那么我们的[DockPanel]的布局显示应该是下面的两个中的那种呢？？？

 500){this.resized=true;this.style.width=500;}">

500){this.resized=true;this.style.width=500;}">

 

是第一张图所示的样子，原因在于我们的DockPanel.Dock="Top"，定义在DockPanel.Dock="Left"的前面，如果想得到第二张图的现实，可以调整控件的声明顺序

 

    <TextBlock DockPanel.Dock="Left"

                background="http://www.blog.com.cn/Lavender">Some More Text</TextBlock>

    <TextBlock Background="LightBlue"

                DockPanel.Dock="Top">Some Text</TextBlock>

    <TextBlock DockPanel.Dock="Bottom"

                background="http://www.blog.com.cn/LightYellow">Some text at the bottom of the page.</TextBlock>

 

最后整个应用编译运行的结果如下图所示：

 

500){this.resized=true;this.style.width=500;}" resized="true">