Layouts

As classes de layout .NET Multi-platform App UI (.NET MAUI) permitem que você organize e agrupe controles de interface do usuário em seu aplicativo. A escolha de uma classe de layout requer conhecimento de como o layout posiciona seus elementos filho e como o layout dimensiona seus elementos filho. Além disso, pode ser necessário aninhar layouts para criar o layout desejado.

StackLayout

A StackLayout organiza elementos em uma pilha unidimensional, horizontal ou verticalmente. A Orientation propriedade especifica a direção dos elementos e a orientação padrão é Vertical. StackLayout é normalmente usado para organizar uma subseção da interface do usuário em uma página.

O XAML a seguir mostra como criar uma vertical StackLayout contendo três Label objetos:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Em um , se o tamanho de um StackLayoutelemento não estiver definido explicitamente, ele será expandido para preencher a largura disponível ou a altura se a Orientation propriedade estiver definida como Horizontal.

A StackLayout é frequentemente usado como um layout pai, que contém outros layouts filho. No entanto, um não deve ser usado para reproduzir um StackLayout Grid layout usando uma combinação de StackLayout objetos. O código a seguir mostra um exemplo dessa prática incorreta:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Isso é um desperdício porque cálculos de layout desnecessário são executados. Em vez disso, o layout desejado pode ser melhor alcançado usando um Gridarquivo .

Para obter mais informações, consulte StackLayout.

HorizontalStackLayout

A HorizontalStackLayout organiza exibições filho em uma pilha horizontal unidimensional e é uma alternativa mais eficiente a um StackLayoutarquivo . HorizontalStackLayout é normalmente usado para organizar uma subseção da interface do usuário em uma página.

O XAML a seguir mostra como criar um modo de HorizontalStackLayout exibição filho diferente:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

Em um , se o tamanho de um HorizontalStackLayoutelemento não estiver definido explicitamente, ele será expandido para preencher a altura disponível.

Para obter mais informações, consulte HorizontalStackLayout.

VerticalStackLayout

A VerticalStackLayout organiza exibições filho em uma pilha vertical unidimensional e é uma alternativa mais eficiente a um StackLayoutarquivo . VerticalStackLayout é normalmente usado para organizar uma subseção da interface do usuário em uma página.

O XAML a seguir mostra como criar um VerticalStackLayout contendo três Label objetos:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

Em um , se o tamanho de um VerticalStackLayoutelemento não estiver definido explicitamente, ele será expandido para preencher a largura disponível.

Para obter mais informações, consulte VerticalStackLayout.

Grid

A Grid é usado para exibir elementos em linhas e colunas, que podem ter tamanhos proporcionais ou absolutos. As linhas e colunas de uma grade são especificadas com as RowDefinitions propriedades e ColumnDefinitions .

Para posicionar elementos em células específicas Grid , use as Grid.Column propriedades e Grid.Row anexadas. Para fazer com que os elementos se estendam por várias linhas e colunas, use as Grid.RowSpan propriedades e Grid.ColumnSpan anexadas.

Observação

Um Grid layout não deve ser confundido com tabelas e não se destina a apresentar dados tabulares.

O XAML a seguir mostra como criar um Grid com duas linhas e duas colunas:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

Neste exemplo, o dimensionamento funciona da seguinte maneira:

• Cada linha tem uma altura explícita de 50 unidades independentes de dispositivo.
• A largura da primeira coluna é definida como Auto, e, portanto, é tão larga quanto necessário para seus filhos. Neste caso, são 200 unidades independentes de dispositivo de largura para acomodar a largura do primeiro Label.

O espaço pode ser distribuído dentro de uma coluna ou linha usando o dimensionamento automático, que permite que o tamanho das colunas e linhas se ajuste ao seu conteúdo. Isso é obtido definindo a altura de um , ou a largura de um RowDefinitionColumnDefinition, como Auto. O dimensionamento proporcional também pode ser usado para distribuir o espaço disponível entre as linhas e colunas da grade por proporções ponderadas. Isso é obtido definindo a altura de um , ou a largura de um , para um RowDefinitionColumnDefinitionvalor que usa o * operador.

Cuidado

Tente garantir que o menor número possível de linhas e colunas esteja definido para Auto o tamanho. Cada linha ou coluna dimensionada automaticamente fará o mecanismo de layout realizar cálculos de layout adicionais. Em vez disso, use linhas e colunas de tamanho fixo, se possível. Como alternativa, defina linhas e colunas para ocupar uma quantidade proporcional de espaço com o GridUnitType.Star valor de enumeração.

Para obter mais informações, consulte Grade.

FlexLayout

A FlexLayout é semelhante a a StackLayout na medida em que exibe elementos filho horizontalmente ou verticalmente em uma pilha. No entanto, um também pode envolver seus filhos se houver muitos para caber em uma única linha ou coluna, e também permite um FlexLayout controle mais granular do tamanho, orientação e alinhamento de seus elementos filho.

O XAML a seguir mostra como criar um FlexLayout que exibe suas exibições em uma única coluna:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

