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 RowDefinitionsGrid 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.SetRoweGrid.GetRowGrid.SetColumneGrid.GetColumnGrid.SetRowSpaneGrid.GetRowSpanGrid.SetColumnSpaneGrid.GetColumnSpan
Em XAML, você usa os seguintes atributos para definir esses valores:
Grid.RowGrid.ColumnGrid.RowSpanGrid.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:
RowSpacingtem um valor padrão de 6ColumnSpacingtem 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 Framearquivo . 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.