Share via

Zeichnen eines Steuerelements mit Kopfzeile

  • Artikel

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 Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png. Wählen Sie in der SteuerelementkategorieTabControl Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(DE-DE,Expression.30).png 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.

    Cc295310.alert_tip(DE-DE,Expression.30).gifTipp:

    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)

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(DE-DE,Expression.30).png

    Cc295310.alert_tip(DE-DE,Expression.30).gifTipp:

    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.

    Cc295310.alert_tip(DE-DE,Expression.30).gifTipp:

    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.

    Cc295310.alert_tip(DE-DE,Expression.30).gifTipp:

    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 Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(DE-DE,Expression.30).png, 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

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(DE-DE,Expression.30).png

  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

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(DE-DE,Expression.30).png

  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.