Configurando uma tela com várias seções

Você pode criar uma tela semelhante a uma interface de usuário de aplicação com vários painéis de janela ajustáveis.

Após alternar a exibição/recolhida de objetos de layout com animação de visibilidade, o objeto de exibição de conteúdo e o tamanho do objeto do interruptor e localização serão ajustados automaticamente pelo Painel de encaixe, e a exibição do painel será alterada.

Para obter informações sobre a função usada para configurar uma tela composta de vários painéis, consulte o seguinte.

Painel de encaixe

O que é Animação?

Operação quando a animação de visibilidade é configurada

Exemplo de operação

Toque o interruptor no Painel de encaixe para recolher o layout de objetos (painel esquerdo); o objeto de exibição de conteúdo (painel principal) alinhado posteriormente se expandirá para preencher esse espaço. Toque novamente no interruptor para exibir o layout de objeto.

Adicionar variáveis

Adicione uma variável armazenando a propriedade [Visibilidade] do layout de objeto.

Explorador de projeto: [Variáveis] → [Todas as Variáveis]

Adicionar a(s) variável(eis) abaixo.

Propriedades da variável

[Nome]	[Tipo de dados]
Var1	[INT]

Adicionar tela

Explorador de projeto: [Design de tela] → [Telas]

Adicionar a(s) tela(s) abaixo.

Propriedades da tela

[ID da tela]	[Tipo de tela]
2	[Painel de encaixe]

Explorador de projeto: [Design de tela] → [Telas] → [Screen2]

Para definir as configurações de tela, como cor, na visualização do documento , clique na área de desenho e defina as configurações na janela propriedades.

Propriedades do painel de encaixe

Guia	Propriedade			Valor
[Básico]	[Preencher]	[Cor]	[Valor]	ID: 14

Explorador de projeto: [Arquitetura do sistema] → [Target01]

Defina as propriedades abaixo.

Propriedades do Target01

Guia	Sub	Propriedade		Valor
[Função]	[Básico]	[Preferências]	[ID da tela inicial]	2

Observação: Essa propriedade define a tela configurada neste exemplo de configuração (ID da tela: 2) para ser exibida primeiro após o início do runtime.

Adicionar conteúdos

Explorador de projeto: [Design de tela] → [Conteúdos]

Adicionar os conteúdos abaixo.

Propriedades dos conteúdo

[ID do conteúdo]	[Tipo de tela]
1	[Tela de rolagem]

Explorador de projeto: [Design de tela] → [Conteúdos]→ [Content1]

Para definir as configurações de conteúdos, como cor, na visualização do documento , clique na área de desenho e defina as configurações na janela propriedades.

Observação: Ao designar cores com ID, as cores exibidas variam de acordo com o [Conjunto de cores] na [Caixa da ferramentas].
Conjunto de cores

Propriedades da tela de rolagem

Guia	Propriedade			Valor
[Básico]	[Preencher]	[Cor]	[Valor]	ID: 25

Configurar layout de objetos/peças

Explorador de projeto: [Design de tela] → [Telas] → [Screen2]

Arraste e solte os seguintes objetos da [Caixa da ferramentas] para a tela.

Observação: A ordem de alinhamento do objeto pode ser alterada com [Lista de objetos].

Layout de objeto - Tela (Nome: Canvas1)
Layout de objeto - Painel de pilha (Nome: StackPanel1)
Objeto de interruptor (Nome: Switch1)
Visualização de conteúdo (Nome: ContentDisplay1)

Observação: Ao alinhar objetos, arraste e solte-os na parte externa do layout de objeto ou fora da área da tela para evitar que se sobreponham. Observe que, quando nenhum dos objetos na tela estiver selecionado, eles também poderão ser alinhados sem sobreposição clicando duas vezes no objeto relevante na [Caixa da ferramentas].

Propriedades do Layout de objeto - Tela (Nome: Canvas1)

Guia	Propriedade			Valor
[Básico]	[Localização]	[Plataforma]		[Parte superior]
	[Altura]			80
	[Preencher]	[Cor]	[Valor]	ID: 14

Propriedades do Layout de objeto - Painel de pilha (Nome: StackPanel1)

Guia	Propriedade			Valor
[Básico]	[Orientação]			[Vertical]
	[Localização]	[Plataforma]		[Esquerda]
	[Largura]			250
	[Preencher]	[Cor]	[Valor]	ID: 11
	[Visibilidade]			[Variável] [Nome]: Var1

Observação: Instale o menu acordeão no Painel de pilha. Para obter informações sobre menu acordeão, consulte o seguinte.
Configurando um menu acordeão

Propriedades do objeto do interruptor (Nome: Switch1)

Esse interruptor altera a exibição do painel. Quando o interruptor é tocado, a propriedade [Visibilidade] do layout de objeto - Painel de pilha (nome: StackPanel1) é alterado para 0 (Exibir) ou 2 (Recolhido).

Guia	Sub-tela	Propriedade	Valor	Guia
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[XOR]
			[Origem]	2
			[Destino]	[Variável] [Nome]: Var1
[Forma]	[Tamanho/Localização]	[Localização]	[Plataforma]	[Esquerda]
		[Largura]		25
		[Altura]		50

Propriedades de Visualização do conteúdo (Nome: ContentDisplay1)

Guia	Sub-tela	Propriedade	Valor
[Função]	[Básico]	[ID do conteúdo]	1