Jak można uzyskać ScrollViewer do pracy wewnątrz StackPanel?

Question

W poniższej wersji XAML do WPF ScrollViewer nie działa (wyświetla pasek przewijania, ale nie można przewijać, a zawartość wychodzi z okna na dół).

Mogę zmienić zewnętrzny StackPanel na Grid, który zadziała.

Jednak w mojej aplikacji, z której odtworzono poniższy kod, potrzebuję zewnętrznego zewnętrznego StackPanel. Co muszę zrobić do StackPanel, aby ScrollViewer pokazywał użyteczny pasek przewijania? np. VerticalAlignment = "Stretch" Wysokość = "Auto" nie działają.

<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

nie można bez ustalające wysokość StackPanel. Został zaprojektowany, aby rosnąć w nieskończoność w jednym kierunku. Radziłbym użyć innego Panel. Dlaczego "potrzebujesz", aby mieć zewnętrzny StackPanel?

Answer 2

To też mnie zaniepokoiło, wystarczy, że umieścisz swój stackpanel w przewijarce.

Ponadto, trzeba upewnić się, że właściwość CanContentScroll widza przewijania można ustawić na True, oto przykład:

<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

Zauważ, że czasami można mieć StackPanel nie wiedząc. W moim przypadku miałem ten kod

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

który działał dobrze. "Strony", do których odnosi się bindowanie, były naprawdę odmiennymi, skomplikowanymi UserControlami i chciałem mieć tylko niektóre paski przewijania. Więc usunąłem ScrollViewer:

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

I wtedy umieścić ScrollViewer jako górnego elementu na te z usercontrols gdzie chciałem im. Jednak to nie zadziałało. Treść właśnie spłynęła ze strony. Na początku nie sądziłem, że to pytanie/odpowiedź może mi pomóc, ale zdałem sobie sprawę, że domyślną jednostką ItemPanel elementu ItemsControl jest StackPanel. Więc rozwiązać mój problem, określając ItemsPanel że nie był StackPanel:

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

Answer 4

Rzeczywiście, sposób w jaki rozwiązał ten dileman było usunąć zewnętrzny panel stosu i zamiast ustawić ScrollViewer w pozycji chciałem wewnątrz głównej krata.

 <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

Przeniesienie Grid.Row = "1" z StackPanel do ScrollViewer całkowicie rozwiązało to dla mnie.

Miałem długą listę około 40 elementów do pokazania w StackPanel, ale tylko pierwsze 20 były wyświetlane.

<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

Jak to działa:

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

Wiążąc ScrollViewer w wysokości do okna za Wewnętrzna wysokość.

Logika zmiany rozmiaru polega na tym, że musimy podać wysokość dowolnego elementu lub zaprojektować widok, aby użyć wysokości renderowania.

wyjściowa: