Silverlight - Layouts fixos

O layout dos controles é muito importante e crítico para a usabilidade do aplicativo. Ele é usado para organizar um grupo de elementos da GUI em seu aplicativo. Há certas coisas importantes a serem consideradas ao selecionar os painéis de layout. Eles são -

  • Posições dos elementos filhos.
  • Tamanhos dos elementos filhos.
  • Sobreposição de elementos filho sobrepostos uns sobre os outros.

Um arranjo de pixel fixo de controles não funciona se o aplicativo tiver sido usado em diferentes resoluções de tela. O XAML fornece um rico conjunto de painéis de layout integrados para organizar os elementos da GUI de maneira apropriada.

Começaremos olhando para simple fixedlayouts. Então, vamos olhar para oDynamiccenários de layout para os quais o Silverlight foi projetado. Veremos as propriedades e conceitos relacionados ao layout que permeiam todos os elementos da interface do usuário.

Layout Fixo

O tipo mais simples de layout é oferecido pelo Canvaselemento. oCanvas painel é o painel de layout básico no qual os elementos filho podem ser posicionados explicitamente usando as coordenadas relativas a qualquer lado do Canvas, como esquerdo, direito, superior e inferior.

Normalmente, o Canvasé usado para elementos gráficos 2D (como Elipse, Retângulo etc.). Não é usado para elementos de interface do usuário porque a especificação de coordenadas absolutas causa problemas ao redimensionar, localizar ou dimensionar seu aplicativo XAML.

Dada a seguir são os comumente usados properties do Canvas classe.

Sr. Não. Descrição da Propriedade
1

Background

Obtém ou define um pincel que preenche a área de conteúdo do painel. (Herdado do painel)

2

Children

Obtém um UIElementCollection de elementos filho deste painel. (Herdado do painel.)

3

Height

Obtém ou define a altura sugerida do elemento. (Herdado de FrameworkElement.)

4

ItemHeight

Obtém ou define um valor que especifica a altura de todos os itens contidos em um WrapPanel.

5

ItemWidth

Obtém ou define um valor que especifica a largura de todos os itens contidos em um WrapPanel.

6

LogicalChildren

Obtém um enumerador que pode iterar os elementos filhos lógicos deste elemento Panel. (Herdado do painel.)

7

LogicalOrientation

A orientação do painel, se o painel suportar layout em apenas uma dimensão. (Herdado do painel.)

8

LeftProperty

Identifica a propriedade anexada Canvas.Left XAML.

9

Margin

Obtém ou define a margem externa de um elemento. (Herdado de FrameworkElement.)

10

Name

Obtém ou define o nome de identificação do elemento. O nome fornece uma referência para que o code-behind, como o código do manipulador de eventos, possa se referir a um elemento de marcação depois de ser construído durante o processamento por um processador XAML. (Herdado de FrameworkElement.)

11

Orientation

Obtém ou define um valor que especifica a dimensão na qual o conteúdo filho é organizado.

12

Parent

Obtém o elemento pai lógico deste elemento. (Herdado de FrameworkElement.)

13

Resources

Obtém ou define o dicionário de recursos definido localmente. (Herdado de FrameworkElement.)

14

Style

Obtém ou define o estilo usado por este elemento quando ele é renderizado. (Herdado de FrameworkElement.)

15

TopProperty

Identifica a propriedade anexada Canvas.Top XAML.

16

Width

Obtém ou define a largura do elemento. (Herdado de FrameworkElement.)

17

ZIndexProperty

Identifica a propriedade anexada Canvas.ZIndex XAML.

Dada a seguir são os comumente usados methods do Canvas.

Sr. Não. Método e Descrição
1

GetLeft

Obtém o valor da propriedade XAML anexada Canvas.Left para o elemento de destino.

2

GetTop

Obtém o valor da propriedade XAML anexada Canvas.Top para o elemento de destino.

3

GetZIndex

Obtém o valor da propriedade XAML anexada Canvas.ZIndex para o elemento de destino.

4

SetLeft

Define o valor da propriedade XAML anexada Canvas.Left para um elemento de destino.

5

SetTop

Define o valor da propriedade XAML anexada Canvas.Top para um elemento de destino.

6

SetZIndex

Define o valor da propriedade XAML anexada Canvas.ZIndex para um elemento de destino.

O exemplo a seguir mostra como adicionar elementos filho a um Canvas. Abaixo está a implementação XAML na qual uma Ellipse é criada dentro de um Canvas com diferentes propriedades de deslocamento.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

Quando o código acima for compilado e executado, você verá a seguinte saída.