Silverlight: Difficulté à ScrollViewer

Question

Je fais une application Silverlight WP7. J'ai un ScrollViewer qui contient un ListBox de dix éléments. Cependant, il me permet de ne faire défiler vers le bas un petit peu. Que pouvais-je faire mal?

<ScrollViewer>
        <ListBox x:Name="StoryListBox"/>
    </ScrollViewer>

Le ListBox est rempli avec des articles du type suivant:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image x:Name="Thumbnail" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock x:Name="Headline" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="299" FontSize="23.333" VerticalAlignment="Top" />
    <TextBlock x:Name="Teaser" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}"  TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>

Que pouvais-je faire mal ici?

Answer 1

Je ne vois pas la raison pour laquelle vous auriez besoin ListBox être intégré dans le ScrollViewer. Si votre ListBox a plus d'éléments que l'afficher dans la zone d'affichage, les éléments de ListBox devraient faire défiler eux-mêmes. Si vous modifiez le style de la zone de liste en utilisant Expression Blend, le style ressemblera à ceci -

<Style x:Key="ListBoxListStyle" TargetType="ListBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>     
            <ControlTemplate TargetType="ListBox">
                <ScrollViewer 
                    x:Name="ScrollViewer" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    Foreground="{TemplateBinding Foreground}" 
                    Padding="{TemplateBinding Padding}" >
                <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Vous pouvez voir le ScrollViewer intégré dans le ControlTemplate du ListBox, il prend en charge le défilement de ListBoxItems.

Answer 2

(Scrolling) fonctionne parfaitement après un réglage de la hauteur de la zone de liste.

Answer 3

Le ScrollViewer pourrait ne fonctionne que si elle est plus petite que qu'elle contient (largeur ou hauteur). Si vous n'inculper la largeur ou la hauteur du ScrollViewer, il sera étirée pour adapter son contenu, et par conséquent l'effet ne serait pas parfait.

Donc ce que vous devez faire est de définir une taille fixe pour votre ScrollViewer.

Par ailleurs, comme indyfromoz dit, un ListBox a déjà un ScrollViewer, pour que vous puissiez retirer votre ScrollViewer extérieur, et juste définir la taille de la zone de liste.