WPF8 UI布局

WPF中的布局元素有如下幾個：

1、Grid：網格。可以自定義行和列並通過行列的數量、行高和列寬來調整控件的布局。近似於HTML中的Table。

2、StackPanel：棧式面板。將包含的元素在豎直或水平方向上排成一條直線，當移除一個元素后，后面的元素會自動向前移動以填充空缺。

3、Canvas：畫布。內部元素可以使用以像素為單位的絕對坐標進行定位，類似於WindowsForm的布局方式。

4、DockPanel：泊靠式面板。內部元素可以選擇泊靠方向，類似於在WindowsForm編程中設置控件的Dock屬性。

5、WrapPanel：自動拆行面板。內部元素在排滿一行后能夠自動拆行，類似於HTML中的流式布局。

一、Grid

Grid元素會以網格形式對內容元素進行布局。

Grid特點為：

1、可以定義任意數量的行和列，非常靈活

2、行的高度和列的寬度可以使用絕對數值、相對比例或自動調整的方式進行精確設定，並可以設置最大最小值。

3、內部元素可以設置自己的所在行和列，還可以設置自己縱向跨幾行、橫向跨幾列。

Grid布局適合於：

1、UI布局的大框架設計

2、大量UI元素需要成行或者成列對齊的情況

3、UI整體尺寸改變時，元素需要保持固有的高度和寬度比例

4、UI后期可能有較大變更或擴展。

定義Grid的行和列

Grid類具有ColumnDefinitions和RowDefinitions兩個屬性，分別用於定義Grid有多少列、多少行。實際工作中，還可以進一步定制每行每列的高和寬，可以設置3類值：

1、絕對值，為double數值加上單位后綴，例如30px，0.5cm

2、比例值，為double數值后加上一個*

3、自動值，字符串Auto

絕對值一旦設定就不會改變，所以又稱固定值，適用於控件狂傲都不需要改變的情況。比例值是百分比，2*表示占據剩余未分配數值的20%，例如一個150px高度的Grid，有5行，其中2行使用25px的絕對值，剩下三行分別是2*，1*，2*，則實際所占元素分別為（150-50）/5再乘以系數，為40px，20px，40px。

如果使用自動值Auto為行高或列寬，那么行高或列寬的實際值將有行列內控件的高度和寬度決定，即控件會把行列撐到合適的寬度和高度，如果行列中沒有控件，則行高和列寬均為0.

行和列都是從0開始計數；

指定一個控件在某行，就為這個控件的標簽添加Grid.Row=“行編號”這樣一個Attribute，若行編號為0（即控件位於首行）則可以省略這個Attribute，列同理。

若控件要跨多個行和列，則使用Grid.RowSpan="行數"和Grid.ColumnSpan=“列數”兩個Attribute。

<Window x:Class="WPF_XAML_4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="240" Width="400"
        MinHeight="200" MinWidth="340" MaxHeight="400" MaxWidth="600">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Select Department and Comment:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/>
        <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/>
        <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
        <Button Content="Submit" Grid.Column="2" Grid.Row="4"/>
        <Button Content="Delete" Grid.Column="4" Grid.Row="4"/>
    </Grid>
</Window>

 

二、StackPanel

StackPanel可以把內部元素在縱向或橫向上緊湊排列。形成棧式布局，當移除前面的元素，后面的元素會整體向前移動、補占原有元素的控件。

StackPanel適合於：

1、同類元素需要緊湊排列（菜單或列表）

2、移除其中的元素后能夠自動補缺的布局或動畫

StackPanel使用3個屬性來控制內部元素的布局，orientation，horizontalAlignment、verticalAlignment，后兩者絕對內部元素水平和垂直方向上的對齊方式，orientation則決定內部元素是橫向累積還是縱向累積，可以取Horizontal或Vertical兩個可取值。

三、Canvas

Canvas即畫布，Canvas類似於Winform的布局，控件被放於Canvas時，就會被附加上CanvasX和CanvasY屬性，Canvas適合於一些設計基本上不會有改動的小型布局，例如logo和藝術性較強的布局，依賴於橫縱坐標的動畫，需要大量使用橫縱坐標進行絕對點定位的布局。

四、DockPanel

DockPanel內的元素會被附加上DockPanel.Dock這個屬性，這個屬性的數據類型為Dock枚舉，Dock枚舉可以取Left、Top、Right和Bottom四個值。根據Dock屬性值，DockPanel內的元素會向指定方向累積。

        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"></TextBox>
            <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"></TextBox>
            <TextBox BorderBrush="Black"/>
        </DockPanel>

 五、WrapPanel

WrapPanel內部采用的是流式布局。WrapPanel使用Orientation屬性來控制流延伸的方向，使用HorizontalAligment和VerticalAlignment兩個屬性控制內部控件的對齊，在流延伸的方向上，WrapPanel會排列盡可能多的控件，排不下的控件將會新起一行或一列繼續排列。