Frame e BoxView
Duas views retangulares simples são muitas vezes úteis para fins de apresentação:
O BoxView é um retângulo preenchido. Ele deriva de uma View e define uma propriedade Color que é transparente por padrão.
O Frame apresenta uma borda retangular em torno de algum conteúdo. Frame deriva de um Layout em forma de ContentView, a partir da qual ela herda uma propriedade Content. O conteúdo de um frame pode ser uma única view ou um layout que contém várias outras views. De um VisualElement, o Frame herda uma propriedade BackgroundColor que é branco no iPhone e transparente no Android e no Windows Phone.Do Layout, o Frame herda uma propriedade Padding que inicializa 20 unidades em todos os lados para darem ao conteúdo um espaço para respirar um pouco. O próprio Frame define a si mesmo uma propriedade OutlineColor que é transparente por padrão e uma propriedade HasShadow que é true por padrão, mas a sombra aparece apenas no iPhone.
Tanto o contorno do Frame quanto o BoxView são transparentes por padrão, então você pode ter um pouco de incerteza sobre como colori-los: Branco não vai aparecer contra o fundo padrão do iPhone, e preto não vai aparecer contra o fundo padrão do Android e do Windows Phone. Uma boa escolha é Color.Accent, que é garantida e mostra-se independente. Ou, você pode assumir o controle sobre a coloração do fundo, bem como o contorno da Frame e da BoxView.
Se o BoxView ou o Frame não é limitado em tamanho, de qualquer maneira, isto é, se não é em um StackLayout e tem suas HorizontalOptions e VerticalOptions definidas para os valores padrão de LayoutOptions.Fill essas views expandem para preencher seus recipientes.
Por exemplo, aqui está um programa que tem uma label centralizada definida para a propriedade Content de um Frame:
O label está centralizado no Frame, mas o Frame preenche toda a página, e você pode até não ser capaz de ver o Frame claramente se a página não tiver dado um Padding de 20 em todos os lados:
Para exibir o texto emoldurado centralizado, você terá de definir as propriedades HorizontalOptions e VerticalOptions do Frame (em vez do Label) para LayoutOptions.Center:
Agora, o frame abraça o texto (mas com um padding padrão de 20 unidades) no centro da página.
A versão do FramedText incluída com o código de exemplo para este capítulo exerce a liberdade de dar uma cor personalizada a tudo:
O resultado parece praticamente o mesmo em todas as três plataformas.
Tente definir um BoxView para a propriedade Content de um ContentPage, assim:
Certifique-se de definir a propriedade de cores para que você possa vê-lo. O BoxView preenche toda a área de seu contêiner, assim como uma label faz com as configurações padrão de HorizontalOptions ou de VerticalOptions:
É ainda subjacente a barra de status iOS!
Agora tente definir as propriedades HorizontalOptions e VerticalOptions do BoxView para algo diferente de Fill, como neste exemplo de código.
Neste caso, o BoxView assumirá as suas dimensões padrão de 40 unidades quadradas:
O BoxView é agora 40 unidades quadradas, porque o BoxView inicializa suas propriedades WidthRequest e HeightRequest para 40. Essas duas propriedades requerem uma pequena explicação:
A VisualElement, define as propriedades de Width e Height, mas estas propriedades são somente leitura. A VisualElement também define as propriedades WidthRequest e HeightRequest que são objetos do tipo get e set. Normalmente, todas estas propriedades são inicializadas com valor -1 (que na prática significa que eles são indefinidos), mas algumas derivadas de views, tais como BoxView, definem as propriedades WidthRequest e HeightRequest para valores específicos.
Seguindo o layout de uma página, as propriedades Width e Height indicam dimensões atuais da view – a área que a view ocupa na tela. Pelo fato de Width e Height serem do tipo somente leitura, eles são apenas para fins informativos. (Capítulo 5, "Lidar com tamanhos", descreve como trabalhar com esses valores.)
Se você quiser uma view de tamanho específico, você pode definir as propriedades WidthRequest e HeightRequest. Mas essas propriedades indicam (como seus nomes sugerem) um tamanho solicitado ou um tamanho preferido. Se a view for definida para preencher o recipiente, essas propriedades serão ignoradas.
O BoxView define suas próprias propriedades WidthRequest e HeightRequest para 40. Você pode pensar nessas configurações como um tamanho que BoxView gostaria de ser, se ninguém tivesse qualquer opinião que importasse. Você já viu que WidthRequest e HeightRequest são ignoradas quando o BoxView é definido para preencher a página. O WidthRequest entra em ação se o HorizontalOptions estiver definido para LayoutOptions.Left, Center ou Right, ou se o BoxView for filho de um StackLayout horizontal. O HeightRequest se comporta de forma semelhante.
Aqui está a versão do programa em que há um SizedBoxView incluído com o código para este capítulo:
Agora temos um BoxView com seu tamanho específico e as cores definidas explicitamente:
Vamos usar tanto o frame como o BoxView em uma lista de cores melhorada. O programa ColorBlocks tem um construtor de página que é praticamente idêntico ao de ReflectedColors, exceto que ele chama um método nomeado CreateColorView ao invés de CreateColorLabel. Aqui está este método:
O método CreateColorView retorna um frame contendo um StackLayout horizontal com uma BoxView indicando a cor, uma label para o nome da cor, e outro StackLayout com mais duas label views para a composição de RGB e valores de Hue, Saturation e Luminosity. Os monitores RGB e HSL são sem sentido para o valor de Color.Default, de modo que StackLayout tem sua propriedade IsVisible definido como false nesse caso. O StackLayout ainda existe, mas é ignorado quando a página é processada.
O programa não sabe qual elemento vai determinar a altura de cada item de cor - o BoxView, a label com o nome da cor, ou as duas label view_s com valores RGB e HSL - assim ele centraliza todas as _label views. Como você pode ver, o BoxView expande em altura para acomodar a altura do texto:
Agora, esta é uma lista de cores com rolagem que está começando a ser algo que pode nos dar um pouco de orgulho.