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配置