Wie kann ich Scroll in einem Stackpanel zu arbeiten?

Question

Im Folgenden WPF XAML die Scroll nicht funktioniert (es zeigt eine Bildlaufleiste, aber Sie können nicht bewegen und die Inhalte gehen aus dem Fenster nach unten).

Ich kann die äußere Stackpanel zu einem Grid ändern und es wird funktionieren.

Doch in meiner Anwendung, aus der ich den folgenden Code reproduziert, ich brauche eine äußeree Stackpanel haben. Was ist mit dem Stackpanel ich zu tun, tun die Scroll zeigen eine brauchbare Scrollbar zu machen? z.B. Vertical = "Stretch" height = "Auto" nicht funktionieren.

 <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

Sie können nicht ohne die Höhe des StackPanel zu fixieren. Es wurde entwickelt, auf unbestimmte Zeit in eine Richtung zu wachsen. Ich würde raten, einen anderen Panel verwenden. Warum Sie „müssen“ eine äußere StackPanel haben?

Answer 2

Dies wurde mir auch für eine Weile nervt, ist der Trick, um Ihre Stackpanel innerhalb eines Scroll zu setzen.

Außerdem müssen Sie sicherstellen, dass Sie die CanContentScroll Eigenschaft des Scroll-Viewer auf True gesetzt, hier ein Beispiel:

  <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

Beachten Sie, dass manchmal möglicherweise einen Stackpanel haben, ohne es zu merken. In meinem Fall hatte ich diesen Code

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

, die gut funktioniert. Die „Seiten“ verwiesen wird durch die Bindung war wirklich anders, komplexe Benutzersteuerelemente, und ich wollte auf einige von ihnen nur Scrollbalken haben. So entfernte ich die Scroll:

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

Und dann habe ich die Scroll als oberstes Element auf die des Benutzersteuerelementes, wo ich sie haben wollte. Dies führte jedoch nicht. Der Inhalt floss nur die Seite ab. Zuerst dachte ich nicht, diese Frage / Antwort mir helfen könnte, aber das wurde mir klar, dass die Standard-ItemPanel eines Itemscontrol ist die Stackpanel. So löste ich mein Problem, indem sie ein Itemspanel angegeben, der nicht die Stackpanel war:

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

Answer 4

Ja, ich die Art und Weise, dass dileman gelöst war die äußere Stapelplatte zu entfernen und legen Sie stattdessen die Scroll in der Position, die ich in das Hauptnetz wollte.

        <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

Dies ist, wie es funktioniert:

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

Mit der Scroll der Höhe an Fenstern Innere Höhe verbindlich.

Die Logik der Neudimensionierung ist, dass wir jedes Element fix Höhe geben müssen oder die Ansicht Design verwenden Höhe machen.

Ausgang:

Answer 6

Umzug Grid.Row = "1" von Stackpanel Scroll vollständig gelöst es für mich.

Ich hatte eine lange Liste von rund 40 Elementen in einem Stackpanel zu zeigen, aber nur die ersten 20 wurden zeigt.

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

Hier ist, wie ich es tun würde, wenn Ihr Stack-Panel in einem Raster ist:

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