次の方法で共有

UniformItemsLayout

  • [アーティクル]

UniformItemsLayout は、すべての行と列のサイズが同じレイアウトです。

UniformItemsLayout のビルド

UniformItemsLayout は XAML または C# で作成できます。

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>

UniformItemsLayout の使用

<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:UniformItemsLayout>
        <BoxView BackgroundColor="Blue" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Yellow" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Red" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Black" HeightRequest="25" WidthRequest="25"/>
    </toolkit:UniformItemsLayout>
    
</ContentPage>

C#

using CommunityToolkit.Maui.Views;

var page = new ContentPage
{
    Content = new UniformItemsLayout
    {
        Children = 
        {
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Blue },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Yellow },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Red },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Black }
        }
    }
};

UniformItemsLayout のカスタマイズ

UniformItemsLayout では、列と行の最大数を制限できます。

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:UniformItemsLayout MaxRows="1" MaxColumns="1">
        <BoxView BackgroundColor="Blue" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Yellow" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Red" HeightRequest="25" WidthRequest="25"/>
        <BoxView BackgroundColor="Black" HeightRequest="25" WidthRequest="25"/>
    </toolkit:UniformItemsLayout>
    
</ContentPage>

C#

using CommunityToolkit.Maui.Views;

var page = new ContentPage
{
    Content = new UniformItemsLayout
    {
        MaxRows = 1,
        MaxColumns = 1,
        Children = 
        {
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Blue },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Yellow },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Red },
            new BoxView { HeightRequest = 25, WidthRequest = 25, BackgroundColor = Colors.Black }
        }
    }
};

Properties

プロパティ タイプ 説明
MaxColumns int 行内の項目の最大数を取得または設定します。
MaxRows int 列内の項目の最大数を取得または設定します。

例

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

API

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