# Konfigurieren eines Akkordeonmenüs

Es ist möglich, Akkordeonmenüs zu erstellen, bei denen verborgene Inhalte durch Berühren des Bildschirms angezeigt werden.

Nach dem Umschalten zwischen Anzeige und Ausblenden von Layoutobjekten mit Sichtbarkeitsanimation wird die Position des Schaltobjekts automatisch vom Stapelbildschirm angepasst und die Objektanzeige ändert sich.

Informationen über die Funktion, mit der verborgene Objekte auf dem Bildschirm angezeigt werden, finden Sie unter:

Stapelbildschirm

Was ist Animation?

Operation, wenn Sichtbarkeitsanimation eingerichtet ist

## Beispieloperation

Berühren Sie den Schalter auf dem Stapelbildschirm, um ein zusammengeklapptes Layout-Objekt anzuzeigen; die danach ausgerichteten Objekte werden nach unten verschoben. Berühren Sie den Schalter erneut, um das Layout-Objekt auszublenden.

## Arbeitsschritte Einstellungen

Hinweis: In diesem Einstellungsbeispiel wird das Verfahren zum Einrichten eines Akkordeonmenüs zusätzlich zu einem mit „Konfigurieren eines Bildschirms mit mehreren Bereichen“ erstellten Bildschirm erläutert.
Konfigurieren eines Bildschirms mit mehreren Bereichen

1. Variablen hinzufügen
2. Inhalte hinzufügen
3. Teile/ Layout einrichten

## Variablen hinzufügen

Hinzufügen einer Variable, die die Eigenschaft [Sichtbarkeit] des Layout-Objekts speichert.

### Projekt-Explorer: [Variablen] → [Alle Variablen]

Fügen Sie folgende Variable(n) hinzu.

#### Variableneigenschaften

[Name] | [Datentyp] | [Initialwert]
Var2 | [INT] | 2
Var3 | [INT] | 2

## Inhalte hinzufügen

### Projekt-Explorer: [Bildschirmgestaltung] → [Inhalte]

Folgende Inhalte hinzufügen.

#### Inhaltseigenschaften

[Inhalts-ID] | [Bildschirmtyp]
2 | [Scroll-Leinwand]
3 | [Scroll-Leinwand]
4 | [Scroll-Leinwand]

Um die Farbe des Inhalts einzustellen, klicken Sie auf die Zeichenfläche in der Dokumentenansicht und stellen Sie sie im Eigenschaftsfenster ein.

Hinweis: Bei der ID-Benennung von Farben variieren die angezeigten Farben je nach [Farbsatz] im [Werkzeugkasten].
Farbsatz

### Projekt-Explorer: [Bildschirmgestaltung] → [Inhalte] → [Content2]

#### Eigenschaften der Scroll-Leinwand

Tab | Eigenschaft | Wert
[Basis] | [Füllung] | [Farbe] | [Wert] | ID: 26

### Projekt-Explorer: [Bildschirmgestaltung] → [Inhalte] → [Content3]

#### Eigenschaften der Scroll-Leinwand

Tab | Eigenschaft | Wert
[Basis] | [Füllung] | [Farbe] | [Wert] | ID: 27

### Projekt-Explorer: [Bildschirmgestaltung] → [Inhalte] → [Content4]

#### Eigenschaften der Scroll-Leinwand

Tab | Eigenschaft | Wert
[Basis] | [Füllung] | [Farbe] | [Wert] | ID: 28

## Teile/ Layout einrichten

### Projekt-Explorer: [Bildschirmgestaltung] → [Bildschirme] → [Screen2]

Ziehen Sie die folgenden Objekte aus dem [Werkzeugkasten] auf das Layout-Objekt - Stapelbildschirm (Name: StackPanel1) und legen Sie sie dort ab.

1. Schalterobjekt (Name: Switch2)
2. Layout-Objekt - Stapelbildschirm (Name: StackPanel2)
3. Schalterobjekt (Name: Switch3)
4. Layout-Objekt - Stapelbildschirm (Name: StackPanel3)

5. Schalterobjekt (Name: Switch4 bis Switch7)

