WPF開發快速入門【1】WPF的佈局

概述

本文描述幾款WPF中常用的佈局控制項。

Grid

Grid是WPF最常用的佈局控制項。 它把面板分割為固定長和寬的網格，子控制項就放置在網格內。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
    </Grid>

Grid控制項有兩個顯著的特點：

1、行高和列寬可以設定為固定值，也可以按比例分配；

2、可以跨行或跨列。

StackPanel

StackPanel按順序依次排列控制項，通過Orientation="Horizontal"或Orientation="Vertical"來控制列表的方向。 

    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Hello"/>
    </StackPanel>

GridSplitter

通過GridSplitter可以調整兩個網格的寬度或高度。 

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" MinWidth="150"/>
                    <ColumnDefinition Width="3"/>
                    <ColumnDefinition Width="2*" MinWidth="200"/>
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0" Background="WhiteSmoke"/>
                <GridSplitter Grid.Column="1" Background="CornflowerBlue"/>
                <Grid Grid.Column="2" Background="LightGray" />
            </Grid>

GridSplitter的寬度和顏色都可以設置。

DockPanel

DockPanel控制項可以在主要的顯示面板周五顯示可以停靠的面板。 

            <DockPanel>
                <Grid Width="200" DockPanel.Dock="Left" Background="SeaGreen" Visibility="{Binding LeftVisibility}"/>
                <Grid Width="200" DockPanel.Dock="Right" Background="Orchid" Visibility="{Binding RightVisibility}"/>
                <Grid  Background="Silver">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" Content="Left" Width="80" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5"
                            Command="{s:Action LeftClick}"/>
                    <Button Grid.Column="2" Content="Right" Width="80" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5"
                            Command="{s:Action RightClick}"/>
                </Grid>
            </DockPanel>

需要註意的是，主面板一定要放在最後描述。通過下麵代碼可以顯示或隱藏Dock面板： 

    public class PageLayoutViewModel : Screen
    {
        public bool IsLeftShow { get; set; } = true;
        public bool IsRightShow { get; set; } = true;

        public Visibility LeftVisibility => IsLeftShow ? Visibility.Visible : Visibility.Collapsed;
        public Visibility RightVisibility => IsRightShow ? Visibility.Visible : Visibility.Collapsed;

        public void LeftClick()
        {
            IsLeftShow = !IsLeftShow;
        }

        public void RightClick()
        {
            IsRightShow = !IsRightShow;
        }
    }

DockPanelSplitter

有沒有既可以停靠又可以調整寬度的面板呢？官方沒有提供，但git上有。

下載地址：JVimes/DockPanelSplitter: Like WPF's GridSplitter, but for DockPanel instead of Grid. (github.com)

資源

系列目錄：WPF開發快速入門【0】前言與目錄 

代碼下載：Learn WPF: WPF學習筆記 (gitee.com)