# 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

1. Aggiungi variabili
2. Aggiunta di contenuti
3. 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).

1. Tasto oggetto (nome: Switch2)
2. Disposizione oggetti - Pannello stack (nome: StackPanel2)
3. Tasto oggetto (nome: Switch3)
4. Disposizione oggetti - Pannello stack (nome: StackPanel3)

5. 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