Sdílet prostřednictvím

UniformItemsLayout

  • Článek

Jedná se UniformItemsLayout o rozložení, ve kterém mají všechny řádky a sloupce stejnou velikost.

Sestavení UniformItemsLayout

Můžete ho UniformItemsLayout vytvořit v JAZYCE XAML nebo C#:

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

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

Použití 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 }
        }
    }
};

Přizpůsobení UniformItemsLayout

Umožňuje UniformItemsLayout omezit maximální počet sloupců a řádků:

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

Vlastnosti

Vlastnost Type Popis
MaxColumns int Získá nebo nastaví maximální počet položek v řádku.
MaxRows int Získá nebo nastaví maximální počet položek ve sloupci.

Příklady

Příklad této funkce najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód UniformItemsLayout najdete v úložišti .NET MAUI Community Toolkit na GitHubu.