¿Cómo puedo hacer que ScrollViewer funcione dentro de un StackPanel?

Question

En el siguiente WPF XAML, el ScrollViewer no funciona (muestra una barra de desplazamiento, pero no puede desplazarse y los contenidos salen de la ventana hacia la parte inferior).

Puedo cambiar el StackPanel exterior a una rejilla y funcionará.

Sin embargo, en mi aplicación desde la que reproduje el siguiente código, necesito tener un StackPanel externo. ¿Qué debo hacer con StackPanel para hacer que ScrollViewer muestre una barra de desplazamiento utilizable? p. Ej. VerticalAlignment = "Stretch" Height = "Auto" no funciona.

<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> 

Answer 1

no pueda, sin fijar la altura de la StackPanel. Está diseñado para crecer indefinidamente en una dirección. Aconsejo usar un Panel diferente. ¿Por qué "necesita" tener un StackPanel externo?

Answer 2

Esto me estaba molestando por un tiempo también, el truco es poner tu stackpanel dentro de un scrollviewer.

Además, es necesario asegurarse de que se establece la propiedad CanContentScroll del espectador de desplazamiento en True, he aquí un ejemplo:

<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> 

Answer 3

en cuenta que a veces es posible que tenga un StackPanel sin darse cuenta. En mi caso tuve este código

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

que funcionó bien. Las "Páginas" a las que hacía referencia el enlace eran UserControls realmente diferentes y complejos, y yo quería tener solo barras de desplazamiento en algunos de ellos. Así que me quité la ScrollViewer:

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

Y luego pongo el ScrollViewer como el elemento superior de los de los controles de usuario en el que los quería. Sin embargo, esto no funcionó. El contenido fluyó de la página. Al principio no pensé que esta pregunta/respuesta podría ayudarme, pero me di cuenta de que el Panel de artículo predeterminado de un ItemsControl es el StackPanel. Así que he resuelto mi problema especificando una ItemsPanel que no era el StackPanel:

<ItemsControl ItemsSource="{Binding Pages}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Answer 4

De hecho, la forma en que se resolvió el dileman era quitar el panel pila externa y en su lugar establecer el ScrollViewer en la posición que quería dentro de la principal cuadrícula.

 <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>   

Answer 5

Moving Grid.Row = "1" de StackPanel a ScrollViewer completamente resuelto por mí.

Tenía una larga lista de unos 40 elementos para mostrar en un StackPanel, pero solo se mostraban los primeros 20.

<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> 

Answer 6

Así es como funciona:

<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> 

Mediante la unión Altura del ScrollViewer a altura interior de la ventana.

La lógica del redimensionamiento es que necesitamos dar a cualquier elemento la altura de corrección o diseñar la vista para usar la altura de renderizado.

Salida: