Wie ändere ich die Höhe der Titelleiste von spark.components.Panel?

Question

Ich erstelle eine Login-Box für meine Flex-Anwendung. Allerdings muss ich ein spezielles Design auf diese Box anwenden, dass ich die Höhe der Titelleiste ändern muss.

Die Komponente, die ich verwende, ist spark.components.Panel. Ich kann die Eigenschaft dieser 'Panel'-Komponente nicht finden, um die Funktion zu ändern.

Irgendwelche Vorschläge?

Answer 1

Sie können dies nicht durch Styling tun; Sie müssen eine benutzerdefinierte Skin erstellen. Um dies in Flash-Builder zu tun: Klicken Sie mit der rechten Maustaste in den Projektbaum des Pakets, in dem Sie Ihre Skin erstellen möchten. Wählen Sie "Neu" und dann "MXML Skin". Füllen Sie den Assistenten aus und wählen Sie eine Kopie des Spark PanelSkin. Dadurch wird der gesamte Code der Standard-Skin-Skin in Ihre benutzerdefinierte Skinklasse kopiert und Sie können jetzt damit beginnen, sie an Ihren Willen anzupassen.

Suchen Sie nach der Gruppe 'topGroup': Sie enthält alle Elemente des oberen Teils der Panel-Komponente. Sie können damit spielen, wie Sie es wünschen, aber die einfachste Antwort auf Ihre Frage ist, das Label 'titleDisplay' zu finden.

<s:Group id="topGroup" mask="{topGroupMask}"> 

    <!-- some other elements --> 

    <s:Label id="titleDisplay" maxDisplayedLines="1" 
      left="9" right="3" top="1" bottom="0" minHeight="30" 
      verticalAlign="middle" textAlign="start" fontWeight="bold"> 
    </s:Label> 

    ... 

Sehen Sie die Eigenschaft 'minHeight'? Das ist derjenige, der die Höhe der Titelleiste definiert. Geben Sie es einfach und Sie sind bereit zu gehen.

Sie können die benutzerdefinierte Haut anwenden wie so:

<s:Panel skinClass="path.to.my.CustomPanelSkin" />