WPF 10天修煉 第四天- WPF佈局容器

WPF佈局

       WPF的窗口也就是Window類，是一個內容控件，該控件派生自ContentControl。內容控件有一個Content屬性，該屬性有一個限制，只能放置一個用戶界面元素，或一個字符串。爲了在窗口上放置多個界面控件，一般在窗口上放置一個容器控件。

WFP佈局原則

一、  元素不該該指定 肯定的尺寸大小，同很慘更應該使其大小自動適應內容。好比按鈕根據所添加的文原本擴展其大小。能夠經過設置maximun和minimun尺寸來限制控件可接受的尺寸大小。

二、  元素不該該使用屏幕座標來指定其位置，一般是基於其尺寸來進行自動排列位置。

三、  佈局容器將在其子元素之間共享其可用控件。一般由容器嘗試爲其每一個子元素分配合適的尺寸。

四、  佈局容器容許嵌套。 

WP核心佈局面板

 

面板名稱	說明
StackPanel	使用水平或垂直堆疊的方式放置元素，適用於一些小範圍佈局。
WarpPanel	水平方向：從左到右排列子元素。當寬度不夠時，則開啓一個新的行從左到右進行排列。 垂直方向：從上到下排列子元素，當高度不夠時，則開啓一個新的列從上到下進行排列。
DockPanel	時子元素依賴於容器的特定邊緣，左、右、上、下邊緣等，該面板一般用於全局佈局。
Grid	WPF最強最好用的佈局控件。相似一個不可見的HTML表格，將子元素放在特定的行和列中。
UniformGrid	放置子元素在一個不可見的表中，但強制全部的單元格都具備相同的尺寸。使用頻率較低
Canvas	使用固定的座標來絕對定位子元素。與傳統winForm佈局方式相似。可是沒有Anchoring和Docking特性。在處理圖形圖像的場合，使用這個佈局很是有用，在動態用戶界面上，這個控件將事半功倍。

StackPanel 

一、  新建StackPaneDemo窗體。

二、  去掉Grid佈局容器，而後添加StackPanel佈局容器

三、  添加5個button按鈕。而後運行查看效果。 

<Window x:Class="WPFDemo.StackPanelDemo"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        WindowStartupLocation="CenterScreen"

        Title="StackPanelDemo" Height="500" Width="800">

    <StackPanel>

        <Button Name="button1" Content="按鈕1"/>

        <Button Name="button2" Content="按鈕2"/>

        <Button Name="button3" Content="按鈕3"/>

        <Button Name="button4" Content="按鈕4"/>

        <Button Name="button5" Content="按鈕5"/>

    </StackPanel>

</Window>

 

默認狀況下，StackPanel從上到下排列控件，控件的高度與其內容的高度相匹配，可使用Orientation屬性設置爲Horizontal使其從左到右進行排列。

    <StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按鈕1"/>

        <Button Name="button2" Content="按鈕2"/>

        <Button Name="button3" Content="按鈕3"/>

        <Button Name="button4" Content="按鈕4"/>

        <Button Name="button5" Content="按鈕5"/>

    </StackPanel>

 

 

 當設置Horizontal以後，按鈕將佔滿StackPanel的高度，但寬度則爲內容的大小。StackPanel有兩個依賴屬性，可使開發人員能夠控制水平或垂直方向，控件如何佔滿窗體可用寬度和高度。 

HorizontalAlignment枚舉屬性：獲取或設置在父元素中構成此元素時應用於此元素的水平對齊特徵。

VerticalAlignment枚舉屬性：獲取或設置在父元素中構成此元素時應用於此元素的垂直對齊特徵。

默認狀況下，這兩個屬性的Stretch，表示根據StackPanel的排列方向自動拉伸到相應的寬度和高度。

 

當StackPanel控件設爲水平方向時，能夠經過VerticalAlignment屬性來設置button控件的對齊方式。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按鈕1" VerticalAlignment="Top"/>

        <Button Name="button2" Content="按鈕2" VerticalAlignment="Center"/>

        <Button Name="button3" Content="按鈕3" VerticalAlignment="Bottom"/>

        <Button Name="button4" Content="按鈕4" VerticalAlignment="Stretch"/>

        <Button Name="button5" Content="按鈕5" VerticalAlignment="Stretch"/>

