DotNetBar for WinForms是一個擁有89個組件的用戶界面控件套包，用戶可以使用Visual Studio 2005-2015輕松地創(chuàng)建專業(yè)的用戶界面。十多年來DotNetBar幫助開發(fā)人員輕松地創(chuàng)建易用的專業(yè)Windows Forms (WinForms) 用戶界面。

點擊下載DotNetBar for WinForms最新試用版

接上文:

LayoutControl相關概述（一）

LayoutControl詳解（二）

布局規(guī)則

LayoutControl使用的第一個布局規(guī)則是，在將控件的固定大小的寬度相加后，控件的相對百分比大小基于可用寬度。要了解這一點，請考慮以下屏幕截圖，其中承載文本框控件的布局項目的寬度設置為100％，棕色面板的固定寬度設置為100：

如果你添加更多的固定寬度控件，文本框會縮小，除非設置其最小尺寸。

如果你想讓布局項占用容器的所有可用寬度，你將其寬度設置為101%。下面是我們在布局項上設置寬度=101%的文本框時的情況。

因此內置的布局規(guī)則是，當布局項的寬度設置為101％時，它將消耗容器的整個寬度。

容器中的第一個和最后一個布局項目具有特殊的布局規(guī)則。如果將第一個或最后一個項目的高度設置為100％，則它們將與左側（第一個項目）或向右（最后一個項目）對齊，這將消耗容器的高度以及在它們之間流動的其他控件。

為了實現(xiàn)這一點，下面是截屏，其中第一個布局項目面板的height = 100％，注意在面板之后添加的文本框如何放置在其旁邊：

現(xiàn)在我們將另一個綠色面板作為最后一項添加到布局中，并設置其Height = 100％，注意其如何?？吭谟覀纫约叭绾卧趦蓚€面板之間布置文本框：

當在同一行上使用相對寬度尺寸和固定寬度尺寸的項目時，另一個布局規(guī)則生效。例如，將固定大小的項目后跟相對大小的項目，并將“寬度”設置為100％，將導致在下一行顯示下一個項目。如果不希望這樣，并且您需要將相對寬度尺寸的項目夾在固定尺寸的項目之間，則可以設置相對寬度= 99％，這將向布局引擎指示如果可能的話，下一個項目應位于同一行上。這是顯示此操作的圖像，其中使用Spacer一直向右按下按鈕：

布局組

Layout Groups幾乎就像嵌套的布局控件。LayoutGroup項目類型允許您將某些控件分組，并創(chuàng)建靈活的布局，否則無法實現(xiàn)。此外，您可以通過 LayoutGroup.Style 屬性使用 LayoutGroup 樣式來設置組的背景和邊框顏色，甚至可以通過 LayoutGroup.Appearance 屬性改變組的外觀，使其呈現(xiàn)為我們的 PanelEx 或 GroupPanel 控件。下面是一個不使用LayoutGroup項就無法創(chuàng)建布局的例子。

注意，兩個Width = 50％的組并排顯示，左邊的組包含3個文本框，右邊的組包含text-box和RichTextBox控件。注意右側的組如何通過LayoutGroup.Style屬性自定義背景和邊框。

每個LayoutGroup也可以顯示標題/標題。設置LayoutGroup.Text將導致LayoutGroup顯示標題。TextPosition屬性控制在組內容的頂部，底部，底部或底部顯示標題的位置。當字幕顯示在左側或右側時，它將旋轉90度。TextAlignment屬性將控制字幕框中的字幕對齊方式。TextLineAlignment屬性將控制標題框中的垂直文本對齊方式。CaptionStyle屬性允許您設置特定于字幕的樣式，包括背景色，邊框顏色和類型，字體等。默認情況下，字幕高度是根據(jù)當前字體高度自動確定的，但是使用CaptionHeight屬性，您可以設置以像素為單位的顯式字幕高度。這是使用上述所有屬性來顯示LayoutGroup自定義標題的圖像：

使用Appearance屬性，您可以指定應使用我們預定義的系統(tǒng)外觀之一繪制LayoutGroup。您可以將其設置為Panel或GroupPanel。Panel將使用StyleManager上設置的當前樣式，使LayoutGroup像PanelEx控件一樣呈現(xiàn)?？雌饋硐襁@樣：

設置Appearance = GroupPanel將呈現(xiàn)相同的組，如下所示：

請注意，當您設置Appearance = Panel或GroupPanel時，系統(tǒng)組外觀將覆蓋CaptionStyle和Style的任何設置（并且不使用和不可見）。

使用圖像或符號屬性，您可以設置將在字幕旁邊顯示的圖像或符號。請注意，設置符號會覆蓋圖像。

通過代碼設置

LayoutControl可以通過代碼輕松設置。它涉及創(chuàng)建LayoutControlItem來承載一個控件，然后將控件分配給它，最后將它們都添加到LayoutControl中。這是簡單的代碼，它創(chuàng)建兩個位于同一行的文本框，并在其下方的第三個文本框占用容器寬度的100％：

C#:

