Erstellen eines Steuerelements mit Kopfzeile
.png "Diese Seite bezieht sich auf WPF und Silverlight 2")
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 ContentControl-Element 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 ItemControl-Elemente mit Headern verwenden, die auf MSDN unter dem Thema HeaderedContentControl (Typen) im Abschnitt Typen aufgeführt sind. ItemsControl-Elemente mit Headern sind unter dem Thema HeaderedItemsControl (Typen) (möglicherweise in englischer Sprache) auf MSDN aufgelistet.
.gif "Hinweis") Hinweis: |
|---|
Steuerelemente mit Headern sind in Microsoft Silverlight 1.0 Projekten nicht verfügbar. Sie können jedoch Layoutpanel vom Typ Canvas, die TextBlock-Objekte enthalten, in Ebenen anordnen und dann einen JavaScript-Ereignishandler einbinden, der die Elemente ein- oder ausblendet, je nachdem, auf welche Registerkarte der Benutzer klickt. Weitere Informationen zu JavaScript finden Sie unter Silverlight-Skripting- und Mausereignisse (möglicherweise in englischer Sprache). |
| Hinweis: |
|---|
Microsoft Expression Blend 2 mit Service Pack 1 ist nicht Teil der Silverlight 2-Versionen von Steuerelementen mit Headern. Das Silverlight 2-SDK (einschließlich der Microsoft Silverlight Tools für Visual Studio) enthält Assemblys mit Steuerelementen mit Headern wie die TabControl. Informationen zum Hinzufügen von Assemblys in Ihre Projekte finden Sie unter Importieren von benutzerdefinierten Steuerelementen durch Hinzufügen von Verweisen. |
So erstellen Sie ein ContentControl-Element mit Kopfzeile
Klicken Sie in der Werkzeugpalette auf der linken Seite von Microsoft Expression Blend auf die Schaltfläche Objektbibliothek
.png "Cc295310.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png")
. Klicken Sie auf der Registerkarte Steuerelemente auf Systemsteuerelemente (falls noch nicht ausgewählt). Wählen Sie dann aus der Liste die Option TabControl .png "Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(de-de,Expression.10).png")
aus.Das Symbol für das TabControl-Steuerelement wird über der Schaltfläche Objektbibliothek angezeigt und ist ausgewählt. Sie können nun der Zeichenfläche ein TabControl-Steuerelement hinzufügen.
.gif "Tipp")
Tipp:Die am häufigsten verwendeten Benutzeroberflächenelemente (wie das Button-Steuerelement) werden bereits in Dropdownlisten über der Schaltfläche Objektbibliothek angezeigt, sodass Sie sie schnell hinzufügen können.
Sie können der Zeichenfläche eine Schaltfläche hinzufügen, indem Sie in der Werkzeugpalette 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)
.png "Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(de-de,Expression.10).png")
Tipp:Gegebenenfalls können Sie dem TabControl-Steuerelement weitere TabItem-Objekte hinzufügen. Doppelklicken Sie unter Objekte und Zeitachsen auf das TabControl-Objekt, um es zu aktivieren. Wählen Sie in der Werkzeugpalette das TabItem-Steuerelement in der Objektbibliothek aus (aktivieren Sie das Kontrollkästchen Alles anzeigen). Doppelklicken Sie auf das Symbol für das TabItem-Steuerelement, um es dem TabControl-Steuerelement als untergeordnetes Element hinzuzufügen.
Vergrößern Sie auf der Zeichenfläche das TabControl-Steuerelement, indem Sie den Steuerpunkt in der unteren rechten Ecke ziehen. Der Zeiger nimmt die Form eines Doppelpfeils
.png "Cc295310.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(de-de,Expression.10).png")
an, um den Vorgang der Größenänderung anzugeben. Vergrößern Sie das TabControl-Steuerelement, sodass 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.
Sie können eines der TabItem-Objekte benennen, indem Sie es unter 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 unter Objekte und Zeitachsen das TabItem-Objekt, und doppelklicken Sie auf das Header-Objekt, um es zu aktivieren. Sie können ein Image-Steuerelement aus der Werkzeugpalette oder aus dem Projektpanel hinzufügen.
Sie können einem der TabItem-Objekte Inhalte hinzufügen. Aktivieren Sie es, indem Sie unter Objekte und Zeitachsen darauf doppelklicken.
Doppelklicken Sie in der Werkzeugpalette auf das StackPanel-Symbol
.png "Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(de-de,Expression.10).png")
, um dem TabItem-Objekt ein StackPanel-Steuerelement hinzuzufügen. Die Content-Eigenschaft (Inhalt) des TabItem-Objekts wird vom voreingestellten Grid-Objekt in ein StackPanel-Objekt geändert.Tipp:Eine Content-Eigenschaft (Inhalt) kann nur ein Element enthalten. Es ist sinnvoll, als Element ein Panel-Steuerelement wie StackPanel oder Grid zu verwenden und dem Panel-Steuerelement dann mehrere Elemente hinzuzufügen.
Doppelklicken Sie unter Objekte und Zeitachsen auf das StackPanel-Objekt, um es zu aktivieren. Sie können dem TabItem-Objekt nun eine beliebige Anzahl von Elementen hinzufügen. Sie können beispielsweise ein TextBlock- oder ein ListBox-Steuerelement aus der Werkzeugpalette hinzufügen.
Einem TabControl-Objekt hinzugefügte untergeordnete Objekte
.png "Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(de-de,Expression.10).png")
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 unter Objekte und Zeitachsen das LayoutRoot-Objekt, wählen Sie das GroupBox-Steuerelement aus der Objektbibliothek aus, und zeichnen Sie dann mit der Maus das Steuerelement auf der Zeichenfläche etwas größer als das TabControl-Steuerelement.
Ziehen Sie das TabControl-Element unter Objekte und Zeitachsen auf das GroupBox-Element. Das TabControl-Element wird dem GroupBox-Element untergeordnet.
Ziehen des TabControl-Steuerelements zum GroupBox-Steuerelement
.png "Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(de-de,Expression.10).png")
Ändern Sie den Titel des GroupBox-Steuerelements. Wählen Sie es hierzu unter Objekte und Zeitachsen aus, und ändern Sie im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften die Header-Eigenschaft (Kopfzeile).
Erstellen Sie das Projekt (F5), um die geänderte Anwendung anzuzeigen.
Hinweis:Ein vollständiges Beispiel mit Code, der auf im ListBox-Element ausgewählte Elemente reagiert, finden Sie unter GroupBox (Beispiel) auf MSDN (möglicherweise in englischer Sprache). 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.