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