# Configurazione di una schermata con più sezioni

È possibile creare una schermata simile all’interfaccia utente di un'applicazione con più riquadri della finestra regolabili.

Dopo aver commutato la visualizzazione/il collasso della disposizione oggetti con animazione visibilità, l'oggetto visualizzazione del contenuto e la dimensione e la posizione dell'oggetto tasto vengono regolati automaticamente dal pannello Dock e la visualizzazione del riquadro cambierà.

Per informazioni sulla funzione utilizzata per configurare le schermate composte da più riquadri, fare riferimento a quanto segue.

Pannello dock

Cos’è l’Animazione?

Funzionamento quando la visibilità dell'animazione è configurata

## Esempio di funzionamento

Toccare il tasto sul pannello Dock per far collassare la disposizione oggetti (riquadro sinistro); l'oggetto di visualizzazione del contenuto (riquadro principale) allineato successivamente si espanderà per riempire lo spazio. Toccare di nuovo il tasto per mostrare la disposizione oggetti.

## Impostazione del flusso di lavoro

1. Aggiungere le variabili
2. Aggiungere la schermata
3. Aggiunta di contenuti
4. Configurazione di oggetti/parti della disposizione

## 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]
Var1 | [INT]

## Aggiungere la schermata

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

Aggiungi le schermate seguenti.

#### Proprietà Schermata

[ID schermata] | [Tipo di schermo]
2 | [Pannello dock]

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

Per definire le impostazioni della schermata come per es. il colore, nella vista Documenti fare clic sull’area per disegnare e definire le impostazioni nella finestra Proprietà.

#### Proprietà Pannello Dock

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

### Esplora progetti : [Architettura del sistema] → [Target01]

Impostare le proprietà seguenti.

#### Proprietà Target01

Scheda | Secondario | Proprietà | Valore
[Funzione] | [Di base] | [Preferiti] | [ID schermata iniziale] | 2

Nota: Questa proprietà imposta la schermata configurata in questo esempio di impostazione (ID schermata: 2) per essere visualizzata per prima dopo l'avvio del runtime.

## Aggiunta di contenuti

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

Aggiungi i contenuti seguenti.

#### Proprietà Contenuto

[ID contenuto] | [Tipo di schermo]
1 | [Scorri il canvas]

### Esplora progetti: [Progetto schermata]→[Contenuti]→ [Content1]

Per definire le impostazioni dei contenuti come per es. il colore, nella vista Documenti fare clic sull’area per disegnare e definire le impostazioni 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

#### Proprietà Scorri il canvas

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

## Configurazione di oggetti/parti della disposizione

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

Trascina e rilascia i seguenti oggetti da [Tool Chest] nella schermata.

Nota: L'ordine di allineamento degli oggetti può essere modificato con [Elenco oggetti].

1. Disposizione oggetti - Canvas (nome: Canvas1)
2. Disposizione oggetti - Pannello stack (nome: StackPanel1)
3. Tasto oggetto (nome: Switch1)

4. Visualizzazione del contenuto (nome: ContentDisplay1)

Nota: Quando si allineano gli oggetti, trascinarli all'esterno della disposizione oggetti o all'esterno dell'area dello schermo per evitare che si sovrappongano. Si noti che quando nessuno degli oggetti sullo schermo è selezionato, è possibile allinearli senza sovrapposizioni facendo doppio clic sull'oggetto in questione nel [Tool Chest].

#### Proprietà Disposizione oggetti - Canvas (nome: Canvas1)

Scheda | Proprietà | Valore
[Di base] | [Ubicazione] | [Ancoraggio] | [In cima]
[Altezza] | 80
[Riempimento] | [Colore] | [Valore] | ID: 14

#### Proprietà Disposizione oggetti - Pannello stack (nome: StackPanel1)

Scheda | Proprietà | Valore
[Di base] | [Orientamento] | [Verticale]
[Ubicazione] | [Ancoraggio] | [Sinistra]
[Larghezza] | 250
[Riempimento] | [Colore] | [Valore] | ID: 11
[Visibilità] | [Variabile] [Nome]: Var1

Nota: Installare il menu a fisarmonica nel pannello Stack. Per informazioni sul menu a fisarmonica, far riferimento a quanto segue.
Configurazione di menu a fisarmonica

#### Proprietà tasto oggetto (nome: Switch1):

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

Scheda | Scheda secondaria | Proprietà | Valore | Scheda
[Funzione] | [Tocco] | [Operazione] | [Tipo] | [Parola]
[Operazione] | [XOR]
[Sorgente] | 2
[Destinazione] | [Variabile] [Nome]: Var1
[Forma] | [Dimensione/Ubicazione] | [Ubicazione] | [Ancoraggio] | [Sinistra]
[Larghezza] | 25
[Altezza] | 50

#### Proprietà Visualizzazione del contenuto (nome: ContentDisplay1)

Scheda | Scheda secondaria | Proprietà | Valore
[Funzione] | [Di base] | [ID contenuto]] | 1