CODEWITHSUNDEEP
xamlwindows-phone-8.1
tufekoi
tufekoi

Reputation: 991

How to scroll grid Windows phone 8.1

I have a settings page with several Textbox component inside 4 different stack panels. Every panels are in a Grid component : 

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackPanel Margin="10,0,0,30" Grid.Row="0">...

    <StackPanel Name="stackSettings" Grid.Row="1">...

    <StackPanel Name="stackCustomSettings" Grid.Row="2">...

    <StackPanel Name="stackSaveSettings" Grid.Row="3">...

</Grid>

How can I modify my xaml so the grid scroll vertically ?

Upvotes: 0

Views: 2280

Answers (2)

Łukasz Rejman
Łukasz Rejman

Reputation: 1892

Fisrt of all, this code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <!-- Your content -->
</Grid>

Equals this:

<StackPanel>
    <!-- Your content -->
</StackPanel>

Because each row has its height set to Auto, which means the whole Grid will be as high as its content. If you want it to be scrollable, just place it inside ScrollViewer. However, the ScrollViewer cannot be inside of StackPanel or Grid with row height set to Auto, because it won't scroll.

Working example:

<Page>
    <ScrollViewer>
        <StackPanel>
            <!--Place your controls here-->
        </StackPanel>
    </ScrollViewer>
</Page>

Upvotes: 0

Jan L
Jan L

Reputation: 56

Following code is working for me:

<Page>
    <ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackPanel Margin="10,0,0,30" Grid.Row="0">...

            <StackPanel Name="stackSettings" Grid.Row="1">...

            <StackPanel Name="stackCustomSettings" Grid.Row="2">...

            <StackPanel Name="stackSaveSettings" Grid.Row="3">...
        </Grid>
    </ScrollViewer>
</Page>

What is your parent element ? A StackPanel ?

Upvotes: 1

Related Questions