Layout with ScrollView

How-to Discussions
1

Hello,

Basically, I want to have this layout:

  • TopBar (60pt height)

  • ScrollView (all available space in between)

  • BottomBar (60pt height)

But I can’t, If I don’t specify height in ScrollView, it takes the whole height placing itself on top of the bottombar which is not visible anymore, it doesn’t respect the BottomBar. I tried adding a 60pt bottom margin to ScrollView as well but same result.

<Page ux:Name="home">
  <StackPanel>
    <Header Dock="Top" Height="60" />
    <ScrollView>
       <StackPanel>
        <Panel ux:Name="panel1" Height="80" Background="#F44336" />
        <Panel Height="200" Background="#ddd"/>
        <Panel Height="200" Background="#bbb"/>
        <Panel Height="200" Background="#999"/>
        <Panel Height="200" Background="#777"/>
        <Panel Height="200" Background="#444"/>
        <Panel ux:Name="panel2" Height="80" Background="#3949AB" />
      </StackPanel>
    </ScrollView>
    <BottomBar Dock="Bottom" Height="60" />
  </StackPanel>
</Page>
2

Hi!

Inside your page you have a <StackPanel />, from reading your code it looks like you want a <DockPanel /> since you have set Dock="..." on the children. And if you change it to <DockPanel /> I get the layout that you describe when I test this :slight_smile:

3

Like this :slight_smile:

<Page ux:Name="home">
    <DockPanel>
        <Header Dock="Top" Height="60" />
        <ScrollView>
            <StackPanel>
                <Panel ux:Name="panel1" Height="80" Background="#F44336" />
                <Panel Height="200" Background="#ddd"/>
                <Panel Height="200" Background="#bbb"/>
                <Panel Height="200" Background="#999"/>
                <Panel Height="200" Background="#777"/>
                <Panel Height="200" Background="#444"/>
                <Panel ux:Name="panel2" Height="80" Background="#3949AB" />
            </StackPanel>
        </ScrollView>
        <BottomBar Dock="Bottom" Height="60" />
    </DockPanel>
</Page>
4

Worked great! thank you!!