Neste exemplo, o layout funciona da seguinte maneira:

• A Direction propriedade é definida como Column, o que faz com que os filhos do FlexLayout sejam organizados em uma única coluna de itens.
• A AlignItems propriedade é definida como , o Centerque faz com que cada item seja centralizado horizontalmente.
• A JustifyContent propriedade é definida como SpaceEvenly, que aloca todo o espaço vertical restante igualmente entre todos os itens, e acima do primeiro item e abaixo do último item.

Para obter mais informações, consulte FlexLayout.

AbsoluteLayout

An AbsoluteLayout é usado para posicionar e dimensionar elementos usando valores explícitos ou valores relativos ao tamanho do layout. A posição é especificada pelo canto superior esquerdo da criança em relação ao canto superior esquerdo do AbsoluteLayout.

Um AbsoluteLayout deve ser considerado como um layout de propósito especial a ser usado apenas quando você pode impor um tamanho às crianças, ou quando o tamanho do elemento não afeta o posicionamento de outras crianças. Um uso padrão desse layout é criar uma sobreposição, que cobre a página com outros controles, talvez para proteger o usuário de interagir com os controles normais na página.

Importante

As HorizontalOptions propriedades e VerticalOptions não têm efeito sobre os filhos de um AbsoluteLayout.

Dentro de um , a propriedade anexada é usada para especificar a posição horizontal, a posição vertical, a largura e a AbsoluteLayout.LayoutBounds altura de um AbsoluteLayoutelemento. Além disso, a propriedade anexada AbsoluteLayout.LayoutFlags especifica como os limites de layout serão interpretados.

O XAML a seguir mostra como organizar elementos em um AbsoluteLayout:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

Neste exemplo, o layout funciona da seguinte maneira:

• Cada BoxView um recebe um tamanho explícito de 100x100 e é exibido na mesma posição, centralizado horizontalmente.
• O vermelho BoxView é girado 30 graus, e o verde BoxView é girado 60 graus.
• Em cada BoxView, a propriedade anexada é definida como PositionProportional, indicando que a posição é proporcional ao espaço restante depois que a largura e a AbsoluteLayout.LayoutFlags altura são contabilizadas.

Cuidado

Evite usar a AbsoluteLayout.AutoSize propriedade sempre que possível, pois isso fará com que o mecanismo de layout execute cálculos de layout adicionais.

Para obter mais informações, consulte AbsoluteLayout.

BindableLayout

A BindableLayout permite que qualquer classe de layout derivada da Layout classe gere seu conteúdo vinculando-se a uma coleção de itens, com a opção de definir a aparência de cada item com um DataTemplatearquivo .

Um layout vinculável é preenchido com dados definindo sua ItemsSource propriedade para qualquer coleção que implementa IEnumerablee anexando-a a uma Layoutclasse derivada. A aparência de cada item no layout vinculável pode ser definida definindo a propriedade anexada BindableLayout.ItemTemplate como um DataTemplatearquivo .

O XAML a seguir mostra como vincular um a uma coleção de itens e definir sua aparência com um StackLayout DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Os layouts vinculáveis só devem ser usados quando a coleção de itens a serem exibidos for pequena e a rolagem e a seleção não forem necessárias.

Para obter mais informações, consulte BindableLayout.

Layouts personalizados

No .NET MAUI, as classes de layout derivam da classe abstrata Layout . Essa classe delega o layout e a medição entre plataformas a uma classe de gerenciador de layout. Cada classe do gerenciador de layout implementa a ILayoutManager interface, que especifica que Measure e ArrangeChildren as implementações devem ser fornecidas:

• A Measure implementação chama IView.Measure cada modo de exibição no layout e retorna o tamanho total do layout dadas as restrições.
• A ArrangeChildren implementação determina onde cada modo de exibição deve ser colocado dentro dos limites do layout e chama Arrange cada modo de exibição com seus limites apropriados. O valor de retorno é o tamanho real do layout.

Os layouts do .NET MAUI têm gerenciadores de layout predefinidos para lidar com seu layout. No entanto, às vezes é necessário organizar o conteúdo da página usando um layout que não é fornecido pelo .NET MAUI. Isso pode ser alcançado escrevendo seu próprio layout personalizado. Para obter mais informações, consulte Layouts personalizados.

Transparência de entrada

Cada elemento visual tem uma InputTransparent propriedade vinculável que é usada para definir se o elemento pode receber entrada. Seu valor padrão é false, garantindo que o elemento possa receber entrada. Quando essa propriedade está true em um elemento, o elemento não receberá nenhuma entrada. Em vez disso, a entrada será passada para todos os elementos que estão visualmente por trás do elemento.

A Layout classe, da qual todos os layouts derivam, tem uma CascadeInputTransparent propriedade vinculável que controla se os elementos filho herdam a transparência de entrada do layout. Seu valor padrão é true, garantindo que a configuração da InputTransparent propriedade como true em uma classe de layout resultará em todos os elementos dentro do layout não recebendo nenhuma entrada.