Formatierungstipps für ScrollViewer-Steuerelemente

Verwenden Sie die integrierten ScrollViewer -Steuerelementvorlagen, um eine benutzerdefinierte ScrollViewer -Vorlage zu erstellen. Ein ScrollViewer -Steuerelement sieht standardmäßig wie folgt aus:

Teile der ScrollViewer-Vorlage

Die ScrollViewer -Vorlage besteht aus folgenden Teilen:

Teilename	Objekttyp
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

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

ScrollViewer-Tipps

Ein ScrollViewer -Steuerelement besteht aus bildlauffähigem Inhalt, der über ein horizontales ScrollBar -Objekt und ein vertikales ScrollBar -Objekt gesteuert wird. Ein ScrollBar -Objekt (Schiebeleiste) kann so festgelegt werden, dass es stets eingeblendet, stets ausgeblendet oder nur bei Bedarf eingeblendet wird.

ScrollViewerPresenter-Teil

Das ScrollContentPresenter -Teil ist obligatorisch. Im ScrollContentPresenter -Teil wird der Inhalt angezeigt, der mit der Schiebleiste durchlaufen werden kann.

HorizontalScrollBar-Teil

Das HorizontalScrollBar -Teil ist optional. Binden Sie mithilfe der Option Vorlagenbindung die Visibility -Eigenschaft dieses Teils an ComputedHorizontalScrollBarVisibility , seine Maximum -Eigenschaft an ScrollableWidth , seine Value -Eigenschaft an HorizontalOffset und seine ViewportSize -Eigenschaft an ViewportWidth .

VerticalScrollBar-Teil

Das VerticalScrollBar -Teil ist optional. Binden Sie mithilfe der Option Vorlagenbindung die Visibility -Eigenschaft dieses Teils an ComputedVerticalScrollBarVisibility , seine Maximum -Eigenschaft an ScrollableHeight , seine Value -Eigenschaft an VerticalOffset und seine ViewportSize -Eigenschaft an ViewportHeight .

Vorlagenbindung

Sie können die Eigenschaften Background, BorderThickness oder Padding an eine Vorlage binden. Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Objekte in ScrollViewer-Steuerelemente

Die folgende Abbildung stellt ein Probelayout (Comp) für ein ScrollViewer-Steuerelement dar, das von einem Designer erstellt wurde.

Beachten Sie, dass die vorangehende Abbildung noch kein ScrollViewer-Steuerelement darstellt, sondern eine Vorlage, die einem ScrollViewer-Steuerelement ähnelt.

In diesem Beispiel wird XAML-Code in Schritt 2 für das folgende Verfahren verwendet.

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

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

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

   <Grid x:Name="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
         <Rectangle.Fill>
         <RadialGradientBrush>
            <GradientStop Color="White"/>
            <GradientStop Color="Black" Offset="1"/>
         </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>
      <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 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 das root-Objekt (Stamm), und klicken Sie dann auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf den Steuerelementtyp ScrollViewer und anschließend auf OK.

   In diesem Schritt werden das root -Objekt und sein gesamter Inhalt von Expression Blend entfernt und durch ein neues ScrollViewer -Steuerelement ersetzt. Dann wird von Expression Blend aus dem root -Objekt die Vorlage eines neuen ScrollViewer -Stils erstellt, und dieser neuen Stil wird auf das neue ScrollViewer -Steuerelement angewendet.

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

6. Klicken Sie im Panel Objekte und Zeitachsen auf das root-Objekt (Stamm). Doppelklicken Sie im Teilepanel auf ScrollContentPresenter.

7. Klicken Sie mit der rechten Maustaste auf verticalscrollbar, zeigen Sie auf Teil von ScrollViewer erstellen, und klicken Sie dann auf VerticalScrollBar. Klicken Sie auf OK.

   Informationen zum Formatieren eines VerticalScrollBar -Objekts finden Sie unter Formatierungstipps für das "ScrollBar"-Steuerelement.

8. Klicken Sie auf Bereich auf "<Bereichsname>" zurücksetzen , um zur ScrollViewer-Vorlage ScrollViewerStyle1 zurückzukehren.

9. Es muss mit dem VerticalScrollBar -Objekt möglich sein, den Viewport des bildlauffähigen Bereichs zu verschieben. Hierzu können Sie im Eigenschaftenpanel im Menü Erweiterte Optionen die Option Benutzerdefinierter Ausdruck verwenden. Legen Sie für die Visibility-Eigenschaft den Wert {TemplateBinding ComputedVerticalScrollBarVisibility}, für die Maximum-Eigenschaft den Wert {TemplateBinding ScrollableHeight}, für die Value-Eigenschaft den Wert {TemplateBinding VerticalOffset} und für die ViewportSize-Eigenschaft den Wert {TemplateBinding ViewportHeight} fest.

   Sie können aber auch wie folgt vorgehen: Wählen Sie im Panel Objekte und Zeitachsen das VerticalScrollBar-Objekt aus, suchen Sie in der Geteilten Ansicht die Codezeile, die mit <ScrollBar x:Name="VerticalScrollBar beginnt, und fügen Sie den folgenden Code am Ende dieser Zeile ein.

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

10. Die ScrollContentPresenter- und VerticalScrollBar-Objekte müssen nebeneinander und in ihrer jeweiligen Spalte angeordnet sein. Klicken Sie im Panel Objekte und Zeitachsen auf das root-Objekt (Stamm). Klicken Sie auf der Zeichenfläche auf den blauen Rahmen über dem Steuerelement, und ziehen Sie den orangefarbenen Pfeil rechts neben die Bildlaufleiste, so wie in der folgenden Abbildung dargestellt:

    

11. Klicken Sie für die rechte Spalte zweimal auf ****Stern ****. Das Symbol Auto (Automatisch)  wird angezeigt.

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

13. Klicken Sie im Panel Objekte und Zeitachsen auf das VerticalScrollBar-Objekt. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout rechts neben der Margin-Eigenschaft auf Erweiterte Optionen und anschließend auf Zurücksetzen.

14. Das Objekt mit dem Namen content befindet sich noch in der Vorlage. Dieses Objekt ist das 200 x 200 Pixel große Rechteck, für das vom 146 x 146 Pixel großen ScrollViewer -Steuerelement ein Bildlauf durchgeführt werden soll. Der nächste Schritt besteht darin, das Objekt aus der Vorlage herauszuschneiden und in die Content-Eigenschaft des ScrollViewer-Steuerelements einzufügen. Das Objekt wird anschließend vom ScrollContentPresenter-Objekt angezeigt. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das content-Objekt und anschließend auf Ausschneiden.

15. Klicken Sie auf Bereich auf "<Bereichsname>" zurücksetzen, und drücken Sie STRG+V, um content in die Content-Eigenschaft des ScrollViewer-Steuerelements einzufügen.

16. Erstellen Sie Ihr Projekt (STRG+UMSCHALT+B), und testen Sie es dann durch Drücken auf F5.

    Wichtig:
    Damit das ListBox -Objekt erwartungsgemäß funktioniert, müssen Sie zunächst den Stil des ScrollBar -Objekts mithilfe der in Schritt 7 beschriebenen Formatierungstipps für das "ScrollBar"-Steuerelement festlegen.

Weitere Informationen zur Anwendung neuer ComboBox -Vorlagen auf andere ComboBox -Objekte finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight  ScrollViewer -Steuerelements finden Sie in der Silverlight Control Gallery  (Silverlight Steuerelemente und Dialogfelder) in MSDN.

Siehe auch

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente
Formatieren eines Steuerelements, das Vorlagen unterstützt
SimpleScrollBar

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.