ScrollView within StackPanel -> No full Scroll

General
1

If I create a ScrollView lik this, then I’m able to scroll to the whole list of rectangles:

<App>

  <ScrollView>
      <StackPanel ItemSpacing="20">
          <Rectangle Height="100" Color="Red" />
          <Rectangle Height="100" Color="Blue" />
          <Rectangle Height="100" Color="Red" />
          <Rectangle Height="100" Color="Blue" />
          <Rectangle Height="100" Color="Red" />
          <Rectangle Height="100" Color="Blue" />
          <Rectangle Height="100" Color="Red" />
      </StackPanel>
  </ScrollView>

</App>

But if I want some elements like Buttons and Text above it like this:

<App>

    <StackPanel>

        <Button Text="Press me!" />
        <Text Value="The list:" />

        <ScrollView>
            <StackPanel ItemSpacing="20">
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
            </StackPanel>
        </ScrollView>

    </StackPanel>

</App>

Then I cannot scroll through the whole list. It will restrict it.

Why is it like that? How can I change the behaviour?

2

The Button and Text are ontop of the StackPanel you probably want to Dock them first:

Either fixed Dock:

<App>
    <DockPanel>
        <Button Dock="Top" Text="Press me!" />
        <Text Dock="Top" Value="The list:" />
        <ScrollView>
            <StackPanel ItemSpacing="20">
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

or (Does same as above, but perahaps better solution because it has a dedicated Docked parent panel):

<App>
    <DockPanel>
        <StackPanel Dock="Top">
            <Button Text="Press me!" />
            <Text Value="The list:" />
        </StackPanel>
        <ScrollView>
            <StackPanel ItemSpacing="20">
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
                <Rectangle Height="100" Color="Blue" />
                <Rectangle Height="100" Color="Red" />
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

or you want to Scroll the whole thing but always have something on top of that Scrollable list:

<App>
    <DockPanel>
        <ScrollView>
            <DockPanel>
                <StackPanel Dock="Top">
                    <Button Text="Press me!" />
                    <Text Value="The list:" />
                </StackPanel>
                <StackPanel ItemSpacing="20">
                    <Rectangle Height="100" Color="Red" />
                    <Rectangle Height="100" Color="Blue" />
                    <Rectangle Height="100" Color="Red" />
                    <Rectangle Height="100" Color="Blue" />
                    <Rectangle Height="100" Color="Red" />
                    <Rectangle Height="100" Color="Blue" />
                    <Rectangle Height="100" Color="Red" />
                </StackPanel>
            </DockPanel>
        </ScrollView>
    </DockPanel>
</App>
3

Again thank you very much Edwin Reynoso! :slight_smile:

This solved my problem.