DockLayout

發行項
11/11/2023

DockLayout 是可停駐到版面配置容器兩側的版面配置。

下圖顯示的概念結構。DockLayout 子檢視停駐在 4 個可能的停駐位置之一：上、下、左或右（相當於 DockPosition.Top、 DockPosition.Bottom、 DockPosition.Left和 DockPosition.Right）。未明確停駐的檢視會顯示在中央（或DockPosition.None位於上 / 下方和左右 / 位置之間）。

DockLayout concept

建置 DockLayout

下列各節涵蓋如何在 C# 和 XAML 中使用 DockLayout 。

XAML

包含 XAML 命名空間

若要在 XAML 中使用工具組，必須將下列專案 xmlns 新增至您的頁面或檢視：

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

因此，下列專案：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

將修改為包含 xmlns ，如下所示：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

使用 DockLayout

基本 DockLayout 可以在 XAML 中建立，如下所示：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout>
        <Button toolkit:DockLayout.DockPosition="Top" Text="Top" HeightRequest="50" />
        <Button toolkit:DockLayout.DockPosition="Bottom" Text="Bottom" HeightRequest="70" />
        <Button toolkit:DockLayout.DockPosition="Left" Text="Left" WidthRequest="80" />
        <Button toolkit:DockLayout.DockPosition="Right" Text="Right" WidthRequest="90" />
        <Button Text="Center" />
    </toolkit:DockLayout>
    
</ContentPage>

針對左 / 右停駐， WidthRequest 應該指定。在 [上 / 下方停駐] 中HeightRequest，定義沿著停駐方向的子檢視大小。主管一律會隱含 DockLayout 計算正交方向。

C#

DockLayout可以在 C# 中方便建構，如下所示：

using CommunityToolkit.Maui.Layouts;

var page = new ContentPage
{
    Content = new DockLayout
    {
        { new Button { Text = "Top", HeightRequest = 50 }, DockPosition.Top },
        { new Button { Text = "Bottom", HeightRequest = 70 }, DockPosition.Bottom },
        { new Button { Text = "Left", WidthRequest = 80 }, DockPosition.Left },
        { new Button { Text = "Right", WidthRequest = 90 }, DockPosition.Right },
        { new Button { Text = "Center" } },
    }
};

注意： DockPosition.None 是預設值，可以省略。

設定停駐位置

若要從 C# 設定停駐位置，請使用 DockLayout.SetDockPosition(IView, DockPosition) 來套用附加 DockPosition 屬性。

var button = new Button { Text = "Top", HeightRequest = 50 };
DockLayout.SetDockPosition(button, DockPosition.Top);

自訂 DockLayout

容器 DockLayout 支援任意 Padding 和數 DockLayout個自定義特定屬性。以下是 XAML 中具有所有可用選項的範例：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout HeightRequest="400"
                    WidthRequest="600"
                    Padding="10,20,30,40"
                    VerticalSpacing="10"
                    HorizontalSpacing="15"
                    ShouldExpandLastChild="False">
        ...
    </toolkit:DockLayout>
    
</ContentPage>

屬性

屬性	類型	描述
`Padding`	`Thickness`	取得或設定配置容器周圍的邊框間距（繼承自 `Layout`）。
`HorizontalSpacing`	`double`	取得或設定停駐檢視之間的水準間距。
`VerticalSpacing`	`double`	取得或設定停駐檢視之間的垂直間距。
		`HorizontalSpacing` 和 `VerticalSpacing` 會在中的 `DockLayout`鄰近檢視之間套用。例如，`HorizontalSpacing`會在 Left、None 和 Right 檢視之間加入，但也會在相鄰檢視之間新增，例如停駐在 Left 的多個檢視`DockPosition`。 `VerticalSpacing`會在 Top、None 和 Bottom 位置的垂直堆疊檢視之間呈現。
`ShouldExpandLastChild`	`bool`	如果為 true，則會展開最後一個子系以填滿剩餘的空間（預設值： `true`）。

其他注意事項

如果在DockLayout空間限制的位置使用（特別是透過或 WidthRequest 容器指定的HeightRequest大小），優先順序是由子檢視加入DockLayout容器的順序來指定。因此，每當沒有足夠的空間可轉譯所有子檢視時，轉譯時將會移除最低優先順序子系（最後新增的子系）。基於這個理由，您應該一律檢查容器的大小至少涵蓋其所有子檢視的大小下限。

範例

您可以在 .NET MAUI Community Toolkit 範例應用程式中找到作用中的功能範例DockLayout。

API

您可以在 DockLayout 和 DockLayoutManager 的 .NET MAUI Community Toolkit GitHub 存放庫上找到的原始程式碼DockLayout。

共用方式為