A opção Expands

Você provavelmente notou que as propriedades HorizontalOptions e VerticalOptions são plurais, como se houvesse mais que uma opção. Essas propriedades são geralmente definidas como um campo estático da estrutura LayoutOptions – outro plural.

As discussões até agora se concentraram nos seguintes campos LayoutOptions somente leitura estáticos que retornam valores predefinidos de LayoutOptions:

• LayoutOptions.Start
• LayoutOptions.Center
• LayoutOptions.End
• LayoutOptions.Fill

O padrão – estabelecido pela classe View – é LayoutOptions.Fill, o que quer dizer que as views preenchem o recipiente.

Como você viu, um VerticalOptions definido na Label não faz diferença quando a Label é um filho de um StackLayout vertical. O próprio StackLayout restringe a altura dos seus filhos para apenas a altura de que necessitam, para que o filho não tenha liberdade para se mover verticalmente dentro desse espaço.

Esteja preparado para esta regra ser ligeiramente alterada!

A estrutura LayoutOptions tem quatro campos estáticos adicionais somente leitura ainda não discutidos:

• LayoutOptions.StartAndExpand
• LayoutOptions.CenterAndExpand
• LayoutOptions.EndAndExpand
• LayoutOptions.FillAndExpand

LayoutOptions também define duas propriedades instância nomeadas Alignment e Expands. As quatro instâncias de LayoutOptions devolvidas pelos campos estáticos que terminam com AndExpand todos têm a propriedade Expands definido como true. Essa propriedade Expands pode ser muito útil para gerenciar o layout da página, mas pode ser confuso ao primeiro encontro. Estes são os requisitos para que Expands possa desempenhar um papel num StackLayout vertical:

• O StackLayout vertical deve ter uma altura que é menor do que a altura do seu recipiente. Em outras palavras, algum espaço vertical adicional não utilizado deve existir no StackLayout
• Essa primeira exigência implica que o StackLayout vertical não pode ter sua própria propriedade VerticalOptions definida como Start, Center ou End, porque isso faria com que o StackLayout tivesse uma altura igual à altura total dos seus filhos e não teria espaço extra.
• Pelo menos um filho do StackLayout deve ter um VerticalOptions definido com a propriedade Expands como true.

Se essas condições forem satisfeitas, o StackLayout aloca o espaço vertical adicional igualmente entre os filhos que tem um VerticalOptions definido com a propriedade Expands igual a true. Cada um destes filhos recebe um espaço maior no StackLayout do que o normal. Como o filho ocupa aquele espaço depende da propriedade Alignment ser definida como: Start, Center, End ou Fill.

Aqui está um programa, nomeado VerticalOptionsDemo, que usa reflecção para criar objetos Label com todas as possíveis configurações do VerticalOptions em um StackLayout vertical. O fundo e as cores de primeiro plano são alternados para que você possa ver exatamente quanto espaço cada Label ocupa. O programa usa a Language Integrated Query (LINQ) para classificar os campos da estrutura LayoutOptions em uma forma visualmente mais esclarecedora:

Você pode querer estudar os resultados um pouco:

As Label views com texto amarelo em fundos azuis são aquelas com propriedades VerticalOptions, ajustadas para valores LayoutOptions sem a flag Expands. Se a flag Expands não está definido no valor da LayoutOptions de um item em uma StackLayout vertical, a configuração VerticalOptions é ignorada. Como visto, a Label ocupa apenas a quantidade de espaço vertical necessária na StackLayout.

A altura total dos filhos neste StackLayout é menor do que a altura do StackLayout, assim o StackLayout tem espaço extra. Ele contém quatro filhos com suas propriedades VerticalOptions definidas para o valor da LayoutOptions com a flag Expands, assim, este espaço extra é alocado igualmente entre aqueles quatro filhos.

Nestes quatro casos - a Label View com texto em azul e cor de fundo em amarelo - a propriedade Alignment de LayoutOptions indica como o filho está alinhado dentro da área que inclui a espaço extra. O primeiro - com a propriedade VerticalOptions definido para LayoutOptions.StartAndExpand - está acima deste espaço extra. A segunda (CenterAndExpand) está no meio do espaço extra. O terceiro (EndAndExpand) abaixo do espaço extra. No entanto, em todos estes três casos, a Label está recebendo apenas o espaço vertical necessário, como indicado pela cor de fundo. O resto do espaço pertence à StackLayout, que mostra a cor de fundo da página.

A última Label tem sua propriedade VerticalOptions definida para LayoutOptions.FillAndExpand. Nesse caso, a Label ocupa toda a área, incluindo o espaço extra, como a grande área do fundo amarelo indica. O texto está na parte superior desta área; isto porque a configuração padrão de YAlign é TextAlignment.Start. Defina-o para outra coisa para posicionar o texto verticalmente dentro da área.

A propriedade Expands da LayoutOptions desempenha um papel apenas quando é uma filha de um StackLayout. Em outros contextos, ela é supérfula.