WPF中的經常使用佈局

一 寫在開頭
1.1 寫在開頭
評價一門技術的好壞得看具體的需求，沒有哪門技術是面面俱到地好。

1.2 本文內容
本文主要內容爲WPF中的經常使用佈局，大部份內容轉載至http://www.javashuo.com/article/p-zeaxwccs-ks.html，代碼片斷可能有所不一樣。

二 WPF中的經常使用佈局
由於項目須要，因此得學習WPF開發。WPF使軟件界面和邏輯相分離，手寫xaml進行程序UI的開發是件很愜意的事情。從這點來講WPF要比Qt和GTK+要好。固然了，若是其能跨平臺甚至開源那就更好了。可是，商業有商業自身的規律。
2.1 Canvas佈局
Canvas是一個相似於座標系的面板，全部的元素經過設置座標來決定其在座標系中的位置。具體表現爲使用Left、Top、Right、 Bottom附加屬性在Canvas中定位控件。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4 Title="WPF-Layout" Height="350" Width="525">
 5 <Grid>
 6 <Canvas>
 7 <Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button>
 8 <Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button>
 9 <Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button>
10 <Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button>
11 </Canvas>
12 </Grid>
13 </Window>

注意：若是同時設置 Canvas.Left="50"Canvas.Right="50"，則以Canvas.Left="50"爲準。若是同時設置Canvas.Top="50" Canvas.Bottom="50"，則以Canvas.Top ="50"爲準。（別這麼喪心病狂地同時寫Left和Right，請遵循基本的編程邏輯）

 

2.2 StackPanel佈局
StackPanel將控件按照行或列來順序排列，但不會換行。經過設置面板的Orientation屬性設置了兩種排列方式：橫排（Horizontal默認的）和豎排（Vertical），默認爲豎排（Vertical）。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4 Title="WPF-Layout" Height="350" Width="525">
 5 <Grid>
 6 <StackPanel Name="stackpanel1" Orientation="Horizontal">
 7 <Button Content="Button1"></Button>
 8 <Button Content="Button2"></Button>
 9 <Button Content="Button3"></Button>
10 </StackPanel>
11 <StackPanel Name="stackpanel2" Orientation="Vertical">
12 <Button Content="Button4"></Button>
13 <Button Content="Button5"></Button>
14 <Button Content="Button6"></Button>
15 </StackPanel>
16 <StackPanel Name="stackpanel3" Orientation="Horizontal" FlowDirection="RightToLeft">
17 <Button Content="Button7"></Button>
18 <Button Content="Button8"></Button>
19 <Button Content="Button9"></Button>
20 </StackPanel>
21 </Grid>
22 </Window>

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

 

2.3 DockPanel佈局
DockPanel支持讓元素簡單地停靠在整個面板的某一條邊上，而後拉伸元素以填滿所有寬度或高度。它也支持讓一個元素填充其餘已停靠元素沒有佔用的剩餘空間。

DockPanel有一個Dock附加屬性，所以子元素用4個值來控制她們的停靠：Left、Top、Right、Bottom。Dock沒有Fill值。做爲替代，最後的子元素將加入一個DockPanel並填滿全部剩餘的空間，除非DockPanel的LastChildFill屬性爲false，它將朝某個方向停靠。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <DockPanel>
 7             <Button Content="上" DockPanel.Dock="Left"></Button>
 8             <Button Content="下" DockPanel.Dock="Bottom"></Button>
 9             <Button Content="左" DockPanel.Dock="Left"></Button>
10             <Button Content="右" DockPanel.Dock="Right"></Button>
11         </DockPanel>
12     </Grid>
13 </Window>

設置LastChildFill屬性爲false

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <DockPanel LastChildFill="False">
 7             <Button Content="上" DockPanel.Dock="Left"></Button>
 8             <Button Content="下" DockPanel.Dock="Bottom"></Button>
 9             <Button Content="左" DockPanel.Dock="Left"></Button>
10             <Button Content="右" DockPanel.Dock="Right"></Button>
11         </DockPanel>
12     </Grid>
13 </Window>

 

2.4 WrapPanel佈局
WrapPanel佈局面板將各個控件按照必定方向羅列，當長度或高度不夠時自動調整進行換行換列。

Orientation="Horizontal"時各控件從左至右羅列，當面板長度不夠時，子控件就會自動換行，繼續按照從左至右的順序排列。

Orientation="Vertical"時各控件從上至下羅列，當面板高度不夠時，子控件就會自動換列，繼續按照從上至下的順序排列。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <WrapPanel Orientation="Horizontal">
 7             <Button Content="Button 150" Width="150"></Button>
 8             <Button Content="Button 200" Width="200"></Button>
 9             <Button Content="Button 150" Width="150"></Button>
