一個成功的軟件，離不開人性化的UI設(shè)計，如何抓住用戶第一視覺，讓用戶產(chǎn)生依賴感，合適優(yōu)雅的布局必不可少。本文以一些簡單的小例子，簡述WPF中布局 面板 控件的使用，僅供學習分享使用，如有不足之處，還請指正。

涉及知識點

在WPF中，關(guān)于布局面板控件，主要有以下幾種：

1. StackPanel：棧面板，可以將元素排列成一行或者一列。其特點是：每個元素各占一行或者一列。

2. WrapPanel：環(huán)繞面板，將各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調(diào)整進行換行，后續(xù)排序按照從上至下或從左至右的順序進行。

3. DockPanel：停靠面板，定義一個區(qū)域，在此區(qū)域中，您可以使子元素通過描點的形式排列，這些對象位于 Children 屬性中。

4. Grid：網(wǎng)格面板， Grid顧名思義就是“網(wǎng)格”，以表格形式布局元素，對于整個面板上的元素進行布局，它的子控件被放在一個一個事先定義好的小格子里面，整齊配列。Grid和其他各個Panel比較起來，功能最多也最為復雜。

5. Canvas：畫布面板，畫布，用于完全控制每個元素的精確位置。他是布局控件中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。

StackPanel【棧面板】

棧面板,可以將元素排列成一行或者一列，其特點是：每個元素各占一行或者一列。

Orientation屬性指定排列方式：

1. Vertical(垂直)【默認】，垂直排列時，每個元素都與面板一樣寬。

2. Horizontal(水平)，水平排列時，每個元素都與面板一樣高；

如果包含的元素超過了面板空間，它只會截斷多出的內(nèi)容。元素的Margin屬性用于使元素之間產(chǎn)生一定得間隔，當元素空間大于其內(nèi)容的空間時，剩余空間將由HorizontalAlignment和 VerticalAlignment屬性來決定如何分配。

Vertical(垂直)，默認情況下，每一個元素都與面板一樣寬，如下所示：

?示例代碼，如下所示：

<Window x:Class="WpfApp1.SecondWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="StackPanel示例" Height="450" Width="500">


    <StackPanel Margin="5,5,5,5">
        <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5"></Button>
    </StackPanel>
</Window>

Horizontal(水平)，水平排列時，每個元素都與面板一樣高。如下所示：

示例代碼，與垂直排列相同，只是多了一個Oriention屬性，如下所示：

<StackPanel Margin="5,5,5,5" Orientation="Horizontal">
    <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5"></Button>
    <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5"></Button>
</StackPanel>

StackPanel其他常用屬性：

1. HorizontalAlignment：水平對齊方式，值：Left，Center，Right，Stretch。

2. VerticalAlignment：垂直對齊方式，值：Bottom ， Center，Stretch，Top。

3. Visibility：設(shè)置StackPanel是否可見，值：Visible，Hidden，Collapsed。

4. Background：設(shè)置背景顏色，值為Bursh類型的枚舉值。

5. Width，Height，MinWidth，MinHeight，MaxWidth，MaxHeight：分別用來設(shè)置StackPanel的寬，高，最小寬，最小高，最大寬，最大高。

WrapPanel【環(huán)繞面板】

WrapPanel布局面板將各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調(diào)整進行換行，后續(xù)排序按照從上至下或從左至右的順序進行。

水平排列：當Orientation屬性的值設(shè)置為 Horizontal：元素是從左向右排列的，然后自上至下自動換行。如下所示：

?示例源碼所示：

<Window x:Class="WpfApp1.ThirdWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="WrapPanel示例" Height="450" Width="400">
    <WrapPanel Margin="5,5,5,5">
        <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5"></Button>
        <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5"></Button>

    </WrapPanel>
</Window>

垂直排列：默認為水平排列，通過設(shè)置WrapPanel的Orientation屬性為Vertical，可以修改排列方向，垂直排列，如下所示：

?示例源碼如下所示：

<WrapPanel Margin="5,5,5,5" Orientation="Vertical">
    <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40"></Button>

</WrapPanel>

WrapPanel其他常用屬性，除了StackPanel屬性常用屬性，還有兩個，如下所示：

1. ItemHeight：所有的元素都相同高度。

2. ItemWidth：所有的元素都相同寬度。

其他子元素設(shè)置的屬性，如果大于ItemHeight，ItemWidth的值，則被截取。如下所示：

?源碼如下所示：

<WrapPanel Margin="5,5,5,5" Orientation="Vertical" ItemHeight="30" ItemWidth="100">
    <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40"></Button>
    <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40"></Button>

</WrapPanel>

DockPanel【?？棵姘濉?/h2>

DockPanel定義一個區(qū)域，在此區(qū)域中，您可以使子元素通過描點的形式排列，這些對象位于 Children 屬性中。停靠面板類似于WinForm中控件的Dock屬性。DockPanel會對每個子元素進行排序，并將根據(jù)指定的邊進行?？?，多個?？吭谕瑐?cè)的元素則按順序排序。在DockPanel中，指定停靠邊的控件，會根據(jù)定義的順序占領(lǐng)邊角，所有控件絕不會交疊。

默認情況下，所有子元素都是靠左?？俊綝ockPanel.Dock=Left】

可以單獨設(shè)置每一個子元素的Dock屬性，如下所示：

示例源碼如下所示：

<Window x:Class="WpfApp1.FourWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="DockPanel示例" Height="450" Width="600">
    <DockPanel LastChildFill="True" >
        <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom"></Button>
        <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left"></Button>
        <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top"></Button>
        <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right"></Button>
        <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom"></Button>
        <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5"></Button>
    </DockPanel>
