WPF面板佈局介紹Grid、StackPanel、DockPanel、WrapPanel

時間  2019-11-19
標籤 wpf 面板 佈局 介紹 grid stackpanel dockpanel wrappanel 简体版
原文   原文鏈接

回顧

        上一篇，咱們介紹了基本控件及控件的重要屬性和用法，咱們本篇詳細介紹WPF中的幾種佈局容器及每種佈局容器的使用場景，當html

然這些都是本人在實際項目中的使用經驗，可能還存在錯誤之處，還請你們指出。前端

本文大綱

一、Grid編程

二、StackPanelwindows

三、DockPanel服務器

四、WrapPanel網絡

Grid

一、Row和Column

咱們下面來介紹Grid的行的用法，及咱們在UI設計過程當中須要注意的細節。app

因爲前面咱們在第一章中已經介紹了基本的關於Grid的表格行和列的定義及相關屬性，爲了防止你們遺忘，咱們這裏再次介紹下：編程語言

image

爲了加深你們對Grid佈局的印象，咱們這裏加入控件來展現效果。佈局

下面在每一個單元格都加入子控件post

image

上面指定了控件在Grid表格中的哪一行那一列，若是咱們的某個控件跨行或者跨列如何作呢？

image

關於跨行和跨列同樣，只不過將Grid.ColumnSpan換成Grid.RowSpan。

下面介紹，在Grid如何將控件設置爲自適應寬度和高度，或者是固定寬度或固定高度時，應該注意的細節。

image

一、自適應區域：

image

二、頂部對齊或底部對齊

image

對於頂部對齊和底部對齊，相對來講都同樣。

三、左右對齊時：

image

四、下面來舉個例子，咱們來如何分析，根據原型來使用Grid佈局來達到要求和目標：

例以下圖：

image

咱們以博客園爲例，可能例子不太合適，可是若是咱們想作一個博客園的桌面版，保持風格一致的狀況下，若是咱們使用Grid佈局如何來佈局呢？

A、有Logo圖片,上面還有設置等菜單，因此，咱們能夠吧這塊設置爲二行，這樣比較容易區分頁面的佈局和設置

B、下面有幾個二級菜單，新聞、博問等 一行

C、左側有網站分類。必須1列

D、右側有內容區。上面有區分首頁、精華、候選、新聞、關注等、1列

E、右側有找找看、還有最新新聞等 1列。

F、最下面，確定還有狀態欄，若是咱們開發桌面系統。1行

 

根據上面的分析，咱們的Grid表格至少5行、3列

關於其餘的設計，咱們經過Grid表格的組合來進行控制。

下面咱們就來實現下：

先設置大致佈局以下：

image

關於上述佈局的具體實現以下：

<Window x:Class="Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="800">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.ColumnSpan="2">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="何戈洲" Margin="5,0,0,0"/>
                <Button Content="個人博客" Margin="5,0,0,0"/>
                <Button Content="短消息" Margin="5,0,0,0"/>
                <Button Content="設置" Margin="5,0,0,0"/>
                <Button Content="退出" Margin="5,0,0,0"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.Row="1">
            <Image Source="/Samples;Component/Images/logo_small.gif" />
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">
            <StackPanel Orientation="Horizontal">
                <Button Margin="5,0,0,0">園子</Button>
                <Button Margin="5,0,0,0">新聞</Button>
                <Button Margin="5,0,0,0">博問</Button>
                <Button Margin="5,0,0,0">閃存</Button>
                <Button Margin="5,0,0,0">網摘</Button>
                <Button Margin="5,0,0,0">招聘</Button>
                <Button Margin="5,0,0,0">專題</Button>
                <Button Margin="5,0,0,0">知識</Button>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
            <Image Source="/Samples;Component/Images/main.png" />
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,0,0,0">關於咱們</Button>
                <Button Margin="5,0,0,0">聯繫咱們</Button>
                <Button Margin="5,0,0,0">廣告服務</Button>
                <Button Margin="5,0,0,0">人才服務</Button>
                <Button Margin="5,0,0,0">版權</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

 

從上面的代碼能夠看出來，很是的簡單，Grid特別適合軟件系統的總體佈局，在實際的項目中經過Grid與其餘的佈局控件相結合一塊兒完成頁面的總體佈局。

StackPanel

StackPanel 適合水平或者垂直方向的佈局，在上面的例子中咱們大量的使用該種佈局方式。適合局部區域的佈局。好比博客園中的以下區域就能夠採用StackPanel進行佈局。

image

image

image

對於這類的固定的區域，咱們能夠不適用Grid來進行佈局，使用StackPanel也能夠達到目標。

