Configurazione di menu a fisarmonica

È possibile creare menu a fisarmonica, in cui i contenuti nascosti vengono visualizzati toccando lo schermo.

Dopo aver cambiato la visualizzazione//collasso della disposizione oggetti con animazione di visibilità, la posizione dell'oggetto tasto verrà regolata automaticamente dal pannello Stack e la visualizzazione dell'oggetto cambierà.

Per informazioni sulla funzione di visualizzazione degli oggetti nascosti sullo schermo, fare riferimento a quanto segue.

Pannello stack

Cos’è l’Animazione?

Funzionamento quando la visibilità dell'animazione è configurata

Esempio di funzionamento

Toccare il tasto sul pannello Stack per visualizzare la disposizione oggetti collassata; i successivi oggetti allineati saranno spostati in basso. Toccare di nuovo il tasto per far collassare la disposizione oggetti.

Impostazione del flusso di lavoro

Nota: Questo esempio di impostazione spiega la procedura per impostare il menu a fisarmonica in aggiunta alla schermata creata con "Configurazione di una schermata con più sezioni".
Configurazione di una schermata con più sezioni

Aggiungi variabili
Aggiunta di contenuti
Configurazione Parti/Layout

Aggiungi variabili

Aggiunta della variabile per memorizzare la proprietà [Visibilità] della disposizione oggetti.

Esplora progetti: [Variabili] → [Tutte le variabili]

Aggiungi le variabili seguenti.

Proprietà Variabile

[Nome]	[Tipo di dati]	[Valore iniziale]
Var2	[INT]	2
Var3	[INT]	2

Aggiunta di contenuti

Esplora progetti : [Progetto schermata] → [Contenuti]

Aggiungi i contenuti seguenti.

Proprietà Contenuto

[ID contenuto]	[Tipo di schermo]
2	[Scorri il canvas]
3	[Scorri il canvas]
4	[Scorri il canvas]

Per impostare il colore del contenuto, fare clic sull'area di disegno nella vista documento e impostare nella finestra Proprietà.

Nota: Quando si designano i colori con l'ID, i colori visualizzati variano a seconda del [Colore impostato] nel [Tool Chest].
Colore impostato

Esplora progetti: [Progetto schermata] → [Contenuti] → [Content2]

Proprietà Scorri il canvas

Scheda	Proprietà			Valore
[Di base]	[Riempimento]	[Colore]	[Valore]	ID: 26

Esplora progetti: [Progetto schermata] → [Contenuti] → [Content3]

Proprietà Scorri il canvas

Scheda	Proprietà			Valore
[Di base]	[Riempimento]	[Colore]	[Valore]	ID: 27

Esplora progetti: [Progetto schermata] → [Contenuti] → [Content4]

Proprietà Scorri il canvas

Scheda	Proprietà			Valore
[Di base]	[Riempimento]	[Colore]	[Valore]	ID: 28

Configurazione Parti/Layout

Esplora progetti: [Progetto schermata] → [Schermate] → [Screen2]

Trascinare i seguenti oggetti dal [Tool Chest] all'oggetto Layout - pannello Stack (nome: StackPanel1).

Tasto oggetto (nome: Switch2)
Disposizione oggetti - Pannello stack (nome: StackPanel2)
Tasto oggetto (nome: Switch3)
Disposizione oggetti - Pannello stack (nome: StackPanel3)
Oggetto Tasto (nome: da Switch4 a Switch7)

Nota: Quando si allineano l'oggetto Tasto (nome: Switch3) e il pannello Stack (nome: StackPanel3), trascinarli all'esterno del pannello Stack (nome: StackPanel2) in modo che non si sovrappongano ad esso. Con il pannello Stack (nome: StackPanel1) selezionato, fare doppio clic sull'oggetto corrispondente nel [Tool Chest] per allinearlo senza sovrapposizioni.

Proprietà tasto oggetto (nome: Switch2):

Questo tasto modifica la visualizzazione del menu a fisarmonica. Quando si tocca il tasto, la proprietà [Visibilità] della disposizione oggetti - Pannello Stack (nome: StackPanel2) viene modificata in 0 (Visualizzazione) o 2 (Collassato).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[XOR]
			[Sorgente]	2
			[Destinazione]	[Variabile] [Nome]: Var2

Proprietà Disposizione oggetti - Pannello stack (nome: StackPanel2)

Scheda	Proprietà	Valore
[Di base]	[Orientamento]	[Verticale]
	[Altezza]	100
	[Visibilità]	[Variabile] [Nome]: Var2

Proprietà tasto oggetto (nome: Switch3):

Questo tasto modifica la visualizzazione del menu a fisarmonica. Quando si tocca il tasto, la proprietà [Visibilità] della disposizione oggetti - Pannello Stack (nome: StackPanel3) viene modificata in 0 (Visualizzazione) o 2 (Collassato).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[XOR]
			[Sorgente]	2
			[Destinazione]	[Variabile] [Nome]: Var3

Proprietà Disposizione oggetti - Pannello stack (nome: StackPanel3)

Scheda	Proprietà	Valore
[Di base]	[Orientamento]	[Verticale]
	[Altezza]	100
	[Visibilità]	[Variabile] [Nome]: Var3

Proprietà tasto oggetto (nome: Switch4):

Allineare il tasto sopra l'oggetto di layout - Pannello di impilamento (nome: StackPanel2).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[Impostazione]
			[Sorgente]	1
			[Destinazione]	[Oggetto grafico] [Schermata/Contenuto]: ContentDisplay1 [Proprietà della sorgente]: ScreenId
[Forma]	[Dimensione/Ubicazione]	[Larghezza]		200
		[Altezza]		50
		[Allineamento dell'oggetto]	[Orizzontale]	Allineato a destra

Proprietà tasto oggetto (nome: Switch5):

Allineare il tasto sopra l'oggetto di layout - Pannello di impilamento (nome: StackPanel2).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[Impostazione]
			[Sorgente]	2
			[Destinazione]	[Oggetto grafico] [Schermata/Contenuto]: ContentDisplay1 [Proprietà della sorgente]: ScreenId
[Forma]	[Dimensione/Ubicazione]	[Larghezza]		200
		[Altezza]		50
		[Allineamento dell'oggetto]	[Orizzontale]	Allineato a destra

Proprietà tasto oggetto (nome: Switch6):

Allineare il tasto sopra l'oggetto di layout - Pannello di impilamento (nome: StackPanel3).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[Impostazione]
			[Sorgente]	3
			[Destinazione]	[Oggetto grafico] [Schermata/Contenuto]: ContentDisplay1 [Proprietà della sorgente]: ScreenId
[Forma]	[Dimensione/Ubicazione]	[Larghezza]		200
		[Altezza]		50
		[Allineamento dell'oggetto]	[Orizzontale]	Allineato a destra

Proprietà tasto oggetto (nome: Switch7):

Allineare il tasto sopra l'oggetto di layout - Pannello di impilamento (nome: StackPanel3).

Scheda	Scheda secondaria	Proprietà		Valore
[Funzione]	[Tocco]	[Operazione]	[Tipo]	[Parola]
			[Operazione]	[Impostazione]
			[Sorgente]	4
			[Destinazione]	[Oggetto grafico] [Schermata/Contenuto]: ContentDisplay1 [Proprietà della sorgente]: ScreenId
[Forma]	[Dimensione/Ubicazione]	[Larghezza]		200
		[Altezza]		50
		[Allineamento dell'oggetto]	[Orizzontale]	Allineato a destra