WPF中的常用布局

本文轉載自查看原文 2018-04-14 16:33 15684 UI/ XMAL/ WPF/ 微軟WPF

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

1.2 本文內容
本文主要內容為WPF中的常用布局，大部分內容轉載至https://blog.csdn.net/woshisunjiale/article/details/54136323，代碼片段可能有所不同。

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 swing常用布局 flex布局－常用布局 Flutter常用布局組件 Qt的5種常用布局搭建 Android開發的六種常用布局移動端web的幾種常用布局使用flex實現5種常用布局 CSS常用布局方式-兩列布局、三列布局 css常用布局-多列布局(瀑布流)詳解及案例 Android五大常用布局：FrameLayout、LinearLayout、ConstraintLayout 、TableLayout和RelativeLayout