DockLayout

[アーティクル]
03/13/2024

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

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

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

ここに示すように、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#

ここに示すように、C# で DockLayout を簡単に構築できます。

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>

Properties

プロパティ	タイプ	説明
`Padding`	`Thickness`	レイアウトコンテナーの周囲のパディング (`Layout` から継承) を取得または設定します。
`HorizontalSpacing`	`double`	ドッキングされたビュー間の水平間隔を取得または設定します。
`VerticalSpacing`	`double`	ドッキングされたビュー間の垂直間隔を取得または設定します。
		`HorizontalSpacing` と `VerticalSpacing` は、`DockLayout` 内の隣接するビュー間で適用されます。たとえば、`HorizontalSpacing` は、Left、None、および Right ビューの間に追加されますが、同じ `DockPosition` 内の隣接するビュー (Left にドッキングされた複数のビューなど) 間にも追加されます。 `VerticalSpacing` は、Top、None、Bottom の位置の垂直方向に積み上げられたビューの間でレンダリングされます。
`ShouldExpandLastChild`	`bool`	true の場合、最後の子が拡張され、残りの領域が埋められます (既定値: `true`)。

追加メモ

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

例

DockLayout 機能の動作例は、.NET MAUI Community Toolkit サンプルアプリケーションにあります。

API

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

次の方法で共有