Formatierungstipps für ListBox-Steuerelemente

Sie können die integrierte ListBox -Steuerelementvorlage verwenden, um eine benutzerdefinierte ListBox -Vorlage zu erstellen. Standardmäßig sieht das ListBox -Steuerelement wie folgt aus:

Teile der ListBox-Vorlage

Das ListBox -Steuerelement enthält ein Teil: das ContentElement . Dieses Teil ist obligatorisch.

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

Status des ListBox-Steuerelements

Das ListBox -Steuerelement kann einen der drei folgenden Status der ValidationStates-Statusgruppe annehmen:

Zustandsname	Beschreibung
Valid	Darstellung des ListBox -Steuerelements, wenn das Steuerelement gültig ist.
InvalidUnfocused	Darstellung des ListBox -Steuerelements, wenn das Steuerelement ungültig ist und über keinen Tastaturfokus verfügt.
InvalidFocused	Darstellung des ListBox -Steuerelements, wenn das Steuerelement ungültig ist und über einen Tastaturfokus verfügt.

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  auf der Zeichenfläche, oder wählen Sie Basis im Zuständepanel aus.

So konvertieren Sie Objekte in ein ListBox-Steuerelement

Das folgende Bild ist eine Entwurfszusammenfassung eines ListBox -Steuerelements, das von einem Designer erstellt wurde:

In diesem Beispiel wird der XAML-Code in Schritt 2 der folgenden Prozedur verwendet, der der Grafik oben entspricht, um ein benutzerdefiniertes Kennwortfeld mithilfe der ListBox -Steuerelementvorlage zu erstellen.

Hinweis:
Wichtiger Hinweis: Bei der Grafik oben handelt es sich noch nicht um ein fertiges ListBox -Steuerelement, sondern um eine Vorlage, die in ein ListBox -Steuerelement konvertiert werden kann.

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 x:Name="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
      <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
      <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
          HorizontalAlignment="Right" >
         <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
         VerticalAlignment="Top"/>
      <Rectangle 
         x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
      </Grid>
   </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 Stamm, und klicken Sie dann auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf ListBox, und klicken Sie dann auf OK.

5. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf ScrollViewer, und klicken Sie dann auf Löschen.

6. Drücken Sie die UMSCHALTTASTE, und wählen Sie beide TextBlock -Elemente aus. Klicken Sie mit der rechten Maustaste, und klicken Sie dann auf Ausschneiden.

7. Klicken Sie auf Bereich auf "<Bereichsname>" zurücksetzen , und drücken Sie viermal STRG+V, um acht neue TextBlock-Elemente zu erstellen. Drücken Sie die UMSCHALTTASTE, und markieren Sie anschließend alle TextBlock Elemente.

8. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout rechts neben dem Feld Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für Höhe.

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

10. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Stamm, klicken Sie auf Teil von ListBox erstellen, und klicken Sie dann auf ScrollViewer. Klicken Sie auf OK.

11. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf ContentPresenter, und klicken Sie dann auf Löschen.

12. Klicken Sie im Panel Objekte und Zeitachsen auf Stamm. Doppelklicken Sie im Teilepanel auf ScrollContentPresenter.

13. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf VerticalScrollBar, klicken Sie auf Teil von ScrollViewer erstellen, und klicken Sie dann auf VerticalScrollBar. Klicken Sie auf OK.

    Wie Sie eine Formatvorlage auf VerticalScrollBar anwenden, erfahren Sie unter Formatierungstipps für das "ScrollBar"-Steuerelement.

14. Klicken Sie auf ****Bereich auf "<Bereichsname>" zurücksetzen ****, um zur ScrollViewer -Vorlage zurück zu gelangen.

15. Unterteilen Sie den Stamm in zwei Spalten, indem Sie auf das blaue Lineal links neben dem Steuerelement klicken, wobei Sie das Lineal nach rechts neben die Schiebeleiste ziehen, wie im folgenden Bild veranschaulicht wird:

    

16. Klicken Sie für die rechte Spalte zweimal auf ****Stern ****. Das Symbol Auto  wird angezeigt.

17. Klicken Sie in der Kategorie Layout des Eigenschaftenpanels auf Erweiterte Eigenschaften einblenden. Klicken Sie auf Erweiterte Optionen rechts neben MinWidth und dann auf Zurücksetzen.

18. Klicken Sie im Panel Objekte und Zeitachsen auf ScrollContentPresenter. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout rechts neben ColumnSpan auf Erweiterte Optionen und anschließend auf Zurücksetzen.

19. Wechseln Sie bei markierter VerticalScrollBar im Panel Objekte und Zeitachsen zu Geteilte Ansicht. Kopieren Sie folgenden Code in die XAML-Zeile, die mit <ScrollBar x:Name="VerticalScrollBar" beginnt.

    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
    Maximum="{TemplateBinding ScrollableHeight}" 
    Value="{TemplateBinding VerticalOffset}" 
    ViewportSize="{TemplateBinding ViewportHeight}"
    

    Hinweis:
    Sie können diese Eigenschaften auch mithilfe von benutzerdefinierten Ausdrücken festlegen.

20. Klicken Sie auf ****Bereich auf "<Bereichsname>" zurücksetzen ****. Klicken Sie im Panel Objekte und Zeitachsen auf ScrollViewer. Fügen Sie im Objektepanel das ItemsPresenter-Element hinzu, indem Sie auf Steuerelemente, Alle und dann auf ItemsPresenter klicken. Zeichnen Sie das ItemsPresenter auf der Zeichenfläche in der linken Spalte des ListBox -Steuerelements.

21. Klicken Sie bei markiertem ItemsPresenter im Panel Objekte und Zeitachsen in der Kategorie Layout des Eigenschaftenpanels rechts neben dem Feld Breite auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie diesen Schritt für Höhe.

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

    Wichtig:
    Das ListBox -Steuerelement wird nur ordnungsgemäß funktionieren, sofern Sie eine Formatvorlage für ScrollBar anwenden (wie Sie dies tun, erfahren Sie in Schritt 13 in den Formatierungstipps für das "ScrollBar"-Steuerelement).

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight- ListBox -Steuerelements finden Sie in derSilverlight Control Gallery  in MSDN.

Siehe auch

Aufgaben

Verwenden von DataGrid-Steuerelementen
Verwenden des "TreeView"-Steuerelements

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente
SimpleListBox-Steuerelementvorlage und SimpleListBoxItem-Steuerelementvorlage
Formatieren eines Steuerelements, das Vorlagen unterstützt
Formatieren eines Steuerelements für die Datenanzeige

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.