</StackPanel>

 

 

一樣在Orientation爲Vertical時，能夠設置HorizontalAlignment屬性來指定對齊方式。

<StackPanel Orientation="Vertical">

        <Button Name="button1" Content="按鈕1" HorizontalAlignment="Left"/>

        <Button Name="button2" Content="按鈕2" HorizontalAlignment="Center"/>

        <Button Name="button3" Content="按鈕3" HorizontalAlignment="Right"/>

        <Button Name="button4" Content="按鈕4" HorizontalAlignment="Stretch"/>

        <Button Name="button5" Content="按鈕5" HorizontalAlignment="Stretch"/>

</StackPanel>

 

 

其餘佈局屬性

屬性名稱	屬性說明
Margin	能夠在子元素的四周添加空白，同CSS中的Margin使用方法一致，Margin是System.Windows.thickness結構的屬性。
MinWidth和MinHeight	設置元素的最小尺寸，若是元素大於容器會被裁剪。
MaxWidth和MaxHeight	設置元素的最大尺寸，若是元素大於容器會被裁剪。
Width和Height	設置固定的元素大小。這個屬性將會覆蓋HorizontalAlignment和VerticalAlignment屬性。

 

Margin屬性

Margin屬性能夠指定一個值設置四條邊的值同樣，能夠設置兩個值設置上下、左右的值同樣，能夠設置四個值分別指定左上右下的值。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按鈕1" Margin="5,10" />

        <Button Name="button2" Content="按鈕2" />

        <Button Name="button3" Content="按鈕3" Margin="5,10,15,20" />

        <Button Name="button4" Content="按鈕4" />

        <Button Name="button5" Content="按鈕5" Margin="5" />

</StackPanel>

 

 

最大化、最小化和明確的尺寸屬性

 若是但願按鈕能夠自動地根據內容進行縮放，可是不能小於100個單位，不能大於200個單位。可使用MaxWidth和MinWidth屬性進行設置。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按鈕1" MaxWidth="200" MinWidth="100" Margin="5,10" />

        <Button Name="button2" Content="按鈕2" MaxWidth="200" MinWidth="100" />

        <Button Name="button3" Content="按鈕3" MaxWidth="200" MinWidth="100" Margin="5,10,15,20" />

        <Button Name="button4" Content="按鈕4" MaxWidth="200" MinWidth="100" />

        <Button Name="button5" Content="按鈕5" MaxWidth="200" MinWidth="100" Margin="5" />

</StackPanel>

 

設置最大和最小尺寸效果

 

 

容器尺寸小於控件尺寸裁剪

  

若是想在Window中獲取元素的實際大小，不能直接使用Width和Height屬性，它們表明的不是實際尺寸大小而是但願的尺寸大小。開發人員能夠訪問元素的ActualWidth和ActualHeigth屬性來獲取當前窗口中元素的實際尺寸，這個兩個尺寸會隨着窗口大小的調整而變化。

 WrapPanel 

       與StackPanel控件相似，WrapPanel也有一個Orientation屬性，默認爲Horizontal，控件從左到右進行排列。若是寬度不夠時將會換一個新行。WrapPanel一般用於一些小範圍的佈局場合。而不是總體窗口的整體佈局。

  <WrapPanel>

        <Button Name="button1" Content="按鈕1" VerticalAlignment="Top" />

        <Button Name="button2" Content="按鈕2" MinHeight="100" />

        <Button Name="button3" Content="按鈕3"  VerticalAlignment="Bottom"/>

        <Button Name="button4" Content="按鈕4" />

        <Button Name="button5" Content="按鈕5" VerticalAlignment="Center" />

    </WrapPanel>

 