LayoutControlItem item = new LayoutControlItem();
TextBox tb = new TextBox();
// Connect layout item and control
item.Control = tb;
// This performs default setup as you see in designer
// It sets default width/height and Text
layoutControl2.SetupControlItem(item);
// Set item label
item.Text = "Text 1:";
item.Width = 50;
item.WidthType = eLayoutSizeType.Percent;
item.Height = 28;
// Control and item are added separately
// Add control
layoutControl2.Controls.Add(tb);
// Then add layout item
layoutControl2.RootGroup.Items.Add(item);
 
// Create second text-box
tb = new TextBox();
item = new LayoutControlItem();
// Connect layout item and control
item.Control = tb;
layoutControl2.SetupControlItem(item);
item.Text = "Text 2:";
item.Width = 50;
item.WidthType = eLayoutSizeType.Percent;
item.Height = 28;
layoutControl2.Controls.Add(tb);
layoutControl2.RootGroup.Items.Add(item);
 
// Create third text-box which consumes all container width
tb = new TextBox();
item = new LayoutControlItem();
// Connect layout item and control
item.Control = tb;
layoutControl2.SetupControlItem(item);
item.Text = "Text 3:";
item.Width = 101; // 101% indicates consume all container width
item.WidthType = eLayoutSizeType.Percent;
layoutControl2.Controls.Add(tb);
layoutControl2.RootGroup.Items.Add(item);
 
// Create spacer which will push button we will create to bottom of container
LayoutSpacerItem spacer = new LayoutSpacerItem();
spacer.Width = 100;
spacer.WidthType = eLayoutSizeType.Percent;
spacer.Height = 100;
spacer.HeightType = eLayoutSizeType.Percent;
spacer.MinSize = new Size(24, 24); // This ensures that spacer is at least 32 pixels in size
layoutControl2.RootGroup.Items.Add(spacer);
 
// Create the button which will be at the
// bottom of the control due to spacer pushing it down
Button button = new Button();
button.Text = "OK";
item = new LayoutControlItem();
// Connects button to layout item
item.Control = button;
layoutControl2.SetupControlItem(item);
item.ControlSize = new Size(72, 28); // This will specify explicit control size
// Button item will stretch over width of the container
item.Width = 101;
item.WidthType = eLayoutSizeType.Percent;
item.Height = 32;
// This will position button in right-bottom corner of item bounds
button.Anchor = AnchorStyles.Right | AnchorStyles.Bottom;
layoutControl2.Controls.Add(button);
layoutControl2.RootGroup.Items.Add(item);

VB:

Dim item As New LayoutControlItem()
Dim tb As New TextBox()
' Connect layout item and control
item.Control = tb
' This performs default setup as you see in designer
' It sets default width/height and Text
layoutControl2.SetupControlItem(item)
' Set item label
item.Text = "Text 1:"
item.Width = 50
item.WidthType = eLayoutSizeType.Percent
item.Height = 28
' Control and item are added separately
' Add control
layoutControl2.Controls.Add(tb)
' Then add layout item
layoutControl2.RootGroup.Items.Add(item)
 
' Create second text-box
tb = New TextBox()
item = New LayoutControlItem()
' Connect layout item and control
item.Control = tb
layoutControl2.SetupControlItem(item)
item.Text = "Text 2:"
item.Width = 50
item.WidthType = eLayoutSizeType.Percent
item.Height = 28
layoutControl2.Controls.Add(tb)
layoutControl2.RootGroup.Items.Add(item)
 
' Create third text-box which consumes all container width
tb = New TextBox()
item = New LayoutControlItem()
' Connect layout item and control
item.Control = tb
layoutControl2.SetupControlItem(item)
item.Text = "Text 3:"
item.Width = 101
' 101% indicates consume all container width
item.WidthType = eLayoutSizeType.Percent
layoutControl2.Controls.Add(tb)
layoutControl2.RootGroup.Items.Add(item)
 
' Create spacer which will push button we will create to bottom of container
Dim spacer As New LayoutSpacerItem()
spacer.Width = 100
spacer.WidthType = eLayoutSizeType.Percent
spacer.Height = 100
spacer.HeightType = eLayoutSizeType.Percent
spacer.MinSize = New Size(24, 24)
' This ensures that spacer is at least 32 pixels in size
layoutControl2.RootGroup.Items.Add(spacer)
 
' Create the button which will be at the
' bottom of the control due to spacer pushing it down
Dim button As New Button()
button.Text = "OK"
item = New LayoutControlItem()
' Connects button to layout item
item.Control = button
layoutControl2.SetupControlItem(item)
item.ControlSize = New Size(72, 28)
' This will specify explicit control size
' Button item will stretch over width of the container
item.Width = 101
item.WidthType = eLayoutSizeType.Percent
item.Height = 32
' This will position button in right-bottom corner of item bounds
button.Anchor = AnchorStyles.Right Or AnchorStyles.Bottom
layoutControl2.Controls.Add(button)
layoutControl2.RootGroup.Items.Add(item)

本次的內容就是這些，下午我們將講解相關布局。如果你對我們的產品感興趣歡迎咨詢獲取產品授權。