10             <Button Content="Button 200" Width="200"></Button>
11             <Button Content="Button 150" Width="150"></Button>
12             <Button Content="Button 200" Width="200"></Button>
13             <Button Content="Button 150" Width="150"></Button>
14         </WrapPanel>
15     </Grid>
16 </Window>

 

2.5 Grid佈局
Grid容許咱們經過自定義行列來進行佈局,這相似於表格.經過定義Grid的RowDifinitions和ColumnDifinitions來實現對於表格行和列的定義，元素根據附加屬性Grid.Row和Grid.Column肯定本身的位置。

1）Grid的列寬與行高可採用固定、自動、按比列三種方式定義
第一種，固定長度——值爲一個肯定的數字
第二種，自動長度——值爲Auto，實際做用就是取實際控件所需的最小值
第三種，比例長度——*表示佔用剩餘的所有寬度；兩行都是*，將平分剩餘寬度；一個2*，一個*，則前者佔剩餘所有寬度的2/3，後者佔1/3；依此類推

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Grid.RowDefinitions>
 7             <RowDefinition Height="40"></RowDefinition>
 8             <RowDefinition Height="Auto"></RowDefinition>
 9             <RowDefinition Height="2*"></RowDefinition>
10             <RowDefinition Height="*"></RowDefinition>
11         </Grid.RowDefinitions>
12         <Button Grid.Row="0" Content="Button 1"></Button>
13         <Button Grid.Row="1" Content="Button 2"></Button>
14         <Button Grid.Row="2" Content="Button 3"></Button>
15         <Button Grid.Row="3" Content="Button 4"></Button>
16     </Grid>
17 </Window>

2） 合併行或列

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Grid.RowDefinitions>
 7             <RowDefinition Height="40"></RowDefinition>
 8             <RowDefinition Height="Auto"></RowDefinition>
 9             <RowDefinition Height="2*"></RowDefinition>
10             <RowDefinition Height="*"></RowDefinition>
11         </Grid.RowDefinitions>
12         <Button Grid.Row="0" Content="Button 1"></Button>
13         <Button Grid.Row="1" Content="Button 2"></Button>
14         <Button Grid.Row="2" Grid.RowSpan="2" Content="Button 3"></Button>
15     </Grid>
16 </Window>

3）GridSplitter從新分佈Grid控件的列間距或行間距。（相似於WinForm中SplitContainer）

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Grid.RowDefinitions>
 7             <RowDefinition Height="*"></RowDefinition>
 8             <RowDefinition Height="3"></RowDefinition>
 9             <RowDefinition Height="*"></RowDefinition>
10         </Grid.RowDefinitions>
11         <Button Grid.Row="0" Content="Button"></Button>
12         <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"></GridSplitter>
13         <Button Grid.Row="2" Content="Button"></Button>
14     </Grid>
15 </Window>

 

2.6 UniformGrid佈局
UniformGrid就是Grid的簡化版，每一個單元格的大小相同，不須要定義行列集合。每一個單元格始終具備相同的大小，每一個單元格只能容納一個控件。

若不設置RowsColums，則按照定義在其內部的元素個數，自動建立行列，並一般保持相同的行列數。若只設置Rows則固定行數，自動擴展列數。若只設置Colums則固定列數，自動擴展行數。

UniformGrid 中沒有Row和Column附加屬性，也沒有空白單元格。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <UniformGrid>
 7             <Button Content="Button"></Button>
 8             <Button Content="Button"></Button>
 9             <Button Content="Button"></Button>
10             <Button Content="Button"></Button>
11             <Button Content="Button"></Button>
12             <Button Content="Button"></Button>
13             <Button Content="Button"></Button>
14         </UniformGrid>
15     </Grid>
16 </Window>

 

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <UniformGrid Columns="2">
 7             <Button Content="Button"></Button>
 8             <Button Content="Button"></Button>
 9             <Button Content="Button"></Button>
10             <Button Content="Button"></Button>
11             <Button Content="Button"></Button>
12             <Button Content="Button"></Button>
13             <Button Content="Button"></Button>
14         </UniformGrid>
15     </Grid>
16 </Window>

 

2.7 ScrollViewer佈局
ScrollViewer是帶有滾動條的面板。在ScrollViewer中只能有一個子控件，若要顯示多個子控件，須要將一個附加的 Panel控件放置在父 ScrollViewer中。而後能夠將子控件放置在該控件中。
HorizontalScrollBarVisibility水平滾動條是否顯示默認爲Hidden
VerticalScrollBarVisibility垂直滾動條是否顯示 默認爲Visible。
通常咱們都會設置 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
意思是：當內容超出可視範圍時，才顯示橫向/縱向滾動條

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
 7             <Button Content="Button" Width="800" Height="800"></Button>
 8         </ScrollViewer>
 9     </Grid>
