WPF學習筆記 - 11 WPF Pannels - Grid, GridSplitter, UniformGrid

Grid

是最複雜的一個Panel，可以切割為許多的rows和columns，

需要設定每個rows和columns的百分比，

當許要複雜的格式，或是組合各個Panel可以使用

切成左右兩邊

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

</Grid>

此時兩個Button各會填滿左右兩邊，如果不希望這種情況發生，可以增加屬性來控制

<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>

<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>

建一個3*3的表格

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="2*" />

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="2*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Column="2">Button 3</Button>

<Button Grid.Row="1">Button 4</Button>

<Button Grid.Column="1" Grid.Row="1">Button 5</Button>

<Button Grid.Column="2" Grid.Row="1">Button 6</Button>

<Button Grid.Row="2">Button 7</Button>

<Button Grid.Column="1" Grid.Row="2">Button 8</Button>

<Button Grid.Column="2" Grid.Row="2">Button 9</Button>

</Grid>

值得注意的是Width="2*"，代表這個control是Width="*"control的兩倍大(* = 1*)

在Grid裡有一種指定大小的方法

1. * - 會隨著其他control的大小，自動變化

2. Auto - 隨著control的內容，自動變化

3. 設定絕對的大小

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="100" />

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2 with long text</Button>

<Button Grid.Column="2">Button 3</Button>

</Grid>

使用ColumnSpan或RowSpan跨欄

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>

</Grid>

此為Two Rows、Two Columns的表格，可以發現第二個Row的button整個填滿了整個Row，

因為使用了Grid.ColumnSpan="2"

GridSplitter

可以讓使用者自行用滑鼠拉動，調整大小

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="5" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>

<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />

<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>

</Grid>

一個簡單的留言版面

<Grid Margin="10">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Label>Name:</Label>

<TextBox Grid.Column="1" Margin="0,0,0,10" />

<Label Grid.Row="1">E-mail:</Label>

<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />

<TextBox Grid.Row="2" Grid.ColumnSpan="2" AcceptsReturn="True" />

</Grid>

UniformGrid

與Grid相同，但每個rows和columns都是相同的size

WPF學習筆記 - 10 WPF Pannels - Canvas, StackPanel, DockPanel

Canvas

模仿WinForm的方式，以Canvas的左邊和上面為基準點，canvas預設不會幫你做任何的配置，

只要沒有指定control的位置，就是對齊左上角，且不會隨著視窗的大小變動，

除非你想要一個固定、不被視窗大小影響的配置才會使用，

或是照字面上說明，它就是個畫布，方便你在上面畫畫~~

一個簡單的用法，四個按鈕分別在左上、左下、右上、右下

<Canvas>

                <Button Canvas.Left="10">Top left</Button>

                <Button Canvas.Right="10">Top right</Button>

                <Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>

                <Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>

</Canvas>

配合Z-Index，畫出個簡單的符號(Z-Index預設為0)

<Canvas>

        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />

        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />

        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />

        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />

</Canvas>

WrapPanel

control會照順序排列(預設是平行排列horizontally)，直到第一行排不下，

會自動換新行，繼續排列下去，且高度會配合同一行中最高的control來做變化，寬度不會影響，

(如果Orientation="Vertical"就是配合每一排中最寬的寬度來變化，高度不會影響)

StackPanel

類似WrapPanel，每個control會接著上一個control排列下去，

差別在於StackPanel底下的每個control的大小都是最大的，

預設Orientation="Vertical"，所以每個control的寬度都跟視窗等長

需要注意一下Orientation會影響排列的方式

 <StackPanel Orientation="Horizontal">

                <Button VerticalAlignment="Top">Button 1</Button>

                <Button VerticalAlignment="Center">Button 2</Button>

                <Button VerticalAlignment="Bottom">Button 3</Button>

                <Button VerticalAlignment="Bottom">Button 4</Button>

                <Button VerticalAlignment="Center">Button 5</Button>

                <Button VerticalAlignment="Top">Button 6</Button>

</StackPanel>

<StackPanel Orientation="Vertical">

                <Button HorizontalAlignment="Left">Button 1</Button>

                <Button HorizontalAlignment="Center">Button 2</Button>

                <Button HorizontalAlignment="Right">Button 3</Button>

                <Button HorizontalAlignment="Right">Button 4</Button>

                <Button HorizontalAlignment="Center">Button 5</Button>

                <Button HorizontalAlignment="Left">Button 6</Button>

</StackPanel>

DockPanel

可以設定dock位置，來指定control要貼齊哪一邊，

最後一個control不需要指定Dock，它會自動補滿剩下的空位，

通常會用在需要切割視窗的時候…例如要分為左、右兩欄

值得注意的是control設定dock的順序，將會影響control的配置，

例如，第一個control設Dock="Left"，它將填滿左邊，

當第二個control設Dock="Top"時，左邊欄已經被佔據了

<DockPanel>

                <Button DockPanel.Dock="Left">Left</Button>

                <Button DockPanel.Dock="Top">Top</Button>

                <Button DockPanel.Dock="Right">Right</Button>

                <Button DockPanel.Dock="Bottom">Bottom</Button>

                <Button>Center</Button>

</DockPanel>

與

<DockPanel>

                <Button DockPanel.Dock="Top" Height="50">Top</Button>

                <Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>

                <Button DockPanel.Dock="Left" Width="50">Left</Button>

                <Button DockPanel.Dock="Right" Width="50">Right</Button>       

                <Button>Center</Button>

</DockPanel>

會有些差別

最後，如果你不希望最後一個control補滿視窗，則可以設定<DockPanel LastChildFill="False">，

最後一個control就會照著你設定的dock配置

WPF學習筆記 - 9 WPF Pannels介紹

Canvas

模仿WinForm的方式，所有的control都是絕對路徑，以Canvas的左邊和上面為基準點，

除非你希望control的位置都是固定的，不隨著視窗的大小變動，否則很少使用

WrapPanel

control會照順序排列(預設是平行排列horizontally)，直到第一行排不下，

會自動換新行，繼續排列下去

StackPanel

類似WrapPanel，每個control會接著上一個control排列下去，

差別在於StackPanel底下的每個control的大小都是最大的，

預設Orientation="Vertical"，所以每個control的寬度都跟視窗等長

DockPanel

可以設定dock位置，來指定control要貼齊哪一邊，最後一個control則會補滿剩下的空位，

通常會用在需要切割視窗的時候…例如要分為左、右兩欄

Grid

是最複雜的一個Panel，可以切割為許多的rows和columns，

需要設定每個rows和columns的百分比，

當許要複雜的格式，或是組合各個Panel可以使用

UniformGrid

與Grid相同，但每個rows和columns都是相同的size