DockLayout

DockLayout は、レイアウト コンテナーの側面にビューをドッキングできるレイアウトです。

次の図は、 DockLayout がどのように概念的に構造化されているかを示しています。 子ビューは、 上、 下、 左 、 または右 の 4 つのドッキング位置のいずれかにドッキングされます ( DockPosition.Top、 DockPosition.Bottom、 DockPosition.Left、 DockPosition.Rightと同じです)。 明示的にドッキングされていないビュー (または DockPosition.None) は、中央 (または Top / Bottom と Left / Right 位置の間) に表示されます。

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 の使用

次に示すように、XAML で基本的な DockLayout を作成できます。

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

Left / Right ドッキングの場合は、WidthRequestを指定する必要があります。 Top / Bottom ドッキングの場合、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>

プロパティ

追加メモ

DockLayoutが空間的に制約された場所 (特に、HeightRequestまたはコンテナーのWidthRequestで指定されたサイズ) で使用される場合、子ビューがDockLayout コンテナーに追加される順序によって優先順位が与えられます。 したがって、すべての子ビューをレンダリングするための十分な領域がない場合は常に、レンダリング時に最も優先度の低い子 (最後に追加された子) が削除されます。 そのため、コンテナーのサイズが少なくともすべての子ビューの最小サイズをカバーしていることを常に確認する必要があります。

例示

DockLayout 機能の例は、.NET MAUI Community Toolkit サンプル アプリケーションで確認できます。

API

DockLayoutのソース コードは、.NET MAUI Community Toolkit GitHub リポジトリDockLayout および DockLayoutManager にあります。