10 </Window>

 

2.8 ViewBox佈局
Viewbox的做用是拉伸或延展位於其中的組件，以填滿可用空間。在Viewbox中只能有一個子控件，若要顯示多個子控件，須要將一個附加的Panel控件放置在父Viewbox中。而後能夠將子控件放置在該控件中。

經常使用屬性：

Stretch：獲取或設置拉伸模式以決定該組件中的內容以怎樣的形式填充該組件的已有空間。具體設置值以下：

None：不進行拉伸，按子元素設置的長寬顯示。

Uniform：按原比例縮放子元素，使得一邊不足，另外一邊剛好填充

Fill：縮放子元素，使得子元素的長變爲Viewbox的長，寬變爲Viewbox的寬

UniformToFill：按原比例縮放子元素，使得子元素一邊剛好填充，另外一邊超出Viewbox的區域

Stretch默認值爲Uniform。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Grid.RowDefinitions>
 7             <RowDefinition>
 8                 
 9             </RowDefinition>
10         </Grid.RowDefinitions>
11         <Grid.ColumnDefinitions>
12             <ColumnDefinition>
13                 
14             </ColumnDefinition>
15         </Grid.ColumnDefinitions>
16         <Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">
17             <Button Width="100" Height="50" Content="None"></Button>
18         </Viewbox>
19         <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">
20             <Button Width="100" Height="50" Content="Uniform"></Button>
21         </Viewbox>
22         <Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">
23             <Button Width="100" Height="50" Content="Fill"></Button>
24         </Viewbox>
25         <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
26             <Button Width="100" Height="50" Content="UniformToFill"></Button>
27         </Viewbox>
28     </Grid>
29 </Window>

 

2.9 Border
Border 是一個裝飾的控件，此控件用於繪製邊框及背景，在Border中只能有一個子控件，若要顯示多個子控件，須要將一個附加的Panel控件放置在父Border中。而後能夠將子控件放置在該 Panel控件中。

經常使用屬性：

Background: 背景色 ；

BorderBrush: 邊框色 ；

BorderThickness: 邊框寬度；

CornerRadius: 各個角 圓的半徑；

1 <Window x:Class="WPF_Layout.MainWindow"
2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4         Title="WPF-Layout" Height="350" Width="525">
5     <Grid>
6         <Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0, 2, 4, 6" CornerRadius="0, 10, 20, 30"></Border>
7     </Grid>
8 </Window>

 

三 精肯定位的經常使用屬性
在設計UI時，WPF爲咱們提供了一些屬性用於精肯定位元素，其中最經常使用的有三個：Alignment(包括水平，垂直)，Margin，Padding，具體用法以下：

HorizontalAlignment： 子元素在水平方向的對齊方式，有左對齊，右對齊，中間對齊，拉伸填充等四種方式。

VerticalAlignment：子元素在垂直方向的對齊方式，有頂端對齊，底部對齊，中間對齊，拉伸填充等四種方式。

Margin：用於指定元素與其父級或同級之間的距離，包括上下左右四個值。也可經過使用 Margin="20"同時指定四個值。

Padding：用於指定元素與其子級之間的距離，包括上下左右四個值。也可經過使用Padding="20"同時指定四個值。

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Grid.RowDefinitions>
 7             <RowDefinition>
 8                 
 9             </RowDefinition>
10             <RowDefinition>
11                 
12             </RowDefinition>
13         </Grid.RowDefinitions>
14         <Button Grid.Row="0" Content="Center" HorizontalAlignment="Center"></Button>
15         <Button Grid.Row="1" Content="Left" HorizontalAlignment="Left"></Button>
16         <Button Grid.Row="2" Content="Right" HorizontalAlignment="Right"></Button>
17         <Button Grid.Row="3" Content="Stretch" HorizontalAlignment="Stretch"></Button>
18     </Grid>
19 </Window>

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Border Background="YellowGreen">
 7             <Button Margin="0, 50, 100, 150"></Button>
 8         </Border>
 9     </Grid>
10 </Window>

 1 <Window x:Class="WPF_Layout.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WPF-Layout" Height="350" Width="525">
 5     <Grid>
 6         <Border Background="YellowGreen" Padding="0, 50, 100, 150">
 7             <Button ></Button>
 8         </Border>
 9     </Grid>
10 </Window>