學習WPF——WPF佈局——初識佈局容器

時間 2019-11-19

標籤學習 wpf 佈局容器简体版

原文原文鏈接

StackPanel堆疊佈局佈局

StackPanel是簡單佈局方式之一，能夠很方便的進行縱向佈局和橫向佈局 StackPanel默認是縱向佈局的spa

<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屬性設置成Horizontal便可code

這個屬性的默認值是Verticalxml

<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屬性的默認值是Horizontal
也就是說WrapPanel的默認展示方向是橫向的
WrapPanel與StackPanel另外一個不一樣的地方是，當容器實際寬度不夠的狀況下，內容將以多行或者多列的形式展示blog

<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的縱向展示方式繼承

<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停靠佈局
這種佈局把佈局容器分爲上、下、左、右四個邊緣，容器內的元素沿着某一個邊緣來拉伸本身it

<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>
<!--默認沿着左邊緣拉伸-->
<Button Content="allen5"></Button>
<!--默認沿着左邊緣拉伸-->
<Button Content="allen6"></Button>
<!--最後一個元素默認填充滿整個容器剩餘的空間-->
<Button Content="默認最後一個自適應"></Button>
</DockPanel>
</Window>

Grid表格佈局
Grid佈局容器能夠把空間分割成多行多列，用以擺放不一樣的控件io

<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的默認值爲0-->
<Button Content="默認在第一行第一列且填充"></Button>
<!--若是我把Grid.Row的值設置成2，由於沒有第三行，因此按鈕會自動被放在最後一行，仍然是第二行-->
<Button Grid.Row="1" Grid.Column="1" Content="第二行第二列"></Button>
</Grid>
</Window>

Canvas畫布佈局
Canvas畫布佈局容器容許使用精確的座標來擺放畫布內的元素
若是兩個元素共用了同一塊區域，那麼後設置的元素將覆蓋先設置的元素class

<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="第一個按鈕"></Button>
<Button Canvas.Left="136" Canvas.Top="112" Content="第二個按鈕"></Button>
</Canvas>
</Window>

Window窗口
窗口是容納全部WPF界面元素的最初容器，任何的界面元素都要放在Window窗口內才能呈現
WPF窗口只能包含一個兒子控件，這是由於Window類繼承自ContentControl類。容器

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

ContentControl就是咱們常說的內容控件，這種控件與容器控件（Grid或StackPanel）不一樣，
內容控件的頂級子元素只能有一個，容器控件能夠包含多個頂級子元素
若是咱們想要在一個ContentControl內展現多個子控件，
咱們能夠先放置一個容器控件做爲內容控件的頂級子元素，而後再在此容器控件中放置更多的控件

<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>