UniformItemsLayout

Le UniformItemsLayout est une disposition où toutes les lignes et colonnes ont la même taille.

Création d’un UniformItemsLayout

Un UniformItemsLayout peut être créé en XAML ou en C# :

XAML

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

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

Par conséquent, ce qui suit :

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

Serait modifié pour inclure le xmlns de la manière suivante :

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

Utilisation de 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 }
        }
    }
};

Personnalisation d’un UniformItemsLayout

Une UniformItemsLayout option permet de limiter le nombre maximal de colonnes et de lignes :

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

Propriétés

Exemples

Vous trouverez un exemple de cette fonctionnalité en action dans l’exemple d’application .NET MAUI Community Toolkit.

API

Vous trouverez le code source de UniformItemsLayout sur le dépôt .NET MAUI Community Toolkit GitHub.