WPF UI佈局之概述

在線演示：http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html
清晰版視頻+代碼下載：http://115.com/lb/5lbeer0m9lad

一、簡介

本篇對WPF的佈局控件做一個初步的概覽，並分別演示Grid、StackPanel、Canvas、DockPanel和WrapPanel五個佈局控件。。
主要內容包括：
1、UI佈局的方式和關係。
2、WPF的佈局理念。
3、五種佈局控件的概述和演示。

4、小結。

二、UI佈局的方式和關係
1、三種佈局方式：絕對定位、相對定位和行列定位。
2、三種佈局關係：相領、疊加和包含關係。
對於包含關係，可參加如下的示例代碼，Button控件中包含了Button控件。

<Button Margin="144,50,153,57">
    <Button.Content>
        <Button Margin="10">
            <Button.Content>
                <Button Margin="10">
                    <Button.Content>
                        <Button Margin="10">
                            <Button.Content>
                                <Button Margin="10">
                                    <Button.Content>
                                        <Button Margin="10">
                                            <Button.Content>
                                                <Button Margin="10">
                                                    <Button.Content>
                                                        <Button Margin="10">
                                                            <Button.Content>
                                                                <Button Margin="10">
                                                                    <Button.Content>
                                                                        <Button Margin="10" Content="OK" />
                                                                    </Button.Content>
                                                                </Button>
                                                            </Button.Content>
                                                        </Button>
                                                    </Button.Content>
                                                </Button>
                                            </Button.Content>
                                        </Button>
                                    </Button.Content>
                                </Button>
                            </Button.Content>
                        </Button>
                    </Button.Content>
                </Button>
            </Button.Content>
        </Button>
    </Button.Content>
</Button>

效果如下圖所示：

三、WPF的佈局理念

把一個佈局元素作爲ContentControl或HeaderedContentControl族控件的Content，再在佈局裏面添加要被佈局的子級控件，如果UI局部需要更復雜的佈局，那就在這個區域設置一個子級的佈局元素，形成佈局元素的嵌套。

四、五種佈局控件的概述和演示
Grid：網格佈局控件。可以自定義行和列並通過行列的數量、行高和列寬來調整控件的佈局。類似於HTML中Table元素。

StackPanel：棧式面板控件。可將包含的元素在豎直或水平方向上排成一條直線，當移除一個元素後，後面的元素會自動向前移動以填充空缺。

Canvas：畫布控件。內部元素可以使用以像素爲單位的絕對座標進行定位，類似於傳統的WinForm佈局方式。

DockPanel：泊靠式面板。內部元素可以選擇泊靠方向，類似於傳統WinForm的Dock屬性。

WrapPanel：自動折行面板。內部元素在排滿一行後能夠自動折行，類似於HTML中的流式佈局。

 

五、小結
本演示主要介紹的內容包括：
1、控件的佈局關係：疊加、相鄰和包含。；

2、五種佈局控件概述。Grid、StackPanel、Canvas、DockPanel、WrapPanel

詳細內容請參加視頻演示！