咱們來使用StackPanel來進行佈局

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                <GroupBox Header="網站分類" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content=".NET技術(16)"/>
                        <Button Content="編程語言(13)"/>
                        <Button Content="軟件設計(3)"/>
                        <Button Content="Web前端(16)"/>
                        <Button Content="軟件工程(26)"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="連接" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content="反饋和建議"/>
                        <Button Content="官方博客"/>
                        <Button Content="電子期刊" />
                        <Button Content="人才服務"/>
                        <Button Content="博客模板"/>
                    </StackPanel>
                </GroupBox>
            </StackPanel>

運行效果以下：

image

與預期的效果相同，對於其餘的模塊，咱們也能夠在局部，對於水平或者垂直方向要求進行佈局的，咱們均可以採用StackPanel來進行佈局。

下面咱們來看看橫向佈局的例子：

image

咱們經過表格中的使用對StackPanel的停靠定位，進而經過Stackpanel對內部的子控件的停靠方向設置，咱們經過以下代碼實現上述效果：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
               <Button Content="何戈洲" Margin="5,0,0,0"/>
               <Button Content="個人博客" Margin="5,0,0,0"/>
               <Button Content="短消息" Margin="5,0,0,0"/>
               <Button Content="設置" Margin="5,0,0,0"/>
               <Button Content="退出" Margin="5,0,0,0"/>
</StackPanel>

StackPanel在父容器中是右對齊的。

而後再StackPanel容器中，若是也採用內容右對齊，會有什麼效果呢？

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="個人博客" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="短消息" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="設置" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="退出" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
</StackPanel>

設置子控件的停靠方式時，不會起到任何做用，默認狀況下，Stack的水平佈局時，從左至右。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
                <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                <Button Content="個人博客" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="短消息" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="設置" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                <Button Content="退出" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
</StackPanel>

修改了FlowDirection設置了StackPanel的方向後，全部的子控件，都是從右向左方向進行繪製和顯示，效果以下：

image

因此對於StackPanel咱們基本上是用上述的屬性和對StackPanel的停靠方式進行設置後，便可知足佈局的要求。

DockPanel

DockPanel停靠容器，專門負責自適應窗口的佈局,以前咱們介紹了DockPanel的佈局設置，這裏再回顧下：

<DockPanel>
                <StackPanel DockPanel.Dock="Top" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Left" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Bottom" Height="0">
                </StackPanel>
                <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Width="200">
                    <GroupBox Header="最新新聞" Height="160">
                        <StackPanel Orientation="Vertical">
                            <Button Content="宅急送近日宣佈降價搶"/>
                            <Button Content="騰訊聯手華爲操盤四核手機"/>
                            <Button Content="Windows 8各版本區別與售價"/>
                            <Button Content="數方程將無線網絡帶寬提升一個數量級"/>
                            <Button Content="中移動：Lumia 920T將於11月上市"/>
                            <Button Content="Windows 8下一站：10月25日紐約"/>
                        </StackPanel>
                    </GroupBox>
                    <GroupBox Header="48小時閱讀排行榜" Height="160">
                        <StackPanel Orientation="Vertical">
                            <Button Content="子用戶-角色-權限-菜單 淺談：子帳戶設計方案"/>
                            <Button Content="網站已恢復正常，讓你們久等了"/>
                            <Button Content="拿什麼拯救你，個人51Job簡歷？——UBB漏洞"/>
                            <Button Content="這些年咱們沒用過的JS"/>
                            <Button Content="多少錢纔可以讓人重拾理想"/>
                            <Button Content="準備購買的Dell服務器的硬件配置"/>
                        </StackPanel>
                    </GroupBox>
                </StackPanel>
                <StackPanel >

                      <Button Content=" 我鋪滿"/>

                </StackPanel>
</DockPanel>

上面的DockPanel在進行自適應佈局時，默認最後的一個區域時默認填充，能夠理解爲fill。而必須制定其餘的區域後，該設置纔有效，因此，咱們上面設置了top,left,bottom 佔用的空間都是0，這樣，系統會將最後的一個子區域填充。

上面設置後的效果以下。

image

固然，這個頁面的總體，咱們也能夠採用DockPanel進行佈局，佈局的效果，徹底能夠達到上述效果，下面咱們來使用DockPanel來對總體進行佈局吧。

最終的代碼以下：

