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.

A seguir estão as propriedades mais comumente usadas do Canvas.

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.