WPF快速入門系列(1)——WPF布局概覽

一、引言

　　關於WPF早在一年前就已經看過《深入淺出WPF》這本書，當時看完之后由於沒有做筆記，以至於我現在又重新撿起來並記錄下學習的過程，本系列將是一個WPF快速入門系列，主要介紹WPF中主要的幾個不同的特性，如依賴屬性、命令、路由事件等。

　　在正式介紹之前，我還想分享下為什么我又要重新撿起來WPF呢？之前沒有記錄下來的原來主要是打算走互聯網方向的，后面發現互聯網方向經常加班，又累，有時候忙的連自己寫了什么都不知道的，所以后面機緣巧合地進了一家外企，在外企不像互聯網行業那樣，比較清楚，有更多的時間去理清楚自己所學習到的知識，其中同時也發現了WPF的重要性和應用場景，在一些美資企業和印度的公司，客戶端都非常喜歡用WPF來做演示的客戶端，所以，自然走上外企這條路，所以就打算好好研究下WPF了，所以也就有了這個系列。

二、WPF的自我介紹

　　Windows Presentation Foudation,WPF是下一代顯示系統，用來生成能帶給用戶震撼視覺體驗的Windows客戶端應用程序。WPF的核心是一個與分辨率無關並且基於向量的程序引擎，目的在於利用現代圖形硬件的優勢。WPF在.NET Framework 3.0中被微軟引入到.NET Framework類庫中，並且在.NET 3.5、4.0 和4.5都有所更新。WPF可以理解為是實現下一代Windows 桌面應用程序的技術，在之前我們通常會使用MFC或Winform來實現Windows桌面程序。

　　WPF除了引入了新的API之前，還引入了一些新的概念，這些新的概念會在本系列中一一介紹。眾所周知，在實現桌面應用程序之前，第一步必然是對窗體進行布局，WPF為了更好地實現布局，提供了很多布局控件，下面就讓我們一起去看看WPF布局組件。

三、WPF布局詳解

　　WPF的布局控件都繼承於System.Windows.Controls.Panel這個類，本文主要介紹在Panel基類下的幾個常用的布局控件。下圖是布局控件的繼承關系：

3.1 WPF布局過程

　　WPF布局包括兩個階段：一個測量（measure）階段和一個排列(arrange)階段。在測量階段，容器遍歷所有子元素，並詢問子元素它們所期望的大小。在排列階段，容器在合適的位置放置子元素。WPF布局可以理解為一個遞歸過程，它會遞歸對布局控件內的每個子元素進行大小調整，定位和繪制，最后進行呈現，直到遞歸所有子元素為止，這樣也就完成了整個布局過程。

　　布局系統為每個子元素完成了兩個處理過程：測量處理和排列處理。每個Panel都提供了自己的MeasureOverride和ArrangeOverride方法，以實現自己特定的布局行為。所以，你如果想自定義布局控件，也可以重新這兩個方法來達到，關於自定義布局控件會在后面介紹到。

3.2 Canvas 布局控件

　　Canvas面板是最輕量級的布局容器，它不會自動調整內部元素的排列和大小，不指定元素位置，元素將默認顯示在畫布的左上方。Canvas主要用來畫圖。Canvas默認不會自動裁剪超過自身范圍的內容，即溢出的內容會顯示在Canvas外面，這是因為Canvas的ClipToBounds屬性默認值是false，我們可以顯式地設置為true來裁剪多出的內容。下面XAML代碼簡單演示了Canvas面板的使用。

   <Canvas Margin="10,10,10,10" Background="White" >
        <Rectangle Name="rect" Canvas.Left="300" Canvas.Top="180" Fill="Black" Stroke="Red"  Width="200" Height="200"/>
        <Ellipse  Name="el" Canvas.Left="160" Canvas.Top="150" Fill="Azure" Stroke="Green" Width="180" Height="180"/>
    </Canvas>

上面XAML實現的效果如下圖所示：

其中，矩形的右邊區域以溢出Canvas面板區域，如向右拉動邊框，此時Canvas會拉伸以填滿可用空間，此時就可以看到矩形溢出的部分。但Canvas面板內的控件不會改變其尺寸和位置。對應的C#代碼實現如下所示：

