Resumo do Capítulo 17. Domínio da grade
Observação
Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.
O Grid
é um poderoso mecanismo de layout que organiza seus filhos em linhas e colunas de células. Ao contrário do elemento HTML table
semelhante, o Grid
é apenas para fins de layout em vez de apresentação.
A grade básica
Grid
deriva de Layout<View>
, que define uma Children
propriedade que Grid
herda. Você pode preencher essa coleção em XAML ou código.
A grade em XAML
A definição de um Grid
em XAML geralmente começa com o RowDefinitions
Grid
preenchimento das coleções e ColumnDefinitions
dos objetos com RowDefinition
e ColumnDefinition
. É assim que você estabelece o número de linhas e colunas do Grid
, e suas propriedades.
RowDefinition
tem uma Height
propriedade e ColumnDefinition
tem uma Width
propriedade, ambas do tipo GridLength
, uma estrutura.
Em XAML, o converte GridLengthTypeConverter
cadeias de caracteres de texto simples em GridLength
valores. Nos bastidores, o GridLength
construtor cria o GridLength
valor com base em um número e um valor do tipo GridUnitType
, uma enumeração com três membros:
Absolute
— a largura ou altura é especificada em unidades independentes de dispositivo (um número em XAML)Auto
— a altura ou largura é dimensionada automaticamente com base no conteúdo da célula ("Auto" em XAML)Star
— a altura ou largura restante é alocada proporcionalmente (um número com "*", chamado estrela, em XAML)
A cada filho do Grid
também deve ser atribuída uma linha e coluna (explícita ou implicitamente). Extensões de linha e extensões de coluna são opcionais. Todos eles são especificados usando propriedades vinculáveis anexadas — propriedades que são definidas pelo mas definidas em Grid
filhos do Grid
. Grid
define quatro propriedades vinculáveis anexadas estáticas:
RowProperty
— a linha de base zero; o padrão é 0ColumnProperty
— a coluna de base zero; o padrão é 0RowSpanProperty
— o número de fileiras que a criança abrange; o padrão é 1ColumnSpanProperty
— o número de colunas que a criança abrange; o padrão é 1
No código, um programa pode usar oito métodos estáticos para definir e obter esses valores:
Grid.SetRow
eGrid.GetRow
Grid.SetColumn
eGrid.GetColumn
Grid.SetRowSpan
eGrid.GetRowSpan
Grid.SetColumnSpan
eGrid.GetColumnSpan
Em XAML, você usa os seguintes atributos para definir esses valores:
Grid.Row
Grid.Column
Grid.RowSpan
Grid.ColumnSpan
O exemplo SimpleGridDemo demonstra a criação e inicialização de um Grid
em XAML.
O Grid
herda a Padding
propriedade de Layout
e define duas propriedades adicionais que fornecem espaçamento entre as linhas e colunas:
RowSpacing
tem um valor padrão de 6ColumnSpacing
tem um valor padrão de 6
As RowDefinitions
coleções e ColumnDefinitions
não são estritamente necessárias. Se ausente, o cria Grid
linhas e colunas para as Grid
crianças e dá a todas elas um padrão GridLength
de "*" (estrela).
A grade no código
O exemplo GridCodeDemo demonstra como criar e preencher um Grid
código in. Você pode definir as propriedades anexadas para cada filho diretamente ou indiretamente chamando métodos adicionais Add
, como Add
definido pela interface Grid.IGridList<T> .
O gráfico de barras de grade
O exemplo GridBarChart mostra como adicionar vários BoxView
elementos a um Grid
usando o método em massa AddHorizontal
. Por padrão, esses BoxView
elementos têm largura igual. A altura de cada um BoxView
pode então ser controlada para se assemelhar a um gráfico de barras.
O Grid
exemplo em GridBarChart compartilha um AbsoluteLayout
pai com um Frame
arquivo . O programa também define um em cada BoxView
para TapGestureRecognizer
usar o Frame
para exibir informações sobre a barra tocada.
Alinhamento na grade
O exemplo GridAlignment demonstra como usar as VerticalOptions
propriedades e HorizontalOptions
para alinhar filhos em uma Grid
célula.
O exemplo SpacingButtons igualmente espaça Button
elementos centralizados em Grid
células.
Divisores e bordas celulares
O Grid
não inclui um recurso que desenha divisores de células ou bordas. No entanto, você pode fazer o seu.
O GridCellDividers demonstra como definir linhas e colunas adicionais especificamente para elementos finos BoxView
para imitar linhas divisórias.
O programa GridCellBorders não cria células adicionais, mas alinha BoxView
elementos em cada célula para imitar uma borda de célula.
Exemplos de grade quase reais
O exemplo KeypadGrid usa um Grid
para exibir um teclado:
Respondendo a mudanças de orientação
O Grid
pode ajudar a estruturar um programa para responder a mudanças de orientação. O exemplo GridRgbSliders demonstra uma técnica que move um elemento entre uma segunda linha de um telefone orientado a retrato e a segunda coluna de um telefone orientado a paisagem.
O programa inicializa Slider
elementos para um intervalo de 0 a 255 e usa associações de dados para exibir o valor dos controles deslizantes em hexadecimal. Como os Slider
valores são de ponto flutuante e a cadeia de caracteres de formatação .NET para hexadecimal só funciona com inteiros, uma DoubleToIntConvert
classe na Xamarin.Formsbiblioteca Book.Toolkit ajuda.