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

Variablen hinzufügen
Inhalte hinzufügen
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.

Schalterobjekt (Name: Switch2)
Layout-Objekt - Stapelbildschirm (Name: StackPanel2)
Schalterobjekt (Name: Switch3)
Layout-Objekt - Stapelbildschirm (Name: StackPanel3)
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