public partial class CanvasDemo : Window
    {
        public CanvasDemo()
        {
            InitializeComponent();

            Canvas canv = new Canvas();
            canv.Margin = new Thickness(10, 10, 10, 10);
            canv.Background = new SolidColorBrush(Colors.White);

            // 把canv添加為窗體的子控件
            this.Content = canv;

            // Rectangle
            Rectangle rect = new Rectangle();
            rect.Fill = new SolidColorBrush(Colors.Black);
            rect.Stroke = new SolidColorBrush(Colors.Red);
            rect.Width = 200;
            rect.Height = 200;
            rect.SetValue(Canvas.LeftProperty, (double)300);
            rect.SetValue(Canvas.TopProperty, (double)180);
            canv.Children.Add(rect);

            // Ellipse
            Ellipse el = new Ellipse();
            el.Fill = new SolidColorBrush(Colors.Azure);
            el.Stroke = new SolidColorBrush(Colors.Green);
            el.Width = 180;
            el.Height = 180;
            el.SetValue(Canvas.LeftProperty, (double)160);
            // 必須轉換為double，否則執行會出現異常
            // 詳細介紹見：http://msdn.microsoft.com/zh-cn/library/system.windows.controls.canvas.top(v=vs.110).aspx
            el.SetValue(Canvas.TopProperty, (double)150);
            el.SetValue(Panel.ZIndexProperty, -1);
            canv.Children.Add(el);

            // Print Zindex Value 
            int zRectIndex = (int)rect.GetValue(Panel.ZIndexProperty);
            int zelIndex = (int)el.GetValue(Panel.ZIndexProperty);
            Debug.WriteLine("Rect ZIndex is: {0}", zRectIndex);
            Debug.WriteLine("Ellipse ZIndex is: {0}", zelIndex);
        }
    }

　　從上面可以看出，即使C#代碼可以實現完全一樣的效果，但是需要書寫更多的代碼，所以，在平時開發中，對於控件的布局，一般采用XAML的方式，C#代碼一般用於在運行時加載某個控件到界面中的實現。

3.3 StackPanel 布局控件

　　StackPanel就是將子元素按照堆棧的形式一一排列，可以通過設置StackPanel的Orientation屬性設置兩種排列方式：橫排（Horizontal，該值為默認值）和豎排（Vertical）。縱向的StackPanel每個元素默認寬度與面板一樣寬，反之橫向是高度和面板一樣高。如果包含的元素超過了面板控件，它會被截斷多出的內容。可以通過Orientation屬性來設置StackPanel是橫排（設置其值為Vertical）還是豎排（設置其值為Horizontal）。下面XAML代碼演示了StackPanel的使用：

<Window x:Class="WPFLayoutDemo.StackPanelDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="300" Width="200">
    <StackPanel Margin="10,10,10,10" Background="Azure">
        <Label>A Button Stack</Label>
        <Button Content="Button 1"></Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
        <Button Content="Button 4"></Button>
    </StackPanel>
</Window>

對應的C#實現代碼如下所示：

public partial class StackPanelDemo : Window
    {
        public StackPanelDemo()
        {
            InitializeComponent();
            StackPanel sp = new StackPanel();
            sp.Margin = new Thickness(10, 10, 10, 10);
            sp.Background = new SolidColorBrush(Colors.Azure);
            sp.Orientation = Orientation.Vertical;
            // 把sp添加為窗體的子控件
            this.Content = sp;

            // Label 
            Label lb = new Label();
            lb.Content = "A Button Stack";
            sp.Children.Add(lb);

            // Button 1
            Button btn1 = new Button();
            btn1.Content = "Button 1";
            sp.Children.Add(btn1);

            // Button 2
            Button btn2 = new Button();
            btn2.Content = "Button 2";
            sp.Children.Add(btn2);

            // Button 3
            Button btn3 = new Button();
            btn3.Content = "Button 3";
            sp.Children.Add(btn3);

            // Button 4
            Button btn4 = new Button();
            btn4.Content = "Button 4";
            sp.Children.Add(btn4);
        }
    }

上面代碼的實現效果如下圖所示：

如果將StackPanel的Orientation屬性設置為“Horizontal”的話，此時的效果如下圖所示：

盡管布局由容器決定，但子元素仍然有一定的決定權，布局面板支持一些布局屬性，以便與子元素結合使用，在下圖中列出了這些布局屬性：

 

3.4 WrapPanel 布局控件

　　WrapPanel面板在可能的空間中，一次以一行或一列的方式布置控件。默認情況下，WrapPanel.Orientation屬性設置為Horizontal，控件從左向右進行排列，然后再在下一行中排列，但你可將WrapPanel.Orientation設置為Vertical，從而在多個列中放置元素。與StackPanel面板不同，WrapPanel面板實際上用來控制用戶界面中一小部分的布局細節，並非用於控制整個窗口布局。

　　下面示例中定義了一系列具有不同對齊方式的按鈕，並將這些按鈕放在一個WrapPanel面板中。

<Window x:Class="WPFLayoutDemo.WrapPanelDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanelDemo" Height="300" Width="500">
    <WrapPanel Margin="10" Background="Azure">
        <Button VerticalAlignment="Top" Margin="5">Top Button</Button>
        <Button MinHeight="50"> Tall Button 2</Button>
        <Button VerticalAlignment="Bottom">Bottom Button</Button>
        <Button>Stretch Button</Button>
        <Button VerticalAlignment="Center">Center Button</Button>
        <Button>Next Button</Button>
    </WrapPanel>
