使用 XAML 创建 WPF DockPanel

• 下载示例 - 25.45 KB

引言

在本文中，我们讨论 DockPanel 元素。根据 MSDN 的定义，DockPanel “定义了一个区域，你可以在其中水平或垂直地排列子元素，相对于彼此”。换句话说，DockPanel 是一个布局面板，它提供了一种将元素停靠到面板的顶部、底部、右侧、左侧或中心的方式。要将元素停靠到面板的中心，它必须是该面板的最后一个子元素，并且 LastChildFill 属性必须设置为 true。这样可以确保面板的最后一个子元素将填充剩余的空间。所以让我们看一些代码吧：   

<Window x:Class="WpfDockPanelExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Sundeepan's DockPanel Example">
    
    <DockPanel LastChildFill="True">
        <TextBlock DockPanel.Dock="Left" 
                   VerticalAlignment="Center"
                   Background="Bisque"
                   Foreground="DarkGoldenrod"
                   FontFamily="Veranda"
                   FontSize="20">
            I am the left!</TextBlock>
        <TextBlock DockPanel.Dock="Right" 
                   VerticalAlignment="Center"
                   Background="DarkGoldenrod"
                   Foreground="Bisque"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
           I am the right!</TextBlock>
        <TextBlock DockPanel.Dock="Top" 
                   Background="OliveDrab"
                   Foreground="Cornsilk"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
            w00h00, look at me, im on top of the world!!!!</TextBlock>
        <TextBlock DockPanel.Dock="Bottom" 
                   Background="Cornsilk"
                   Foreground="OliveDrab"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
            aww shucks, I am on the bottom now..in the pits!!!!</TextBlock>
        
        <Button Height="40" Width="200" Click="Button_Click" Background="LightBlue">
            I am the fill!("Press me!")
        </Button>            

    </DockPanel>               

</Window> 

正如你所看到的，放置在 DockPanel 中的最后一个按钮出现在面板的中心，请参阅上面的屏幕截图或运行附带的解决方案。 

TextBlock 声明的顺序至关重要！ 

如果顶部和底部的 TextBlock 声明发生改变，并且在左侧和右侧 TextBlock 之前声明，这将完全改变外观。请查看下面的屏幕截图和代码： 

<DockPanel LastChildFill="True">
    <TextBlock DockPanel.Dock="Top" 
               Background="OliveDrab"
               Foreground="Cornsilk"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
        w00h00, look at me, im on top of the world!!!!</TextBlock>
    <TextBlock DockPanel.Dock="Bottom" 
               Background="Cornsilk"
               Foreground="OliveDrab"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
        aww shucks, I am on the bottom now..in the pits!!!!</TextBlock>
    <TextBlock DockPanel.Dock="Left" 
               VerticalAlignment="Center"
               Background="Bisque"
               Foreground="DarkGoldenrod"
               FontFamily="Veranda"
               FontSize="20">
        I am the left!</TextBlock>
    <TextBlock DockPanel.Dock="Right" 
               VerticalAlignment="Center"
               Background="DarkGoldenrod"
               Foreground="Bisque"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
       I am the right!</TextBlock>

最后

如上所示，DockPanel 可以以多种方式用于格式化应用程序的外观。例如，左列可用于菜单或站点地图，顶部用于选项卡，底部用于页脚，中心用于显示应用程序的核心内容。

历史

• 2010年3月17日：初始发布