WPF自學入門(二)WPF-XAML布局控件


     上一篇介紹了xaml基本知識,我們已經知道了WPF簡單的語法。那么接下來,我們要認識一下WPF的布局容器。布局容器可以使控件按照分類顯示,我們一起來看看WPF里面可以使用哪些布局容器用來布局。

       在WPF中,布局是由布局容器來完成的,容器里面是可以放控件,容器里面也可以放容器。而在WPF中,布局容器有很多,下面主要介紹最常用的幾種布局容器,

      下面分別介紹StackPanel,WarpPanel,DockPanel,Grid,Canvas五種布局容器

 

一、StackPanel

       在WPF中StackPanel的功能是,緊湊地把子控件按照一定規律地排列在一起,基本的排列方式有兩種,一種是橫排列<StackPanel Orientation="Horizontal"/>,一種是豎排列<StackPanel Orientation="Vertical">。下面看一下這個布局容器的使用

 

 

這里隨便說一下Margin屬性,Margin屬性定義控件的外邊緣,可以通過以下幾種方式來設置

1、Margin=”10”:各邊緣均為10

2、Margin=”10,20,30,40”:設定左、上、右、下各邊緣分別為10、20、30、40

3、使用拆分式方式設定Margin=”20,10”,如上下為10,左右為20

 

二、WarpPanel

StackPanel是比較有局限性的,那么WPF怎么解決這個問題呢,WarpPanel和DockPanel就是補充StackPanel功能的布局容器,下面通過觀察來對比一下兩個布局容器的區別吧。看一下WarpPanel到底改進了什么功能?

 

看到上面的運行結果,我想大家已經知道了,區別在哪里,WarpPanel是可以根據容器的大小變化,來滾動控件的排布的。而StackPanel只是死死地盯住控件,容器小了,就會遮擋內容。

 

三、DockPanel

       DockPanel布局容器是以上、下、左、右、中為基本結構的布局方式,主要是控件的停靠方式。有類似於港口停船的方式。我們可以利用DockPanel.Dock這個附加屬性來設置控件的停泊方式的。有四個方式,上下左右。

 

 

四、Grid

      在WPF中可以說最強大的布局容器就是Grid了,我們剛才演示的容器都可以放置在Grid中,因為Grid可以模仿除了Warppanel之外的所有布局容器的功能。Grid其實就是把一個頁面分為一格格,然后再這些格上面放東西。

      在布局控件之前,我們首先要做的是布局Grid容器,因為Grid容器是由小網格組成,那么我們在布局容器的時候就要設置好有多少行,有多少列。然后就形成了用這些行和列分隔開的網格了

 

       我們用<ColumnDefinition>標簽來定義列的,用<RowDefinition>來定義行的。上圖我們定義的5*5的Grid布局容器。

      注意,默認情況下是平均分,但是有很多情況不是平均分的,我們可以設置高度或者寬度的值,有三種方式.我們利用列來說明:

         第一就是Width="*",這種是按比例分的,2*就是2倍的意思了。

        第二就是Width="auto"自動分配,就是根據內容分配空間。

        第三就是Width="Value"一個確定的值。這個屬性可以這樣寫

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

        定義Grid的行和列以后,網格就出來了就可以再里面放內容了

我們通過Grid.Row和Grid.Column來把空間放進去。當然,我們也可以在容器里面的空間標簽中加入各種屬性來改變一些東西,如Margin,當我們不想看到分割線的話,也可以設置ShowGridLines=false來取消。我們可以再方格里面鑲嵌一個布局容器,在里面繼續布局。

 

五、Canvas

        Canvas布局容器就好像傳統的布局一樣,基於坐標的布局,利用Canvas.Left,Canvas.Top,Canvas.Right,Canvas.Bottom這四個附加屬性來定位控件坐標。

WPF中使用的坐標是以左上角為原點,向右為X軸,向下為Y軸的。

 

坐標點就是控件的左上角的位置。

 

PS:本人也是WPF的初學者,如有不對的地方,歡迎在評論區多多指教,學習,為了分享,為了提高。


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM