Resumo do Capítulo 17. Domínio da grade
Baixar o exemploObservaçã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 mecanismo de layout poderoso 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 preenchimento das RowDefinitions coleções e ColumnDefinitions dos Grid objetos com RowDefinition e ColumnDefinition . É assim que você estabelece o número de linhas e colunas do Gride suas propriedades.
RowDefinition tem uma Height propriedade e ColumnDefinition tem uma Width propriedade, ambas do tipo GridLength, uma estrutura .
Em XAML, o converte cadeias GridLengthTypeConverter 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 do dispositivo (um número em XAML)Auto— a altura ou largura é dimensionada automaticamente com base no conteúdo da célula ("Automático" em XAML)Star— a altura ou a largura restantes são alocadas proporcionalmente (um número com "*", chamado star, em XAML)
Cada filho do Grid também deve receber uma linha e uma coluna (explicitamente ou implicitamente). Intervalos de linhas e intervalos de coluna são opcionais. Todos eles são especificados usando propriedades associáveis anexadas — propriedades definidas pelo Grid , mas definidas em filhos do Grid. Grid define quatro propriedades associáveis anexadas estáticas:
RowProperty— a linha baseada em zero; o padrão é 0ColumnProperty— a coluna baseada em zero; o padrão é 0RowSpanProperty— o número de linhas que o filho abrange; o padrão é 1ColumnSpanProperty— o número de colunas que o filho abrange; o padrão é 1
No código, um programa pode usar oito métodos estáticos para definir e obter estes valores:
Grid.SetRoweGrid.GetRowGrid.SetColumneGrid.GetColumnGrid.SetRowSpaneGrid.GetRowSpanGrid.SetColumnSpaneGrid.GetColumnSpan
No XAML, você usa os seguintes atributos para definir esses valores:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
O exemplo SimpleGridDemo demonstra como criar e inicializar 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 as 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 Grid cria linhas e colunas para os filhos e fornece a Grid todos eles um padrão GridLength de "*" (star).
A Grade no código
O exemplo GridCodeDemo demonstra como criar e popular um Grid no código. Você pode definir as propriedades anexadas para cada filho diretamente ou indiretamente chamando métodos adicionaisAdd, como Add definidos pela interface T Grid.IGridList<>.
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 BoxView um pode ser controlada para se assemelhar a um gráfico de barras.
O Grid no exemplo GridBarChart compartilha um AbsoluteLayout pai com um inicialmente invisível Frame. O programa também define um TapGestureRecognizer em cada BoxView para 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 os filhos em uma Grid célula.
O exemplo SpacingButtons é igualmente elementos de espaços Button centralizados em Grid células.
Divisórias e bordas de células
O Grid não inclui um recurso que desenha divisórias ou bordas de células. No entanto, você pode fazer o seu próprio.
O GridCellDividers demonstra como definir linhas e colunas adicionais especificamente para elementos finos BoxView imitarem linhas divisórias.
O programa GridCellBorders não cria células adicionais, mas alinha elementos BoxView 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 alterações de orientação
O Grid pode ajudar a estruturar um programa para responder a alterações 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 à paisagem.
O programa inicializa elementos Slider 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 do .NET para hexadecimal funciona apenas com inteiros, uma DoubleToIntConvert classe na Xamarin.Formsbiblioteca Book.Toolkit ajuda.