WPF自學入門（二）WPF-XAML布局控制項

標籤：xaml   obj   emc   學習   說明   dockpanel   很多   dea   自學   

     上一篇介紹了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的初學者，如有不對的地方，歡迎在評論區多多指教，學習，為了分享，為了提高。

WPF自學入門（二）WPF-XAML布局控制項