</Window>

　　下圖顯示了如何對這些按鈕進行換行以適應WrapPanel面板的當前尺寸，WrapPanel面板的當前尺寸由包含它的窗口尺寸決定的。在上面的例子中，WrapPanel面板水平地創建一系列假象的行，每一行的搞定都被設置為所包含元素中最高元素的高度。其他空間可能被拉伸以適應該高度，或根據VerticalAlignment屬性設置進行對齊。

　　當縮小窗口大小時，對應的WrapPanel也會改變，從而改變WrapPanel面板中控件的排列，具體效果如下圖所示：

3.5 DockPanel 布局控件

　　DockPanel面板定義一個區域，在此區域中，你可以使子元素通過錨點的形式進行排列。DockPanel類似於WinForm中Dock屬性的功能。對於在DockPanel中的元素的停靠可以通過Panel.Dock的附加屬性來設置，如果設置LastChildFill屬性為true，則最后一個元素將填充剩余的所有空間。

　　下面XAML代碼演示了DockPanel控件的使用：

<Window x:Class="WPFLayoutDemo.DockPanelDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanelDemo" Height="300" Width="300">
    <DockPanel Margin="10" Background="Azure" LastChildFill="True">
        <Button DockPanel.Dock="Top" Background="Red">Top Button</Button>     
        <Button DockPanel.Dock="Left" Background="Gray">Left Button</Button>
        <Button DockPanel.Dock="Right" Background="Green">Right Button</Button>
        <Button DockPanel.Dock="Bottom"  Background="White">Bottom Button</Button>
        <Button>Remaining Button</Button>
    </DockPanel>
</Window>

　　運行的效果如下圖所示：

3.6 Grid 布局控件 

 　　Grid比起其他Panel，功能是最多最為復雜的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合兩種元素組成。而放在Grid面板中的元素必須顯式采用附加屬性定義其所在行和列，否則元素均默認放置在第0行第0列。下面XAML演示了Grid面板的使用：

<Window x:Class="WPFLayoutDemo.GridDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridDemo" Height="300" Width="480">
    <Grid Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Fill="Green" Margin="10,10,10,20"/>
        <Rectangle Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Fill="Blue" Margin="10,10,10,20"/>
        <Rectangle Grid.Row="0" Grid.Column="4" Fill="Orange"/>
        <Button Grid.Row="1" Grid.Column="0">Button 2</Button>
        <Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Fill="Red"/>
    </Grid>
</Window>

　　定義Grid的列寬和行高可采用固定、自動和按比例三種方式定義。

　　第一種：固定長度——寬度不夠時，元素會被裁剪，單位是pixel;

　　第二種：自動長度——自動匹配行中最寬元素的高度。

　　第三種：比例長度——"*"表示占用剩余的全部寬度或高度，兩行都是*，則將剩余高度平分。像上面的一個2*，一個*，表示前者2/3寬度。

其運行效果如下圖所示：

3.7 UniformGrid 布局控件

 　　UniformGrid是Grid簡化版本，不像Grid面板，UniformGrid不需要預先定義行集合和列集合，反而，通過簡單設置Rows和Columns屬性來設置尺寸。每個單元格始終具有相同的大小。UniformGrid每個單元格只能容納一個元素，將自動按照在其內部的元素個數，自動創建行和列，並通過保存相同的行列數。

　　下面XAML演示了UniformGrid控件的使用：

<Window x:Class="WPFLayoutDemo.UniformGridDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGridDemo" Height="300" Width="300">
    <UniformGrid>
        <Ellipse Margin="10" Fill="Gray"/>
        <Ellipse Margin="10" Fill="Gray"/>
        <Ellipse Margin="10" Fill="Green"/>
        <Ellipse Margin="10" Fill="Green"/>
        <Ellipse Margin="10" Fill="Red"/>
    </UniformGrid>
</Window>

　　在上面，並沒有顯示指定UniformGrid的行和列數，此時UniformGrid將自動按照元素的個數，自動創建行和列。運行效果如下圖所示。最好是顯式指定Rows和Columns屬性，這樣才能確保布局是按照你的思路去進行的。

3.8 ScrollViewer 控件

 　　通常用戶界面中的內容比計算機屏幕的顯示區域大的時候，可以利用ScrollViewer控件可以方便地使應用程序中的內容具備滾動功能。具體的使用示例如下所示：

<Window x:Class="WPFLayoutDemo.ScrollViewerDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ScrollViewerDemo" Height="300" Width="300">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
            <Rectangle Width="500" Height="400" Fill="Green"/>
        </ScrollViewer>
    </Grid>
</Window>

　　運行效果如下圖所示：

