2º Semestre 2010 > PUCPR > TPU

Apresentação em tema: "2º Semestre 2010 > PUCPR > TPU"— Transcrição da apresentação:

1 2º Semestre 2010 > PUCPR > TPU
Layout Windows Forms Bruno C. de Paula 2º Semestre 2010 > PUCPR > TPU

2 Resumo da aula Em breve, vamos começar a conhecer cada um dos principais controles e componentes disponíveis para a criação de nossas interfaces em Windows Forms; O primeiro grupo de controles que trabalharemos serão os controles de layout. Tais controles permitirão que controlemos a exibição dos elementos na tela.

3 Containers 6 controles;
Organizam os demais controles em paineis, abas, grupos;

4 Grupos de Propriedades
Accessibility: acessibilidade; Appearance: aparência gráfica, corresponde ao CSS, depende do componente; Behavior: comportamento, geralmente associado a um código, depende do componete; Data: ligação entre controles e dados;

5 Grupos de Propriedades
Design: como a instância do objeto deve ser criada; Focus: controla a validação dos dados; Layout: estilo de layout, corresponde ao layout em CSS.

6 Revisão: criação de componente em tempo de execução

7 23/03/2017 Layout Um bom projeto de formulário pode ser a diferença entre o sucesso e o fracasso de uma aplicação, ou mesmo mudar o mundo... Vamos explorar os controles que permitem alterações no sistema de layout do Windows Forms; Entender Layouts é essencial para que nossos sistemas tenham um aspecto profissional; Um sistema de layout permite que se componha os controles nos lugares mais eficientes conforme: Maximização e minimização de um contâiner; Redimensionamento de um contâiner; Mudança de resolução do cliente; Localização e internacionalização sem degradar o aspecto aplicação.

8

9 Tipos de Layout Fixo; Unidade de medida: Pixel;
23/03/2017 Fixo; Unidade de medida: Pixel; Aprender o que é: PADDING, MARGEM, ORDEM Z, TAB ORDER; Dinâmico: Tamanho varia conforme o contâiner; Aprender o que é: ANCORAMENTO, PADDING, RESIZE AUTOMÁTICO. Um layout pode ser: Fixo: layout padrão; os componentes  possuem um tamanho absoluto em pixels e um posicionamento também absoluto em pixels; Conceitos importantes que devemos aprender: PADDING, MARGEM, ORDEM Z, TAB ORDER. Dinâmico: o tamanho e/ou localização dos controles varia conforme o tamanho do contâiner; Conceitos importantes: ANCORAMENTO, PADDING, RESIZE AUTOMÁTICO.

10 Layout Fixo 23/03/2017 Padrão quando o programador "joga" um componente na tela; O Visual Studio gera automaticamente, o código de posicionamento dentro do método InitializeComponent, no arquivo FormXXX.Designer.CS. As propriedades que definem o tamanho e a localização do componente na tela são as propriedades: Size: tamanho do componente, sua largura e altura em pixels; Location: localização do componente, em relação ao eixo XY. O redimensionamento da tela não é tratado por padrão! Conceitos importantes que devemos aprender: PADDING, MARGEM, ORDEM Z, TAB ORDER. 23/03/2017

11 Modos de Layout (SnapToGrid X SnapLines)
23/03/2017 Controle do alinhamento dos componentes na tela; Menu Tools > Options > Windows Forms Designer > General > LayoutMode Controlam o alinhamento dos componentes na tela; Alterado via Menu Tools > Options > Windows Forms Designer > General > LayoutMode. Opções: SnapToGrid: Componentes são alinhados em um grid de tamanho configurável; SnapLines (padrão):  Linhas são exibidas para guiar o alinhamento: Control Edge: borda do controle; Text Margin: borda do texto; Text Baseline: linha base do texto; Space Line: espaçamento entre os controles. Dica de projeto: quanto menos linhas diferentes, melhor!

12 Exemplo de formulário com grid de 8x8, no modo SnapToGrid

13 Em roxo: a base line Em azul: a space line

