Freigeben über

Formatierungstipps für "ComboBox"-Steuerelemente

  • Artikel

Ee341409.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(de-de,Expression.40).png

Sie können die integrierte ComboBox -Steuerelementvorlage verwenden, um eine benutzerdefinierte ComboBox -Vorlage zu erstellen. Das Popup -Steuerelement enthält ein ListBox -Steuerelement, in dem Benutzer ein Element aus einer Liste auswählen können. Standardmäßig sieht das ComboBox -Steuerelement wie folgt aus:

Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(de-de,Expression.40).png

Teile der ComboBox-Vorlage

Die ComboBox -Vorlage besteht aus den folgenden Teilen:

Ee341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(de-de,Expression.40).png

Teilename Objekttyp

Ee341409.25182a96-9a69-478a-9cfe-5b360e6a9bea(de-de,Expression.40).png  ContentPresenter

ContentPresenter

Ee341409.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(de-de,Expression.40).png  ContentPresenterBorder

FrameworkElement

Ee341409.f0c1ff71-7814-42ba-806b-7ea92d616e69(de-de,Expression.40).png  DropDownToggle

ToggleButton

Ee341409.eb6fad93-f17e-4f62-a926-8c8651862891(de-de,Expression.40).png  Popup

Popup
tip noteTipp:

Wenn Sie die Teile der Vorlage anzeigen möchten, öffnen Sie das Teilepanel während der Bearbeitung der Vorlage.

ComboBox-Tipps

Ein Kombinationsfeld besteht aus einem Popupfenster, das eine Liste von Elementen (4) enthält, einer Fläche, auf der das zurzeit ausgewählte Element angezeigt wird (1) sowie einer Umschaltfläche zum Öffnen bzw. Schließen des Popupfensters (3).

ContentPresenter-Teil

Das ContentPresenter -Teil ist obligatorisch. Es dient dazu, das aktuelle Element anzuzeigen. Wenn Sie das ContentPresenter -Teil in der Vorlage mit Inhalt füllen, wird dieser Inhalt immer dann angezeigt, wenn kein Element ausgewählt ist.

ContentPresenterBorder-Teil

Wenn die IsHitTestVisible -Eigenschaft auf "True" gesetzt ist, kann auf das ContentPresenterBorder -Teil geklickt werden, um das Popupfenster zu öffnen bzw. zu schließen. Das Popupfenster wird in der unteren linken Ecke des ContentPresenterBorder (2) positioniert. Ein Layoutpanel ist eine gute Wahl für das ContentPresenterBorder -Teil.

Das DropDownToggle -Teil ist optional. Sie können es aber als Alternative für das Öffnen und Schließen des Popupfensters verwenden.

Das Popup -Teil ist obligatorisch. Dies ist das Teil, in dem die Elemente angezeigt werden. Ein ItemsPresenter -Teil wird verwendet, um anzugeben, wo die Elemente angezeigt werden sollen. Das ItemsPresenter -Teil muss innerhalb des ScrollViewer -Teils positioniert werden. Das Popup -Teil wird relativ zu den Begrenzungen des Stammobjekts der Vorlage geöffnet.

Status des "ComboBox"-Steuerelements

Standardmäßig kann das ComboBox -Steuerelement in der CommonStates-Statusgruppe einen der drei folgenden Status annehmen. Die Statusgruppe können Sie im Zuständepanel anzeigen, während Sie eine ComboBox -Vorlage ändern:

Zustandsname Beschreibung

Normal

Die Darstellung des ComboBox -Steuerelements, wenn keine Interaktion stattfindet.

MouseOver

Die Darstellung des ComboBox -Steuerelements, wenn der Benutzer den Zeiger über das Steuerelement bewegt.

Disabled

Die Darstellung des ComboBox -Steuerelements, wenn die IsEnabled -Eigenschaft auf False festgelegt ist.

Das ComboBox -Steuerelement kann sich in einem von drei Status der FocusStates-Statusgruppe befinden:

Zustandsname Beschreibung

Unfocused

Die Darstellung des ComboBox -Steuerelements, wenn sich kein Tastaturfokus darauf befindet.

Focused

Darstellung des ComboBox -Steuerelements, wenn das Steuerelement über einen Tastaturfokus verfügt und das ComboBox -Steuerelement nicht erweitert ist. Beispiel: Ein Benutzer drückt die TAB-TASTE, um die Objekte in der Anwendung zu durchlaufen, bis sich ein Tastaturfokus auf dem ComboBox -Steuerelement befindet.

FocusedDropDown

Darstellung des ComboBox -Steuerelements, wenn das Steuerelement über einen Tastaturfokus verfügt und das ComboBox -Steuerelement erweitert ist.

Das ComboBox -Steuerelement kann sich in einem von drei Status der ValidationStates-Statusgruppe befinden:

Zustandsname Beschreibung

Valid

Darstellung des ComboBox -Steuerelements, wenn das Steuerelement gültig ist.

InvalidUnfocused

Darstellung des ComboBox -Steuerelements, wenn das Steuerelement ungültig ist und über keinen Tastaturfokus verfügt.

InvalidFocused

Darstellung des ComboBox -Steuerelements, wenn das Steuerelement ungültig ist und über einen Tastaturfokus verfügt.
tip noteTipp:

Eine Statusgruppe enthält die visuellen Status, die Teil derselben logischen Kategorie sind und die nicht gleichzeitig angezeigt werden können. Beispiel: Die Gruppe CommonStates beinhaltet Zustände, die sich auf die Benutzerinteraktion mit einem Eingabegerät wie der Maus beziehen. In einer Statusgruppe kann immer nur ein Status angezeigt werden. Ein Status aus einer Gruppe kann jedoch gleichzeitig als Status in einer anderen Gruppe angezeigt werden.

