WPF入門基礎 ——（佈局）

阿新 • • 發佈：2020-10-11

WPF中的常用佈局

——墨問蒼生

2020-10-11

一、佈局的基本原則

　　·一個視窗只能包含一個元素

　　如果需要支援多個元素，可以使用巢狀佈局。　

　　·不應使用座標設定元素位置

　　儘量不用手動拖拽控制元件的新式建立介面。

　　·多數情況不應定義元素尺寸

　　我們儘量通過設定元素位置來使得元素大小支援動態縮放

二、常用佈局的使用

　　1、佈局常用屬性

屬性名稱	屬性描述
HorizontalAlignment	用於設定子元素在容器中的水平位置。引數：Center、Left、Right、Stretch
VerticalAlignment	用於設定子元素在容器中的垂直位置。引數：Center、Top、Bottom、Stretch
Margin	用於設定子元素在容器中的邊距。引數：4個方向的邊距(左、上、右、下) 使用：可以同時設定4個邊距，也可以單獨設定每條邊的邊距
Height/Width MinHeight/MinWidth MaxHeight/MaxWidth	設定元素的基本尺寸，從上到下依次為：固定尺寸、最小尺寸、最大尺寸

　　2、佈局的使用

（1）Canvas佈局

屬性名稱	屬性描述
Canvas.Right	設定元素距離容器右邊界的距離
Canvas.Left	設定元素距離容器左邊界的距離
Canvas.Top	設定元素距離容器上邊界的距離
Canvas.Bottom	設定元素距離容器下邊界的距離
注意：如果同時設定Canvas.Left="50" Canvas.Right="50",則以Canvas.Left="50"為準。如果同時設定Canvas.Top="50" Canvas.Bottom=50 則以Canvas.Top ="50為準"。

Canvas是一個類似於座標系的面板，所有的元素通過設定座標來決定其在座標系中的位置。

<!--MainWindow.xaml-->

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas>
            <Button Content="按鈕" Height="20" Width="40" Canvas.Left="50" Canvas.Top="50"/>
            <Button Content="按鈕" Height="20" Width="40" Canvas.Right="50" Canvas.Top="50"/>
            <Button Content="按鈕" Height="20" Width="40" Canvas.Left="50" Canvas.Bottom="50"/>
            <Button Content="按鈕" Height="20" Width="40" Canvas.Right="50" Canvas.Bottom="50"/>
        </Canvas>
    </Grid>
</Window>

程式效果：

Canvas 的 Z 軸

當多個元素堆疊的時候，在同一個座標點，如果想讓某個控制元件顯示在最頂端，Canvas 提供了一個 Canvas.Zindex 屬性可以指定Z軸順序。

（2）StackPanel佈局

StackPanel 將控制元件按照行或列來順序排列，但不會換行。通過設定面板的Orientation屬性設定了兩種排列方式：橫排(Horizontal)和豎排(Vertical)，預設為豎排。

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <Button VerticalAlignment="Bottom" Content="按鈕1" Height="20" Width="40"/>
            <Button VerticalAlignment="Top" Content="按鈕2" Height="20" Width="40"/>
            <Button Content="按鈕3" Height="20" Width="40"/>
            <Button Content="按鈕4" Height="20" Width="40"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button Content="按鈕1" Height="20" Width="40"/>
            <Button Content="按鈕2" Height="20" Width="40"/>
            <Button Content="按鈕3" Height="20" Width="40"/>
            <Button Content="按鈕4" Height="20" Width="40"/>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Button Content="按鈕1" Height="20" Width="40"/>
            <Button Content="按鈕2" Height="20" Width="40"/>
            <Button Content="按鈕3" Height="20" Width="40"/>
            <Button Content="按鈕4" Height="20" Width="40"/>
            <Image x:Name="image" Height="100"/>
        </StackPanel>
        
    </Grid>
</Window>

程式效果：

注意：Orientation="Horizontal"時，設定FlowDirection屬性為RightToLeft，則元素將從右向左排列。

（3）DockPanel佈局

DockPanel支援讓元素簡單地停靠在某個面板的某一條邊上，然後拉伸元素以填滿全部寬度或高度。它也支援讓一個元素填充其他已停靠元素沒有佔用的剩餘空間

使用四個屬性值來控制他們的停靠：Top（上）、Bottom（下）、Left（左）、Right（右）。在DockPanel中寫在最後的元素將填滿剩餘空間，除非DockPanel的LastChildFill屬性為false。

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel>
            <Button Content="上" DockPanel.Dock="Top"></Button>
            <Button Content="下" DockPanel.Dock="Bottom"></Button>
            <Button Content="左" DockPanel.Dock="Left"></Button>
            <Button Content="右" DockPanel.Dock="Right"></Button>
        </DockPanel>
    </Grid>
</Window>

程式效果：

DockPanel的LastChildFill屬性為false的情況：

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel LastChildFill="False">
            <Button Content="上" DockPanel.Dock="Top"></Button>
            <Button Content="下" DockPanel.Dock="Bottom"></Button>
            <Button Content="左" DockPanel.Dock="Left"></Button>
            <Button Content="右" DockPanel.Dock="Right"></Button>
        </DockPanel>
    </Grid>
</Window>

程式效果：

（4）WrapPanel佈局

WrapPanel佈局面板將各個空間從左至右按照行或列的順序羅列，當長度和高度不夠時就會自動換行，後續排序按照從上到下，從左至右的順序進行。

Orientation屬性決定元素排列方向其值為Vertical或Horizontal

Vertical:

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Vertical">
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
        </WrapPanel>
    </Grid>
</Window>

程式效果：

Horizontal：

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Horizontal">
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
        </WrapPanel>
    </Grid>
</Window>

程式效果：

（5）Grid（網格佈局）

Grid是最常用的動態佈局控制元件，也是所有動態佈局控制元件中唯一可按比例動態調整分配空間的控制元件。預設情況下，在WPF設計器中開啟的每個新Window中都包含有一個Grid控制元件。

該控制元件很像網頁中的表格，需要定義行、列，劃分單元格座標從（0，0）開始。常用屬性如下

屬性名稱	屬性描述
Height	指定Grid的高度，有兩種寫法 ①Height = "60"：　　　　不加星號表示固定高度。 ②Height = "60*"：　　　　加星號表示加權高度，在調整窗體大小時會按比例縮放。
Width	指定Grid的寬度，寫法與Height屬性一致。 ①Width= "60"：　　　　不加星號表示固定高度。 ②Width= "60*"：　　　　加星號表示加權高度，在調整窗體大小時會按比例縮放。
ColumnSpan	使子元素跨多列。例如：Grid.ColumnSpan="2" 表示跨兩行
RowSpan	使子元素跨多行。例如：Grid.RowSpan="2"

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!--劃分為四行-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--劃分為兩列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
            </ColumnDefinition>
            <ColumnDefinition>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

程式效果：

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!--劃分為四行-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--劃分為兩列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
            </ColumnDefinition>
            <ColumnDefinition>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="1" Grid.Row="2" Content="Button1"></Button>
        <Button Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="Button2"></Button>
        <Button Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Content="Button1"></Button>
    </Grid>
</Window>