默認樣式

 

 

 縮小窗體，自動換行 

 

 DockPanel

         用於拉伸控件，以停靠在指定的窗口邊緣，DockPanel中的控件將被拉伸以適應容器的邊緣。

         DockPanel控件的附加屬性Dock。這是一個枚舉類型屬性：可選值以下：

         Left：位於DockPanel左側的子元素

         Top：位於DockPanel頂部的資源

         Right：位於DockPanel右側的子元素

         Bottom：位於DockPanel底部的子元素

   <DockPanel>

        <Button Name="button1" Content="頂部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下側" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左側" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右側"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩餘空間" />

   </DockPanel>

　

 上面代碼中分別設置了四個方向，最後一個方向沒有設置則自動佔滿了剩餘空間，這是由於DockPanel控件指定了LastChildFill屬性。默認狀況下這個屬性爲True。若是將LastChildFille設置爲True不管最後一個元素停靠屬性設置爲什麼值，此元素也是自動填充剩餘空間。

<DockPanel>

        <Button Name="button1" Content="頂部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下側" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左側" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右側"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩餘空間" DockPanel.Dock="Top" />

</DockPanel>

　

下面示例中將LastChildFill屬性設置爲False，而後將最後一個元素的Dock屬性設置爲top。

  <DockPanel LastChildFill="False">

        <Button Name="button1" Content="頂部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下側" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左側" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右側"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩餘空間" DockPanel.Dock="Top" />

   </DockPanel>

 

在上面示例中上下兩側都是佔滿了窗體的所有寬度，若是想使左右兩側佔滿所有高度，只須要改變子元素的順序便可。

<DockPanel LastChildFill="False">

        <Button Name="button3" Content="左側" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右側"  DockPanel.Dock="Right"/>

        <Button Name="button1" Content="頂部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下側" DockPanel.Dock="Bottom"/>

        <Button Name="button5" Content="剩餘空間" DockPanel.Dock="Top" />

</DockPanel>

　　

開發人員也可使用HorizontaAlignment和VerticalAlignment屬性來控制子元素的顯示方式。

<DockPanel LastChildFill="False">

        <Button Name="button1" Content="頂部" DockPanel.Dock="Top"/>

        <Button Name="button6" Content="頂部-居中" HorizontalAlignment="Center" DockPanel.Dock="Top"/>

        <Button Name="button7" Content="頂部-右側" HorizontalAlignment="Right" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下側" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左側" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右側"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩餘空間" DockPanel.Dock="Top" />

</DockPanel>

　

 

使用StackPanel、WarpPanel和DockPanel來實現一個簡單的對話框窗口。

    <DockPanel LastChildFill="True" >

        <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Right">

            <Button Name="btn1" Margin="5" Content="肯定"/>

            <Button Name="btn2" Margin="5" Content="取消"/>

        </StackPanel>

        <TextBlock Margin="10" Text="簡單對話框示例"></TextBlock>

    </DockPanel>

 

 

 

Grid

Grid就是表格佈局，使用Grid能夠設置行列，添加子元素須要指定所屬的行列，多個子元素能夠放在同一個單元格中。

<!---定義一個3行3列的表格-->
<Grid  ShowGridLines="True">

        <!--定義3行-->

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition />

            <RowDefinition />

        </Grid.RowDefinitions>

        <!--定義3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

</Grid>

 

 

默認狀況下全部的單元格大小是均分的，能夠經過ColumnDefinition的Widht屬性來指定每一列的寬，經過RowDefinition的Height屬性來指定每一列的高。

Grid控件尺寸設置和其餘控件的尺寸設置不同，Grid尺寸設置主要支持下面三種：

一、  絕對尺寸：指定精確的單位大小。例如定義100個單位高度<RowDefinition Height=」100」 />  通常狀況下絕對尺寸在Grid中使用較少，由於指定以後便不能根據內容大小自動伸縮。

二、  自動內容尺寸：Grid尺寸的變化將給予行或列的子元素內容而定。在Xaml中一般使用Auto來指定。<RowDefinition Height=」Auto」/>

三、  按比例分配剩餘空間：這是默認設置，一般使用 * ，1*，2* 等樣式來指定的。按比例分配空間是指，當使用精確尺寸或自動內容尺寸分配以後，所剩的空間如何進行分配。 

