StackPanel堆疊布局

StackPanel是簡(jiǎn)單布局方式之一，可以很方便的進(jìn)行縱向布局和橫向布局 StackPanel默認(rèn)是縱向布局的

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>

如果要橫向布局的話，只要把StackPanel的Orientation屬性設(shè)置成Horizontal即可

這個(gè)屬性的默認(rèn)值是Vertical

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel Orientation="Horizontal"> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>

WrapPanel包裹布局
在WrapPanel面板中的元素以一次一行或一列的方式布局控件
WrapPanel也有Orientation屬性，但與StackPanel不同的是，WrapPanel的Orientation屬性的默認(rèn)值是Horizontal
也就是說(shuō)WrapPanel的默認(rèn)展現(xiàn)方向是橫向的
WrapPanel與StackPanel另一個(gè)不同的地方是，當(dāng)容器實(shí)際寬度不夠的情況下，內(nèi)容將以多行或者多列的形式展現(xiàn)

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> </WrapPanel> </Window>

?WrapPanel的縱向展現(xiàn)方式

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel Orientation="Vertical"> <Button Content="allen1"></Button> <Button Content="allen2"></Button> <Button Content="allen3"></Button> <Button Content="allen4"></Button> <Button Content="allen5"></Button> <Button Content="allen6"></Button> <Button Content="allen7"></Button> <Button Content="allen8"></Button> <Button Content="allen9"></Button> <Button Content="allen10"></Button> </WrapPanel> </Window>

DockPanel停靠布局
這種布局把布局容器分為上、下、左、右四個(gè)邊緣，容器內(nèi)的元素沿著某一個(gè)邊緣來(lái)拉伸自己

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <DockPanel> <!--沿著上邊緣拉伸--> <Button Content="Top" DockPanel.Dock="Top"></Button> <!--沿著下邊緣拉伸--> <Button Content="Bottom" DockPanel.Dock="Bottom"></Button> <!--沿著左邊緣拉伸--> <Button Content="Left" DockPanel.Dock="Left"></Button> <!--沿著右邊緣拉伸--> <Button Content="Right" DockPanel.Dock="Right"></Button> <!--默認(rèn)沿著左邊緣拉伸--> <Button Content="allen5"></Button> <!--默認(rèn)沿著左邊緣拉伸--> <Button Content="allen6"></Button> <!--最后一個(gè)元素默認(rèn)填充滿整個(gè)容器剩余的空間--> <Button Content="默認(rèn)最后一個(gè)自適應(yīng)"></Button> </DockPanel> </Window>

Grid表格布局
Grid布局容器可以把空間分割成多行多列，用以擺放不同的控件

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Grid> <!--定義兩行--> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <!--定義三列--> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <!--Grid.Row或 Grid.Column的默認(rèn)值為0--> <Button Content="默認(rèn)在第一行第一列且填充"></Button> <!--如果我把Grid.Row的值設(shè)置成2，因?yàn)闆]有第三行，所以按鈕會(huì)自動(dòng)被放在最后一行，仍然是第二行--> <Button Grid.Row="1" Grid.Column="1" Content="第二行第二列"></Button> </Grid> </Window>

Canvas畫布布局
Canvas畫布布局容器允許使用精確的坐標(biāo)來(lái)擺放畫布內(nèi)的元素
如果兩個(gè)元素共用了同一塊區(qū)域，那么后設(shè)置的元素將覆蓋先設(shè)置的元素

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Canvas> <Button Canvas.Left="100" Canvas.Top="100" Content="第一個(gè)按鈕"></Button> <Button Canvas.Left="136" Canvas.Top="112" Content="第二個(gè)按鈕"></Button> </Canvas> </Window>

Window窗口
窗口是容納所有WPF界面元素的最初容器，任何的界面元素都要放在Window窗口內(nèi)才能呈現(xiàn)
WPF窗口只能包含一個(gè)兒子控件，這是因?yàn)閃indow類繼承自ContentControl類。

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--你不能在這里放置多個(gè)同級(jí)元素--> </Window>

ContentControl就是我們常說(shuō)的內(nèi)容控件，這種控件與容器控件（Grid或StackPanel）不同，
內(nèi)容控件的頂級(jí)子元素只能有一個(gè)，容器控件可以包含多個(gè)頂級(jí)子元素
如果我們想要在一個(gè)ContentControl內(nèi)展示多個(gè)子控件，
我們可以先放置一個(gè)容器控件作為內(nèi)容控件的頂級(jí)子元素，然后再在此容器控件中放置更多的控件

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Button" /> <Button Content="Button" /> </Grid> </Window>

總結(jié)

以上是生活随笔為你收集整理的C# WPF：初识布局容器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。