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, e não 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 preenchimento das coleções e ColumnDefinitions dos Grid objetos with ColumnDefinition RowDefinition. É 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)
Cada filho do Grid também deve receber uma linha e uma coluna (explícita ou implicitamente). Intervalos de linha e intervalo de coluna são opcionais. Todas elas são especificadas usando propriedades vinculáveis anexadas — propriedades que são definidas pelo Grid conjunto but em filhos do Grid. Grid Define quatro propriedades vinculá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 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 a inicialização de um Grid arquivo em XAML.
O Grid herda a Padding propriedade e Layout 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 Grid cria linhas e colunas para os Grid filhos e dá a todos eles 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 direta ou indiretamente chamando métodos adicionais, como definido pela interface T> Grid.IGridList<.Add Add
O gráfico de barras de grade
O exemplo GridBarChart mostra como adicionar vários BoxView elementos a um Grid usando o método bulk 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 no GridBarChart compartilha um AbsoluteLayout pai com um Frame. O programa também define um em cada um TapGestureRecognizer 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 and HorizontalOptions para alinhar filhos em uma Grid célula.
O exemplo de SpacingButtons espaça igualmente os Button elementos centralizados nas Grid células.
Divisores de células e bordas
O Grid não inclui um recurso que desenha divisores ou bordas de células. No entanto, você pode fazer o seu próprio.
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 da vida real
O exemplo KeypadGrid usa um Grid para exibir um teclado:
Respondendo a mudanças de orientação
Eles Grid podem ajudar a estruturar um programa para responder às 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 ligaçõ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 só funciona com inteiros, uma DoubleToIntConvert classe na Xamarin.Formsbiblioteca Book.Toolkit ajuda.