C# DockPanel 控件

    顧名思義，DockPanel控件允許將控件貼靠到某條邊上。就算之前我們沒有特別注意過這樣的布局方式，也應(yīng)該十分熟悉此類布局。例如，Word軟件中的功能區(qū)(Ribbon)控件就停留在Word窗口頂部，Visual Stiicliu中的各種窗口也各自?？吭诓煌恢蒙?。并且，可以拖動Visual Studio中的這些窗口，改變它們的?？课恢?。

    DockPanel具有一個(gè)能讓子控件闬來指定停靠邊緣的附加屬性，即DockPancl.Dock?？蓪⒃搶傩缘闹翟O(shè)置為 Left、Top、Right 或 Bottom。

    DockPanel中控件的堆疊順序非常重要，因?yàn)槊慨?dāng)一個(gè)控件?？康侥硞€(gè)邊緣上后，其他子控件的可占用空間就會減少。例如，將一個(gè)工具欄控件?？康紻ockPane!的頂部，然后將另一個(gè)工具欄?？康紻ockPanel的左邊。這樣一來，第一個(gè)控件就會占滿DockPanel顯示E域的整個(gè)頂部，而第二個(gè)控件則只能占滿第一個(gè)控件的底部到DockPanel控件底部的左側(cè)區(qū)域。

    最后一個(gè)子控件通常將只能占滿其他子控件之外余下部分的相應(yīng)K域(可控制這一行為，所以前面這句話并 不是完全肯定的語氣)。

    在DockPanel中定位一個(gè)控件時(shí)，該控件所占用的區(qū)域可能會小于DockPanel為其保留的區(qū)域。例如，如果將一個(gè)寬度為100、高度為50、HorizontalAlingment的值為Left的Button控件停靠到DockPanel的頂部，在Button的右側(cè)就會留下一部分無法被其他?？孔涌丶加玫膮^(qū)域。并且，如果Button控件的Margin值為20, DockPanel頂部被保留的區(qū)域就有90像素高(控件的高度與上下兩邊的Margin值相加)。在使用DockPanel設(shè)置布局時(shí)，務(wù)必考慮這些因素；否則可能無法獲得預(yù)想的結(jié)果。

    下圖展示了一個(gè)DockPanel布局示例。

這一布局的代碼如下所示(可在LayoutExamplesMDockPaneLxaml下載文件中找到):

<Window x:Class="LayoutExamples.DockPanels"

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

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    xmlns:local="clr-namespace:LayoutExamples"

    mc:Ignorable="d"

    Title="DockPanels" Height="300" Width="300">

<DockPanel Background=MAliceBlue,,>

    <Border DockPanel. Dock="Top" Padding="10" Margin="5"

Background:"Aquamarine" Height="45">

        <Label>l) DockPanel.Dock="Top"</Label>

    </Border>

    <Border DockPanel.Dock="Top" Padding="10" Margin="5"

Background=,,PaleVioletRed'1 Height="45" Width="200">

      <Label>2) DockPanel.Dock="Top"</Label>

    </Border>

    <Border DockPanel.Dock= "Left" Padding="10" Margin="5" 

Background="Bisque" Width="200">

      <Label>3) DockPanel. Dock="Left"</Label>

    </Border>

    <Border DockPanel.Dock="Bottom" Padding="10" Margin="5"

Background:"Ivory" Width=”200M HorizontalAlignment=,,Right,l>

      <Label>4) DockPanel. Dock="Bottom"</Label>

    </Border>

    <Border Padding="10" Margin="5" Background="BlueViolet">

      <Label Foreground=,,WhiteM>5) Last control</Label>

    </Border>

  </DockPanel>

</Window>

    上述代碼使用前面介紹的Border控件標(biāo)記出示例布局中?？靠丶膮^(qū)域，并使用Label控件輸出一些簡單的描述性文字。要了解整個(gè)布局，必須從頭到尾閱讀這段代碼，下面分別來看看每個(gè)控件的情況：

    (1)第1個(gè)Border控件?？坑贒ockPanel控件的頂部。DockPanel中被占去的區(qū)域?yàn)轫敳康?5像素(Height加上兩個(gè)Margin)。需要注意，Padding屬性不影響這一布局，因?yàn)樵搶傩灾粫?yīng)用到Border的內(nèi)部，并不能控制嵌入的Label控件的位置。如果未指定Height或Width屬性，Border控件會占滿其所?？窟吘壍恼麄€(gè)可用區(qū)域，這就是為什么它會橫跨整個(gè)DockPanel控件的原因。

    (2)第2個(gè)Border控件同樣?？康紻ockPanel的頂部，并占用了剩下部分頂部的55像素高的區(qū)域。該Border控件還有一個(gè)Width屬性，這就使其僅占用了 DockPanel—部分的寬度。DockPanel中HorizonalAlignment屬性的默認(rèn)值為Center，所以它位于DockPanel的中間。

    (3)第3個(gè)Border控件?？康紻ockPanel的左側(cè)，占用了左側(cè)210像素的區(qū)域。

    (4)第4個(gè)Border控件?？吭贒ockPanel底部，占用的區(qū)域?yàn)?0像素加上其中的Label控件(也可以是其他控件)的高度。該高度由Margin、Padding和Border控件的內(nèi)容共同決定，并沒有明確指定。Border控件被固定到 DockPanel 的右下角，因?yàn)槠?HorizontalAlignment 值為 Right。

    (5)第5個(gè)(也就是最后一個(gè)Border控件)占滿了其他所有區(qū)域。

    運(yùn)行該示例，然后試著調(diào)整內(nèi)容的大小。注意，控件在堆疊順序中越接近頂層，就越具有占用空間的優(yōu)先權(quán)。在縮小窗口時(shí)，第5個(gè)Border控件可能會被上層的其他所有控件完全遮蓋。所以注意在使用DockPanel控件進(jìn)行布局時(shí)避免這種情況的發(fā)生，例如可為窗口設(shè)置允許的最小尺寸。