Zeichnen eines Steuerelements mit Kopfzeile

Steuerelemente mit Kopfzeile weisen eine Header-Eigenschaft auf, die zum Beschriften des Steuerelements verwendet wird. Die Header-Eigenschaft (Kopfzeile) kann einfach nur eine Textzeichenfolge enthalten oder komplex sein wie ein Microsoft® .NET Framework-Objekt. Steuerelemente mit Kopfzeile können je nach verwendetem Steuerelement mit Kopfzeile auch Inhalt oder eine Auflistung von Objekten anzeigen. Beispielsweise ist ein TabItem-Objekt in einem TabControl-Steuerelement ein Content-Steuerelement mit Header. Die Steuerelemente ToolBar und MenuItem sind jedoch beide ItemControl-Elemente mit Headern.

Im folgenden Verfahren wird gezeigt, wie Sie ContentControl-Elemente mit Headern (TabItem-Steuerelemente) innerhalb eines ItemsControl-Elements (TabControl-Steuerelement) erstellen können. Sie können dieses Verfahren auch für andere ContentControl-Elemente mit Headern verwenden, die unter "Typen" unter dem Thema HeaderedContentControl auf MSDN aufgeführt sind (möglicherweise in englischer Sprache). ItemsControl-Elemente mit Headern sind unter dem Thema HeaderedItemsControl auf MSDN aufgelistet (möglicherweise in englischer Sprache).

So erstellen Sie ein ContentControl-Element mit Kopfzeile

1. Klicken Sie im Werkzeugpanel auf der linken Seite des Microsoft Expression Blend-Anwendungsfensters auf Objekte . Wählen Sie in der SteuerelementkategorieTabControl  in der Liste aus.

   Das Symbol für das TabControl-Steuerelement wird unter der Objektbibliothek angezeigt und ist ausgewählt. Sie können nun der Zeichenfläche ein TabControl-Steuerelement hinzufügen.

   Tipp:
   Die am häufigsten verwendeten Benutzeroberflächenelemente (wie das Button-Steuerelement) werden bereits in Dropdownlisten unterhalb der Schaltfläche Objekte angezeigt, sodass Sie diese schnell hinzufügen können.

2. Sie können der Zeichenfläche ein TabControl-Steuerelement hinzufügen, indem Sie auf das Symbol für das TabControl-Steuerelement doppelklicken. Standardmäßig enthält das TabControl-Steuerelement zwei TabItem-Objekte.

   Ein auf der Zeichenfläche erstelltes TabControl-Objekt mit der Standardgröße und der Standardposition (oben links)

   

   Tipp:
   Sie können dem TabControl-Objekt weitere TabItem-Objekte hinzufügen. Rechtsklicken Sie im Panel Objekte und Zeitachsen auf das TabControl-Objekt und klicken Sie dann auf TabItem hinzufügen.

3. Vergrößern Sie auf der Zeichenfläche das Registersteuerelement, indem Sie die STRG-TASTE gedrückt halten und den Steuerpunkt in der unteren rechten Ecke ziehen. Vergrößern Sie das TabControl-Objekt so, dass an der Oberseite drei Registerkarten angezeigt werden können.

   Tipp:
   Alternativ können Sie die Größe des TabControl-Steuerelements ändern, indem Sie im Eigenschaftenpanel in der Kategorie Layout die Eigenschaften Height (Höhe) und Width (Breite) ändern.

4. Sie können eines der TabItem-Objekte benennen, indem Sie es im Panel Objekte und Zeitachsen auswählen und im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften für die Header-Eigenschaft (Kopfzeile) einen Namen eingeben. Geben Sie beispielsweise dem ersten TabItem-Objekt den Namen Persönliche Informationen.

   Tipp:
   Alternativ können Sie ein anderes Steuerelement wie ein Image-Steuerelement als Header für das TabItem-Objekt verwenden. Erweitern Sie im Panel Objekte und Zeitachsen das TabItem-Objekt und klicken Sie auf das Header-Objekt, um es zu aktivieren. Sie können ein Bildsteuerelement vom Werkzeugpanel oder vom Projektpanel hinzufügen.

5. Sie können einem der TabItem-Objekte Inhalte hinzufügen. Aktivieren Sie es, indem Sie auf das Panel Objekte und Zeitachsen klicken.

6. Doppelklicken Sie im Werkzeugpanel auf StackPanel , um dem TabItem-Objekt ein StackPanel-Objekt hinzuzufügen.

7. Klicken Sie im Panel Objekte und Zeitachsen auf das StackPanel-Objekt, um es zu aktivieren. Sie können dem TabItem-Objekt nun eine beliebige Anzahl von Objekten hinzufügen. Sie können beispielsweise ein TextBlock- oder ein ListBox-Steuerelement aus dem Werkzeugpanel hinzufügen.

   Einem TabControl-Objekt hinzugefügte untergeordnete Objekte

   

8. Wenn Sie für das gesamte TabControl-Steuerelement einen Rahmen und einen Header einfügen möchten, verwenden Sie ein anderes ContentControl-Element mit Header, nämlich das GroupBox-Steuerelement. Aktivieren Sie im Panel Objekte und Zeitachsen das LayoutRoot-Objekt, wählen Sie das GroupBox-Steuerelement aus dem Objektepanel aus und zeichnen Sie dann mit der Maus das Steuerelement auf der Zeichenfläche etwas größer als das TabControl-Objekt.

9. Ziehen Sie das TabControl-Objekt im Panel Objekte und Zeitachsen auf das GroupBox-Objekt, um das TabControl-Objekt dem GroupBox-Objekt unterzuordnen.

   Ziehen des TabControl-Objekts zum GroupBox-Objekt

   

10. Ändern Sie den Titel des GroupBox-Objekts. Wählen Sie das Objekt hierzu im Panel Objekte und Zeitachsen aus und ändern Sie im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften die Header-Eigenschaft (Kopfzeile).

11. Erstellen Sie das Projekt (F5), um die geänderte Anwendung anzuzeigen.

    Ein vollständiges Beispiel mit Code, der auf Elemente reagiert, die im ListBox-Objekt ausgewählt sind, finden Sie unter GroupBox auf MSDN. Der Beispielcode ist im Paket WPFSamples.exe enthalten, das unter Windows SDK .NET Framework 3.0 (Beispiele) (möglicherweise in englischer Sprache) verfügbar ist.