Wenn Sie einen Status auswählen, wird die Statusaufzeichnung aktiviert und die vorgenommenen Änderungen für diesen Status werden aufgezeichnet. Um die Statusaufzeichnung zu deaktivieren, klicken Sie auf die Aufzeichnungsschaltfläche Ee341409.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(de-de,Expression.40).png auf der Zeichenfläche, oder wählen Sie Basis im Zuständepanel aus. Um die Darstellung des Steuerelements zu ändern, wenn zwei separate Status aktiv sind, können Sie in einer Statusgruppe eine Vorschau eines Status einpassen, während Sie in einer anderen Statusgruppe einen Status ändern.

Vorlagenbindung

Sie können die Eigenschaften Background, BorderBrush, Foreground und BorderThickness an Vorlagen binden. Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

Konvertieren von Objekten in "ComboBox"-Steuerelemente

Das folgende Bild ist eine Entwurfszusammenfassung eines Kombinationsfelds.

ComboBox-Element

NoteHinweis:

Wichtiger Hinweis: Bei der Grafik oben handelt es sich noch nicht um ein fertiges ComboBox -Steuerelement, sondern um eine Vorlage, die einem ComboBox -Steuerelement ähnelt.

In diesem Beispiel wird der XAML-Code in Schritt 2 der folgenden Prozedur verwendet.

  1. Öffnen Sie ein neues Microsoft Silverlight-Projekt. Suchen Sie in der Codeansicht nach folgendem Code, und löschen Sie dann den schließenden Schrägstrich (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Kopieren Sie folgenden Code in Ihr neues Projekt, und fügen Sie ihn dann hinter dem Code ein, den Sie in Schritt 1 gesucht haben.

    <Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

  3. Fügen Sie ein schließendes Grid -Tag (</Grid>) hinter dem Code ein, den Sie gerade eingefügt haben.

  4. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Raster, und klicken Sie dann auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf ComboBox, und klicken Sie dann auf OK.

  5. Drücken Sie im Panel Objekte und Zeitachsen die STRG-TASTE, und klicken Sie dann auf beide TextBlock -Elemente. Klicken Sie mit der rechten Maustaste auf beide ausgewählten Elemente, und klicken Sie dann auf Ausschneiden. Klicken Sie auf ****Bereich auf "<Bereichsname>" zurücksetzen ****Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.40).png, und klicken Sie dann auf Einfügen. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für Höhe.

  6. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf ComboBox, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuelle bearbeiten.

  7. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf contentarea , klicken Sie auf Gruppieren in, und klicken Sie dann auf Raster.

  8. Klicken Sie mit der rechten Maustaste auf Raster, klicken Sie auf Teil von ComboBox erstellen, und klicken Sie dann auf ContentPresenterBorder.

  9. Doppelklicken Sie im Teilepanel auf ContentPresenter. Setzen Sie im Eigenschaftenpanel in der Kategorie Layout die Margin-Eigenschaft auf die folgenden Werte:

    • Links   5

    • Rechts   5

    • Oben   1

    • Unten   0

  10. Klicken Sie im Panel Objekte und Zeitachsen auf Rechteck, drücken Sie die STRG-TASTE, und klicken Sie dann auf Pfad. Klicken Sie mit der rechten Maustaste auf die Auswahl, klicken Sie auf Gruppieren in, und klicken Sie dann auf Raster.

  11. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Raster, klicken Sie auf Teil von ComboBox erstellen, und klicken Sie dann auf DropDownToggle. Klicken Sie auf OK.

  12. Klicken Sie mit der rechten Maustaste auf Pfad, und klicken Sie dann auf Ausschneiden. Klicken Sie auf ****Bereich auf "<Bereichsname>" zurücksetzen ****Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.40).png, klicken Sie auf DropDownToggle, und drücken Sie zum Einfügen STRG+V.

  13. Klicken Sie im Panel Objekte und Zeitachsen auf Raster. Doppelklicken Sie im Teilepanel auf Popup.

  14. Doppelklicken Sie im Werkzeugpanel auf Raster. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für Höhe.

  15. Klicken Sie im Panel Objekte und Zeitachsen auf popupbackground, und ziehen Sie den Popuphintergrund dann auf das soeben erstellte Raster. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für die Eigenschaften Height, HorizontalAlignment, VerticalAlignment und Margin.

  16. Ziehen Sie im Panel Objekte und Zeitachsen das ScrollViewer-Element auf das neue Raster. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für die Eigenschaften Height, HorizontalAlignment, VerticalAlignment und Margin.

  17. Klicken Sie auf ****Bereich auf "<Bereichsname>" zurücksetzen ****Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.40).png. Setzen Sie im Eigenschaftenpanel in der Kategorie Layout die Höhe auf 20.

  18. Erstellen Sie Ihr Projekt (STRG+UMSCHALT+B), und testen Sie es, indem Sie F5 drücken.

Weitere Informationen dazu, wie Sie die neue ComboBox -Vorlage für andere ComboBox -Objekte übernehmen, finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Microsoft Silverlight- ComboBox -Steuerelements finden Sie in derSilverlight Control Gallery Ee341409.xtlink_newWindow(de-de,Expression.40).png in MSDN.

Siehe auch

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente
SimpleComboBox-Steuerelementvorlage und SimpleComboBoxItem-Steuerelementvorlage
Formatieren eines Steuerelements, das Vorlagen unterstützt

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.