</Window>

注意：在DockPanel中，元素的先后順序很重要，關(guān)系著元素是否“頂邊”。

?DockPanel其他常用屬性，除了StackPanel屬性常用屬性，還有一個，如下所示：

1. LastChildFill：最后一個子元素，是否填充剩余空間，默認為True。

Grid【網(wǎng)格面板】

Grid顧名思義就是“網(wǎng)格”，以表格形式布局元素，對于整個面板上的元素進行布局，它的子控件被放在一個一個事先定義好的小格子里面，整齊配列。Grid和其他各個Panel比較起來，功能最多也最為復雜。

要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數(shù)量的RowDefinitions和 ColumnDefinitions元素，從而定義行數(shù)和列數(shù)。

而放置在Grid面板中的控件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列，這兩個屬性的值都是從0開始的索引數(shù)，如果沒有顯式設(shè)置任何行或列，Grid將會隱式地將控件加入在第0行第0列。

由于Grid的組成并非簡單的添加屬性標記來區(qū)分行列，這也使得用戶在實際應用中可以具體到某一單?元格中，所以布局起來就很精細了。?

Grid的單元格可以是空的，一個單元格中可以有多個元素，而在單元格中元素是根據(jù)它們的Z順序一個接著一個呈現(xiàn)的。

Grid面板將元素分割到不可見的行列網(wǎng)格中。盡管可以在一個單元格中放置多個元素（這時這些元素會相互重疊），但在每個單元格中只放置一個元素通常更合理。當然，在Grid單元格中的元素本身也可能是另一個容器，該容器組織它所包含的一組控件。

默認情況下，如果不設(shè)置Grid面板的行列寬，與高，則默認均分，且如果不顯示設(shè)置子元素的大小，則默認填充，如下所示：

?

?示例代碼，如下所示：

<Window x:Class="WpfApp1.FiveWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="GridPanel示例" Height="450" Width="700">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0"></Button>
        <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1"></Button>
        <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2"></Button>
        <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0"></Button>
        <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1"></Button>
        <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2"></Button>
    </Grid>

</Window>

Grid行高與列寬設(shè)置

列寬和行高，分別可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

設(shè)置寬與高的幾種方式：

1. 固定值：設(shè)置具體的數(shù)字，單位為像素px。

2. Auto：根據(jù)子元素的大小，自動分配大小，剛好能夠容納子元素的內(nèi)容。

3. 星號*：根據(jù)比例自動分配剩余空間。

行高列寬設(shè)置示例

示例源碼如下所示：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"></RowDefinition>
        <RowDefinition Height="2*"></RowDefinition>
        <RowDefinition Height="3*"></RowDefinition>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
     </Grid.ColumnDefinitions>
    <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0"></Button>
    <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1"></Button>
    <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2"></Button>
    <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0"></Button>
    <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1"></Button>
    <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2"></Button>
    <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0"></Button>
    <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1"></Button>
    <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2"></Button>
</Grid>

Grid面板其他屬性，除了StackPanel屬性常用屬性，還有兩個，如下所示：

1. Grid.ColumnSpan：用于設(shè)置元素跨越的單元格列數(shù)。

2. Grid.RowSpan：用于設(shè)置元素跨越的單元格行數(shù)。

Canvas【畫布面板】

畫布，用于完全控制每個元素的精確位置。他是布局控件中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。

使用Canvas，必須指定一個子元素的位置（相對于畫布），否則所有元素都將出現(xiàn)在畫布的左上角。如果Canvas是窗口主元素（即最外層的布局面板是Canvas），用戶改變窗口大小時，Canvas也會隨之變化，子元素的位置也會隨之移動，以保證相對于Canvas的位置屬性不變。

Canvas通過設(shè)置Left，Top，Bottom，Right等屬性的值，來設(shè)置子元素的位置。如下所示：

示例源碼，如下所示：

<Window x:Class="WpfApp1.SixWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="Canvas面板示例" Height="500" Width="500">
    <Canvas>
        <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Canvas.Left="0" Canvas.Top="0"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Canvas.Left="50" Canvas.Top="50"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Canvas.Left="100" Canvas.Top="100"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Canvas.Left="150" Canvas.Top="150"></Button>
        <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Canvas.Left="200" Canvas.Top="200"></Button>
        <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Canvas.Left="250" Canvas.Top="250"></Button>
        <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Canvas.Left="300" Canvas.Top="300"></Button>
        <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Canvas.Left="350" Canvas.Top="350"></Button>
        <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Canvas.Left="400" Canvas.Top="400"></Button>
    </Canvas>
</Window>

注意：要說明一點Canvas內(nèi)的子控件不能使用兩個以上的Canvas附加屬性，如果同時設(shè)置Canvas.Left和Canvas.Right屬性，那么后者將會被忽略。

Canvas的其他屬性，除了StackPanel的常用屬性外，還有兩個屬性，如下所示：

1. ClipToBounds：超出邊界部分，是否需要進行剪裁。

2. Panel.ZIndex：用于設(shè)置子元素在Z方向上的順序，值越大，越靠上。如果兩個元素重疊，則ZIndex值小的將會被覆蓋。

以上就是【淺談WPF之UI布局】的全部內(nèi)容，關(guān)于更多詳細內(nèi)容，可參考官方文檔。希望能夠一起學習，共同進步。文章來源地址http://www.zghlxwxcb.cn/news/detail-824910.html

到了這里，關(guān)于淺談WPF之UI布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！