這是一個相對單位，默認狀況下只有一個*。當有兩個列都設置爲*時，表示將其空間按比例各一半進行分配。若是一列指定爲2*。則平均分爲3份，*佔3分之一；2*佔3分之二。

  

使用不一樣尺寸定義方法定義Grid行高

<!---定義一個3行3列的表格-->

<Grid  ShowGridLines="True">

        <!--定義3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定義3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

 

        <Button Content="button1" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.Row="1" Grid.Column="1"/>

        <Button Content="button3" Grid.Row="2" Grid.Column="2"/>

    </Grid>

　　

 

合併行列

       合併單元格與HTML中table的合併單元格同樣，使用RowSpan合併行ColumnSpan合併列。

<!---定義一個3行3列的表格-->

    <Grid  ShowGridLines="True">

        <!--定義3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定義3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

 

        <Button Content="button1" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1"/>

        <Button Content="button3" Grid.Row="2" Grid.Column="2"/>

</Grid>

　　

窗體分割

        在Grid中，經過使用GridSplitter控件爲佈局添加一個窗體分隔條，使佈局能夠由用戶來調整其大小。GridSplitter必須放置在Grid控件中，在使用GridSplitter以前須要理解下面幾點：

一、  GridSplitter控件必須放置在一個Grid中，能夠與已經存在的內容放在一塊兒。爲了放置覆蓋已存在的內容，須要調整其Margin屬性。

二、  GridSplitter控件老是調整整個行或列的尺寸，而不是特定單元格的尺寸。

三、  GridSplitter的對齊屬性，好比HorizontalAlignment或VerticalAlignment屬性決定了分隔條能夠拖動的方向。當設置HorizontalAlignment爲Left時，則只能向左拖動分隔條，設置爲Center則能夠左右同時拖動。

窗體分割應用Demo

<!---定義一個3行3列的表格-->

    <Grid  ShowGridLines="True">

        <!--定義3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定義3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <!--垂直Splitter-->

        <GridSplitter Grid.Row="0"  Grid.Column="1" Width="10" HorizontalAlignment="Center" Background="Blue"  Grid.RowSpan="4"></GridSplitter>

        <!---水平Splitter-->

        <GridSplitter Grid.Row="1"  Grid.Column="0" Height="10"  HorizontalAlignment="Stretch" Background="Red" Grid.ColumnSpan="4"></GridSplitter>

 

        <Button Content="button1" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.Row="2" Grid.Column="2"/>

        <Button Content="button3" Grid.Row="3" Grid.Column="3"/>

    </Grid>

　　

 

UniformGrid

 　　UniformGrid控件是一個簡化版的Grid控件，使用該控件不須要定義行列。只須要指定Rows和Columns屬性便可，該控件會將全部的行列使用相同的尺寸。在添加子元素時不須要指定所在的行列，全部的子元素都是按從左到右的順序進行排列的。

<UniformGrid Rows="2" Columns="4">

        <Button Content="按鈕1" Background="Black" ></Button>

        <Button Content="按鈕2" Background="Red"></Button>

        <Button Content="按鈕3" Background="AntiqueWhite"></Button>

        <Button Content="按鈕4" Background="Aqua"></Button>

        <Button Content="按鈕5" Background="Aquamarine"></Button>

        <Button Content="按鈕6" Background="Azure"></Button>

        <Button Content="按鈕7" Background="Beige"></Button>

</UniformGrid>

　　

 

 

若是想讓子元素進行從右到左進行排列時只須要指定FlowDirection屬性爲RightToLeft便可。

  <UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft">

        <Button Content="按鈕1" Background="Black" ></Button>

        <Button Content="按鈕2" Background="Red"></Button>

        <Button Content="按鈕3" Background="AntiqueWhite"></Button>

        <Button Content="按鈕4" Background="Aqua"></Button>

        <Button Content="按鈕5" Background="Aquamarine"></Button>

        <Button Content="按鈕6" Background="Azure"></Button>

        <Button Content="按鈕7" Background="Beige"></Button>

    </UniformGrid>