14 Padding é distância entre a borda do controle e a área útil;

15 Margem é a distanciamento entre controles adjacentes.
Margem entre os controles

16 Fonte: Windows Forms Programming 2
Fonte: Windows Forms Programming 2.0 De Chris Sells e Michael Weinhardt

17 Ordem Z (Z-Order) 23/03/2017 Menu Bring To Front ou Send To Back janela Document Outline (View > Document Outline). Ordem de desenho dos controles; Quanto menor o Z-Order, mais "para frente" o controle está; Cada controle inserido via Controls.Add tem Z-ORDER incrementado em relação ao controle anterior, ou seja, poderia estar atrás do controle anterior; O Z-Order também pode ser controlado através dos comandos Bring To Front, Send To Back e da janela Document Outline (View > Document Outline).

18 Ordem de Navegação (Tab Order e Tab Stop)
23/03/2017 Menu View > Tab Order; Seqüencia de navegação via tecla TAB; Essencial para utilização de seu programa via teclado; Acessibilidade; Propriedades: TabIndex: Índice a partir de 0 que indica a ordem de navegação; TabStop: Indica se um controle deve ser incluído na navegação via Tab; Utilize o Menu View > Tab Order para facilitar a edição da ordem de navegação; O controle com menor Tab Order recebe o foco padrão em um formulário; Labels, embora não recebam foco também precisam estar atreladas a um Tab Order para permitir atalhos de teclado.

19 Atalho de Botão & antes do Text de label ou botão;
23/03/2017 & antes do Text de label ou botão; Atalho = ALT + Tecla.

20 Layout Dinâmico 23/03/2017 Um componente deve ser redimensionado quando seu contâiner pai é redimensionado Na prática: um componente deve ser redimensionado quando seu contâiner pai é redimensionado; Conceitos importantes: ANCORAMENTO, PADDING, RESIZE AUTOMÁTICO.

21 Ancoramento (Anchor) 23/03/2017 Preservação da distância entre a borda de um controle e a borda de seu contâiner pai A preservação da distância entre a borda de um controle e a borda de seu controle é chamado de ancoramento (anchoring); Por padrão, os controles são ancorados com o superior esquerdo de seu contâiner; A propriedade Anchor reflete o ancoramento de um componente; Por exemplo, botões de ação em formulários são melhor ancorados à direita e abaixo.

22 Ancoramento Bottom / Right

23 Top / Botton e Left / Right

24 Docking Borda de anexagem de um controle;
23/03/2017 Borda de anexagem de um controle; Quanto MAIOR o Z-ORDER, MAIS próximo da borda está o componente em relação a outro de Z-ORDER menor. Docking permite que se identifique uma borda que o controle ficará "grudado"; Em um editor de texto, por exemplo, deseja-se que toda a área de texto aumente quando o formulário é redimensionado; IMPORTANTE E CONFUSO: o docking é feito na ordem reversa de prioridade do Z-Order, ou seja, quanto MAIOR o Z-ORDER, MAIS próximo da borda está o componente em relação a outro de Z-ORDER menor. ==== Através da propriedade AutoSize pode-se indicar que um controle é redimensionado automaticamente para encaixar o seu conteúdo; AutoSizeMode indica o estilo de redimensionamento; Escalonamento automático é determinado pelo valor da propriedade AutoScaleMode; Escalonamento automático é visto quando o usuário altera a fonte padrão do texto ou a resolução da tela.

25 Controles de Layout FlowLayoutPanel (System.Windows.Forms.FlowLayoutPanel); GroupBox (System.Windows.Forms.GroupBox); Panel (System.Windows.Forms.Panel); SplitContainer (System.Windows.Forms.SplitContainer); TabControl (System.Windows.Forms.TabControl); TableLayoutPanel (System.Windows.Forms.TableLayoutPanel);

26 Table Layout

27 Referências Windows Forms 2.0 Programming.
Chris Sells e Michael Weinhardt Curso sobre Layout em Windows Forms: