web-dev-qa-db-fra.com

Comment puis-je faire fonctionner ScrollViewer dans un StackPanel?

ScrollViewer ne fonctionne pas dans le XAML suivant WPF.

Je peux changer le StackPanel externe en une grille et cela fonctionnera.

Cependant, dans ma demande à partir de laquelle j'ai reproduit le code suivant, je dois disposer d'un StackPanel externe. Que dois-je faire à StackPanel pour que ScrollViewer affiche une barre de défilement utilisable? par exemple. VerticalAlignment = "Stretch" Height = "Auto" ne fonctionne pas. 

 <StackPanel>
        <ScrollViewer>
            <StackPanel>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
            </StackPanel>
        </ScrollViewer>
 </StackPanel>
wpfxamlscrollviewerstackpanel
68
Edward Tanguay

Vous ne pouvez pas sans fixer la hauteur de la StackPanel. Il est conçu pour se développer indéfiniment dans une direction. Je conseillerais d'utiliser une Panel différente. Pourquoi avez-vous "besoin" d'avoir une StackPanel extérieure?

55
Kent Boogaart

Cela me dérangeait aussi depuis un moment, le truc est de mettre votre stackpanel dans un scrollviewer.

En outre, vous devez vous assurer que vous définissez la propriété CanContentScroll de la visionneuse de défilement sur True. En voici un exemple:

  <ScrollViewer Grid.Row="1" Margin="299,12,34,54" Name="ScrollViewer1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="195" CanContentScroll="True">
        <StackPanel Name="StackPanel1" OverridesDefaultStyle="False"  Height="193" Width="376" VerticalAlignment="Top" HorizontalAlignment="Left"></StackPanel>
  </ScrollViewer>
56
Rob

Notez que vous pouvez parfois avoir un StackPanel sans vous en rendre compte. Dans mon cas j'avais ce code 

<ScrollViewer>
  <ItemsControl ItemsSource="{Binding Pages}"/>
</ScrollViewer>

qui a bien fonctionné. Les "Pages" référencées par la liaison étaient vraiment différentes, des contrôles utilisateur complexes et je ne voulais avoir que des barres de défilement sur certaines d'entre elles. Alors j'ai enlevé le scrollviewer:

 <ItemsControl ItemsSource="{Binding Pages}"/>

Et puis je mets le ScrollViewer comme élément supérieur de ceux des contrôles utilisateur où je les voulais. Cependant, cela n'a pas fonctionné. Le contenu vient de sortir de la page. Au début, je ne pensais pas que cette question/réponse pourrait m'aider, mais j'ai compris que l'élément ItemPanel par défaut d'un ItemsControl est le StackPanel. Alors j'ai résolu mon problème en spécifiant un ItemsPanel qui n'était pas le StackPanel:

<ItemsControl ItemsSource="{Binding Pages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
8
T.J.Kjaer

En fait, le dilemme que j’ai résolu consistait à retirer le panneau de la pile externe et à définir le visionneur de défilement dans la position que je souhaitais à l’intérieur de la grille principale.

        <Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="160"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>        

    <!-- Vertical scrolling grid used in most view states -->    

        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto">
            <StackPanel Orientation="Horizontal">
                <GridView>
                ...
                </GridView>
            </StackPanel>
        </ScrollViewer>
4
Luis Delgado

Voilà comment cela fonctionne:

<Window x:Class="TabControl.MainWindow"
    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"        
    xmlns:local="clr-namespace:TabControl"
    Title="MainWindow"    Height="300"   
    DataContext="{Binding RelativeSource={RelativeSource Self}}"         
    >    
<StackPanel>
    <ScrollViewer Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}" >
        <StackPanel >
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

En liant la hauteur de ScrollViewer à la hauteur interne de la fenêtre.

La logique du redimensionnement consiste à donner à tout élément une hauteur fixe ou à concevoir la vue pour utiliser la hauteur de rendu.

Sortie:

 Scrollbar in Stackpanel

3
Kylo Ren

Le déplacement de Grid.Row = "1" de StackPanel vers ScrollViewer l’a complètement résolu.

J'avais une longue liste de quelque 40 éléments à afficher dans un StackPanel, mais seuls les 20 premiers affichaient.

    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
        <StackPanel x:Name="ContentPanel" Margin="12,0,12,0">
        <TextBlock Text="{Binding Line1}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        <TextBlock Text="" Margin="10,-2,10,0" Style="{StaticResource PhoneTextNormalStyle}" />
        ...
        </StackPanel>
    </ScrollViewer>
0
user3522840

Voici comment je le ferais si votre panneau de pile est à l'intérieur d'une grille:

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <StackPanel MaxHeight="{Binding Path=Height,RelativeSource={RelativeSource 
              AncestorType=Grid}}">
    </StackPanel>
</ScrollViewer>
0
Dominic Picard