Search code examples
xamlwindows-phone-8stackpanel

Windows 8 phone Stackpanel


in my app i would like multiply section grids, these then go done the page one recantgle after another. The problem if i would like to add more sections but they go down below the app design. I have tried to add a stackpanel and stackviewer but neither work. The user should be able to scroll down and see all the sections.

Thank you in advance

The code looks somewhat like this;

<Grid Background="Teal">

                <Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
                </Grid>


                <Grid Height="130" VerticalAlignment="Top" Margin="0,164,0,0"> 
                </Grid>


                <Grid Height="140" VerticalAlignment="Top" Margin="0,295,0,0">
                </Grid>


                <Grid x:Name="ContentPanel" Margin="0,435,0,129">
                </Grid>

                <Grid x:Name="ContentPanel2" Margin="0,435,0,129">
                </Grid>

</Grid>
  • The user should be able to scroll down the page and see all the grids, as one grid is off the page.

Solution

  • You need to combine the <StackPanel> with a <ScrollViewer> to get the scrollable view, so something like:

    <Grid Background="Teal">
        <ScrollViewer>
            <StackPanel>
                <Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
                ...
                </Grid>
                <Grid Height="130" VerticalAlignment="Top"> 
                ...
                </Grid>
                <Grid Height="140" VerticalAlignment="Top">
                ...
                </Grid>
                <Grid x:Name="ContentPanel">
                ...
                </Grid>
                <Grid x:Name="ContentPanel2">
                ...
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>