Hinweis: Wenn Sie das Schalter-Objekt (Name: Switch3) und den Stapelbildschirm (Name: StackPanel3) ausrichten, ziehen Sie sie per Drag&Drop nach außerhalb des Stapelbildschirms (Name: StackPanel2), damit sie ihn nicht überlappen. Doppelklicken Sie bei ausgewähltem Stapelbildschirm (Name: StackPanel1) auf das entsprechende Objekt im [Werkzeugkasten], um es ohne Überlappung auszurichten.

#### Eigenschaften Schalterobjekt (Name: Switch2)

Mit diesem Schalter wird die Anzeige des Akkordeonmenüs geändert. Wenn der Schalter berührt wird, wird die Eigenschaft [Sichtbarkeit] des Layout-Objekts - Stapelbildschirm (Name: StackPanel2) auf 0 (Anzeigen) oder 2 (Eingeklappt) geändert.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [XOR]
[Quelle] | 2
[Ziel] | [Variablen] [Name]: Var2

#### Eigenschaften Layout-Objekt - Stapelbildschirm (Name: StackPanel2)

Tab | Eigenschaft | Wert
[Basis] | [Ausrichtung] | [Vertikal]
[Höhe] | 100
[Sichtbarkeit] | [Variablen] [Name]: Var2

#### Eigenschaften Schalterobjekt (Name: Switch3)

Mit diesem Schalter wird die Anzeige des Akkordeonmenüs geändert. Wenn der Schalter berührt wird, wird die Eigenschaft [Sichtbarkeit] des Layout-Objekts - Stapelbildschirm (Name: StackPanel3) auf 0 (Anzeigen) oder 2 (Eingeklappt) geändert.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [XOR]
[Quelle] | 2
[Ziel] | [Variablen] [Name]: Var3

#### Eigenschaften Layout-Objekt - Stapelbildschirm (Name: StackPanel3)

Tab | Eigenschaft | Wert
[Basis] | [Ausrichtung] | [Vertikal]
[Höhe] | 100
[Sichtbarkeit] | [Variablen] [Name]: Var3

#### Eigenschaften Schalterobjekt (Name: Switch4)

Richten Sie den Schalter über dem Layout-Objekt - Stapelbildschirm (Name: StackPanel2) aus.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [Setzen]
[Quelle] | 1
[Ziel] | [Grafikobjekt] [Bildschirm/Inhalt]: ContentDisplay1 [Quelleigenschaft]: ScreenId
[Form] | [Größe/Position] | [Breite] | 200
[Höhe] | 50
[Objektausrichtung] | [Horizontal] | Rechtsbündig

#### Eigenschaften Schalterobjekt (Name: Switch5)

Richten Sie den Schalter über dem Layout-Objekt - Stapelbildschirm (Name: StackPanel2) aus.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [Setzen]
[Quelle] | 2
[Ziel] | [Grafikobjekt] [Bildschirm/Inhalt]: ContentDisplay1 [Quelleigenschaft]: ScreenId
[Form] | [Größe/Position] | [Breite] | 200
[Höhe] | 50
[Objektausrichtung] | [Horizontal] | Rechtsbündig

#### Eigenschaften Schalterobjekt (Name: Switch6)

Richten Sie den Schalter über dem Layout-Objekt - Stapelbildschirm (Name: StackPanel3) aus.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [Setzen]
[Quelle] | 3
[Ziel] | [Grafikobjekt] [Bildschirm/Inhalt]: ContentDisplay1 [Quelleigenschaft]: ScreenId
[Form] | [Größe/Position] | [Breite] | 200
[Höhe] | 50
[Objektausrichtung] | [Horizontal] | Rechtsbündig

#### Eigenschaften Schalterobjekt (Name: Switch7)

Richten Sie den Schalter über dem Layout-Objekt - Stapelbildschirm (Name: StackPanel3) aus.

Tab | Unterg. Registerkarte | Eigenschaft | Wert
[Funktion] | [Berührung] | [Operation] | [Typ] | [Wort]
[Operation] | [Setzen]
[Quelle] | 4
[Ziel] | [Grafikobjekt] [Bildschirm/Inhalt]: ContentDisplay1 [Quelleigenschaft]: ScreenId
[Form] | [Größe/Position] | [Breite] | 200
[Höhe] | 50
[Objektausrichtung] | [Horizontal] | Rechtsbündig