WPF學習記錄-佈局[摘抄自博客園(xiepeixing與(DotNet菜園))]

一、Canvas

這個容器能夠對元素做準確的定位,但同時也是其創建的頁面不夠靈活。

二、StackPanel

最大的優點是:他會順序的對他的子元素進行排列顯示。(沒有任何附加屬性)

要注意的是:他有兩個屬性:Orientation和FlowDirection從而可以設置子元素的排列顯示形式

Orientation的值設爲Horizontal則爲水平排列,設爲Vertical則垂直排列。

FlowDirection的值設爲RightToLeft,則從右向左排列。設爲LeftToRight,則從左向右排列。

三、WrapPanel

類似於StackPanel,具有StackPanel的屬性和功能(也具有FlowDirection屬性的設置)。

同時,它還具有向我們通常用的windows資源管理器一樣,會隨着窗口的大小,從而將子元素進行合理的分行顯示,而不會出現因爲窗口變小從而是一些子元素無法顯示

WrapPanel佈局面板將各個控件從左至右按照行或列的順序羅列,當長度或高度不夠是就會自動調整進行換行,後續排序按照從上至下或從右至左的順序進行。

 Orientation——根據內容自動換行。當 Horizontal選項看上去類似於Windows資源管理器的縮略圖視圖:元素是從左向右排列的,然後自上至下自動換行。Vertical 選項看上去類似於Windows資源管理器的列表視圖:元素是從上向下排列的,然後從左至右自動換行。


ItemHeight——所有子元素都一致的高度。每個子元素填充高度的方式取決於它的VerticalAlignment屬性、Height屬性等。任何比ItemHeight高的元素都將被截斷。


ItemWidth——所有子元素都一致的寬度。每個子元素填充高度的方式取決於它的VerticalAlignment屬性、Width屬性等。任何比ItemWidth高的元素都將被截斷。

四、DockPanel

與Cavas相似也是從容器的邊緣來定位子元素的位置。不同的是,它只能讓子元素簡簡單單的停靠在容器邊緣,然後拉伸來填充整個panel

<Window x:Class="WPFDock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Button DockPanel.Dock="Top" Background="Aqua">1(Top)</Button>
        <Button DockPanel.Dock="Left" Background="Green">2(Left)</Button>
        <Button DockPanel.Dock="Right" Background="Yellow">3(Right)</Button>
        <Button DockPanel.Dock="Bottom" Background="Blue">4(Bottom)</Button>
        <Button Background="Orange">5</Button>
    </DockPanel>
</Window>

五、Grid

1、通過<Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="3*"></RowDefinition>
            <RowDefinition Height="4*"></RowDefinition>
        </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>類似於以上的語法來爲Grid添加行和列。

2、每個單元格可以設置爲空,也可以放多個元素。

3、RowSpan和ColumnSpan來設置單元格的跨行跨列屬性。

4、行和列的高度和寬度的設置:auto:自動尺寸監控

                                        (像素):絕對尺寸

                                        (帶“*”的數字)比例尺寸

六、GridSplitter  

將GridSplitter放到一個一個單元格中可以通過鼠標改變該單元格的大小:

它的兩個屬性:設置爲VerticalAlignment="Bottom" HorizontalAlignment="Stretch"時,就會在單元格的下方顯示可以改變單元格的高度。

VerticalAlignment="Stretch" HorizontalAlignment="Right" 就會改變單元格的寬度。

值得注意的是:水平方向和垂直方向有一個的值必須設爲Stretch,否則的話是一個小點,就無法實現其功能。

                   GridSplitter必須有一個顯示的Width和Height這樣才能看到,並且啓到作用。

七、共享行和列的尺寸。

ColumnDefinition 和RowDefinition都有一個共同的屬性:SharedSizeGroup 它的值是一個自定義的值,這樣被標記的具有同樣值的行和列就會一直有相同的呈現形式,其中的一個改變,另一個也會改變。

但值得注意的是在使用這個屬性的時候,要將grid的共享開啓:       <Grid Name="parentGrid" Grid.IsSharedSizeScope="True">....</Grid> 

八、處理內容溢出

1、剪切(clipping)

大部分面板都有一個Boolean的屬性ClipToBounds並且它們的值都設爲true,所以只要是溢出面板的都會被剪切掉

只有 Canvas面板的這個屬性可以設置,並且ClipToBounds的值默認是false。

2、滾屏(scrolling)

只需將所有的元素(或面板)放入到一個<ScrollViewer >.....</ScrollViewer>內即可。他有屬性:VerticalScrollBarVisibility(默認值Visible)和HorizontalScrollBarVisibility(默認值Auto)可以設置他們的值:Visible,Hidden,Auto,Disabled

3、縮放(scaling)

將內容放置到<Viewbox>...</Viewbox>之內即可實現縮放。

屬性Stretch:值

Uniform(默認):顯示整個元素到窗體的空間上,會隨着窗體的大小而自動縮放,(但是某個方向上可能因爲比例不合適而無法填充剩餘空間)

UniformToFill:在保存外觀比例同時縮放子元素來完全填充viewbox內的空間(但是某個方向上可能因爲比例不合適而要截斷部分顯示)

None:不進行縮放,與不用viewbox沒什麼區別。

Fill:顯示子元素到viewbox中,各個方向都要拉伸以填充所有空間。

屬性StretchDirection值

Both(默認)擴大或縮小內容。DownOnly:如果合適縮小內容。如果內容足夠小,viewbox保持當前內容大小不變。UpOnly:如果合適擴大內容,如果內容足夠大,Viewbox保持當前內容大小不變。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章