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

點(diǎn)擊下載DotNetBar for WinForms最新試用版

接上文:

LayoutControl相關(guān)概述（一）

LayoutControl詳解（二）

布局規(guī)則

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

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

如果你想讓布局項(xiàng)占用容器的所有可用寬度，你將其寬度設(shè)置為101%。下面是我們?cè)诓季猪?xiàng)上設(shè)置寬度=101%的文本框時(shí)的情況。

因此內(nèi)置的布局規(guī)則是，當(dāng)布局項(xiàng)的寬度設(shè)置為101％時(shí)，它將消耗容器的整個(gè)寬度。

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

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

現(xiàn)在我們將另一個(gè)綠色面板作為最后一項(xiàng)添加到布局中，并設(shè)置其Height = 100％，注意其如何停靠在右側(cè)以及如何在兩個(gè)面板之間布置文本框：

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

布局組

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

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

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

使用Appearance屬性，您可以指定應(yīng)使用我們預(yù)定義的系統(tǒng)外觀之一繪制LayoutGroup。您可以將其設(shè)置為Panel或GroupPanel。Panel將使用StyleManager上設(shè)置的當(dāng)前樣式，使LayoutGroup像PanelEx控件一樣呈現(xiàn)。看起來(lái)像這樣：

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

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

使用圖像或符號(hào)屬性，您可以設(shè)置將在字幕旁邊顯示的圖像或符號(hào)。請(qǐng)注意，設(shè)置符號(hào)會(huì)覆蓋圖像。

通過(guò)代碼設(shè)置

LayoutControl可以通過(guò)代碼輕松設(shè)置。它涉及創(chuàng)建LayoutControlItem來(lái)承載一個(gè)控件，然后將控件分配給它，最后將它們都添加到LayoutControl中。這是簡(jiǎn)單的代碼，它創(chuàng)建兩個(gè)位于同一行的文本框，并在其下方的第三個(gè)文本框占用容器寬度的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)

本次的內(nèi)容就是這些，下午我們將講解相關(guān)布局。如果你對(duì)我們的產(chǎn)品感興趣歡迎咨詢獲取產(chǎn)品授權(quán)。