<DockPanel>
          <StackPanel DockPanel.Dock="Top" Height="100">
              <Grid>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="20"/>
                      <RowDefinition Height="50"/>
                      <RowDefinition Height="30"/>
                  </Grid.RowDefinitions>
                  <Grid >
                      <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
                          <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                          <Button Content="個人博客" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                          <Button Content="短消息" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                          <Button Content="設置" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                          <Button Content="退出" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                      </StackPanel>
                  </Grid>
                  <Grid  Grid.Row="1">
                      <Image Source="/Samples;Component/Images/logo_small.gif" HorizontalAlignment="Left"/>
                  </Grid>
                  <Grid  Grid.Row="2">
                      <StackPanel Orientation="Horizontal">
                          <Button Margin="5,0,0,0">園子</Button>
                          <Button Margin="5,0,0,0">新聞</Button>
                          <Button Margin="5,0,0,0">博問</Button>
                          <Button Margin="5,0,0,0">閃存</Button>
                          <Button Margin="5,0,0,0">網摘</Button>
                          <Button Margin="5,0,0,0">招聘</Button>
                          <Button Margin="5,0,0,0">專題</Button>
                          <Button Margin="5,0,0,0">知識</Button>
                      </StackPanel>
                  </Grid>
              </Grid>
          </StackPanel>
          <StackPanel DockPanel.Dock="Bottom" Height="30" Orientation="Horizontal" HorizontalAlignment="Center">
              <Button Margin="5,0,0,0">關於咱們</Button>
              <Button Margin="5,0,0,0">聯繫咱們</Button>
              <Button Margin="5,0,0,0">廣告服務</Button>
              <Button Margin="5,0,0,0">人才服務</Button>
              <Button Margin="5,0,0,0">版權</Button>
          </StackPanel>
          <StackPanel DockPanel.Dock="Left" Width="150">
              <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                  <GroupBox Header="網站分類" Height="Auto">
                      <StackPanel Orientation="Vertical">
                          <Button Content=".NET技術(16)"/>
                          <Button Content="編程語言(13)"/>
                          <Button Content="軟件設計(3)"/>
                          <Button Content="Web前端(16)"/>
                          <Button Content="軟件工程(26)"/>
                      </StackPanel>
                  </GroupBox>
                  <GroupBox Header="連接" Height="Auto">
                      <StackPanel Orientation="Vertical">
                          <Button Content="反饋和建議"/>
                          <Button Content="官方博客"/>
                          <Button Content="電子期刊" />
                          <Button Content="人才服務"/>
                          <Button Content="博客模板"/>
                      </StackPanel>
                  </GroupBox>
              </StackPanel>
          </StackPanel>
          <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Width="200">
              <GroupBox Header="最新新聞" Height="160">
                  <StackPanel Orientation="Vertical">
                      <Button Content="宅急送近日宣佈降價搶"/>
                      <Button Content="騰訊聯手華爲操盤四核手機"/>
                      <Button Content="Windows 8各版本區別與售價"/>
                      <Button Content="數方程將無線網絡帶寬提升一個數量級"/>
                      <Button Content="中移動：Lumia 920T將於11月上市"/>
                      <Button Content="Windows 8下一站：10月25日紐約"/>
                  </StackPanel>
              </GroupBox>
              <GroupBox Header="48小時閱讀排行榜" Height="160">
                  <StackPanel Orientation="Vertical">
                      <Button Content="子用戶-角色-權限-菜單 淺談：子帳戶設計方案"/>
                      <Button Content="網站已恢復正常，讓你們久等了"/>
                      <Button Content="拿什麼拯救你，個人51Job簡歷？——UBB漏洞"/>
                      <Button Content="這些年咱們沒用過的JS"/>
                      <Button Content="多少錢纔可以讓人重拾理想"/>
                      <Button Content="準備購買的Dell服務器的硬件配置"/>
                  </StackPanel>
              </GroupBox>
          </StackPanel>
          <StackPanel >
              <Button Content=" 我鋪滿"/>
          </StackPanel>
      </DockPanel>

 

運行上述代碼效果以下：

image

經過DockPanel完成對總體的佈局，而後內部結合一些其餘的佈局控件，完成局部的細節的佈局。

 

 

 

WrapPanel

WrapPanel容器咱們也介紹過，該容器能夠看作自動換行功能的StackPanel容器。下面咱們就來分析下該容器的通常應用場景。

image 咱們看到了windows8中的以下頁面，若是咱們仿製該頁面的時候，其實咱們能夠採用wrappanel來實現自動的換行，下面咱們來試試吧

最終代碼以下：

<Window x:Class="Samples.Window8Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window8Window" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Label Content="開始" FontFamily="微軟雅黑" FontSize="30"/>
        </Grid >
        <Grid Grid.Row="1">
            <WrapPanel Orientation="Horizontal" ItemHeight="100" ItemWidth="190">
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
                <Image Source="/Samples;Component/Images/logo_small.gif" />
            </WrapPanel>
        </Grid>
    </Grid>
</Window>

 

運行後，效果以下：

image

固然，咱們的界面效果，還打不到美感，可是的確是自動換行。咱們將水平方向，修改成垂直方向後，運行：

image

運行查看效果。

image

經過上面的簡單案例，咱們基本上知道了wrapPanel的用法。

 

總結

經過上面的介紹和demo的演示，咱們知道了如何在項目中什麼狀況下，使用什麼樣的佈局容器，經過實際的案例，咱們更容易理解和掌握佈局的模式。錯誤之處，還請你們反饋，我及時改正，謝謝！

 

參考出處：http://www.cnblogs.com/hegezhou_hot/archive/2012/10/23/2735874.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程