四、布局綜合運用

 　　前面例子都是單獨介紹每個布局控件的，然而在實際開發中，程序的界面布局都是由多個布局控件一起來完成的，這里演示一個綜合實驗的小例子。要實現的效果圖如下所示：

 

　　具體的XAML代碼實現如下所示：

<Window x:Class="WPFLayoutDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        Title="布局綜合運用實例" Height="400" Width="480">
    <DockPanel Width="Auto" Height="Auto" LastChildFill="True">
        <!--頂部菜單區域-->
        <Menu Width="Auto" Height="20" Background="LightGray" DockPanel.Dock="Top">
            <!--File菜單項-->
            <MenuItem Header="文件">
                <MenuItem Header="保存"/>
                <Separator/>
                <MenuItem Header="退出"/>
            </MenuItem>
            <!--About 菜單項-->
            <MenuItem Header="幫助">
                <MenuItem Header="關於本產品"/>
            </MenuItem>
        </Menu>

        <!--狀態欄-->
        <StackPanel Width="Auto" Height="25" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">
            <Label Width="Auto" Height="Auto" Content="狀態欄" FontFamily="Arial" FontSize="12"/>
        </StackPanel>
        <!--Left-->
        <StackPanel Width="130" Height="Auto" Background="Gray" DockPanel.Dock="Left">
            <Button Margin="10" Width="Auto" Height="30" Content="導航欄"/>
            <Button Margin="10" Width="Auto" Height="30" Content="導航欄"/>
            <Button Margin="10" Width="Auto" Height="30" Content="導航欄"/>
        </StackPanel>

        <!--Right-->
        <Grid Width="Auto" Height="Auto" Background="White">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>
            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>
            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>
            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>
        </Grid>
    </DockPanel>
   
</Window>

五、自定義布局控件

 　　在實際開發中，自然少不了自定義控件的開發，下面介紹下如何自定義布局控件。在前面介紹過布局系統的工作原理是先測量后排列，測量即是確定面板需要多大空間，排列則是定義面板內子元素的排列規則。所以，要實現自定義布局控件，需要繼承於Panel類並重寫MeasureOverride和ArrangeOverride方法即可，下面實現了一個簡單的自定義布局控件：

namespace CustomLayoutControl
{
    public class CustomStackPanel: Panel
    {
        public CustomStackPanel()
            : base()
        { 
        }

        // 重寫默認的Measure方法
        // avaiableSize是自定義布局控件的可用大小
        protected override Size MeasureOverride(Size availableSize)
        {
            Size panelDesiredSize = new Size();
            foreach (UIElement child in this.InternalChildren)
            {
                child.Measure(availableSize);

                // 子元素的期望大小
                panelDesiredSize.Width += child.DesiredSize.Width;
                panelDesiredSize.Height += child.DesiredSize.Height;
            }

            return panelDesiredSize;
        }

        // 重寫默認的Arrange方法
        protected override Size ArrangeOverride(Size finalSize)
        {
            double x = 10;
            double y = 10;
            foreach (UIElement child in this.InternalChildren)
            {     
                // 排列子元素的位置
                child.Arrange(new Rect(new Point(x, y), new Size(finalSize.Width - 10, child.DesiredSize.Height)));
                y += child.RenderSize.Height + 5;
            }

            return finalSize;
        }
    }
}

　　控件的最終大小和位置是由該控件和父控件共同完成的，父控件會先給子控件提供可用大小（MeasureOverride中availableSize參數），子控件再反饋給父控件一個自己的期望值（DesiredSize），父控件最后根據自己所擁有的空間大小與子控件期望的值分配一定的空間給子控件並返回自己的大小。這個過程是通過MeasureOverride和ArrangeOverride這兩個方法共同完成的，這里需要注意：父控件的availableSize是減去Margin、Padding等的值。

　　接下來，創建一個測試上面自定義布局控件的WPF項目，然后添加自定義布局控件的程序集，然后在WPF項目中MainWindows添加如下代碼：

<Window x:Class="TestCustomerPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:custom="clr-namespace:CustomLayoutControl;assembly=CustomLayoutControl"
        Title="測試自定義布局控件" Height="350" Width="525">
    <custom:CustomStackPanel Background="Red">
        <Button Content="Button 1"></Button>
        <Button Content="Button 2"></Button>
        <Button Content="Button 3"></Button>
    </custom:CustomStackPanel>
</Window>

　　運行成功后的效果如下圖所示：

六、小結

 　　到這里，WPF布局的內容就介紹結束了，這里最后只是簡單地定義了一個類似StackPanel的布局控件，你還可以自定義更加復雜的布局控件，關於更復雜的自定義控件，你可以參考如下一些文章。在下面一篇文章將分享WPF中依賴屬性的內容。

• FishEyePanel/FanPanel
• PlotPanel, Windows SDK Sample

　　本文所有源碼下載：WPFLayouDemo.zip