CODEWITHSUNDEEP
c#silverlightwindows-phone-7scrollbarscrollview
user1147467
user1147467

Reputation: 19

Can't add a scrollbar to grid

I'm writing an application on Windows Phone 7 using Silverlight.

I've spent something like 3 hours trying to add a scrollbar to grid component, so that when I add a lot of things dynamically in code, I could scroll down to see it.

My XAML looks like this:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <ScrollViewer VerticalScrollBarVisibility="Visible" Name="Scrolling">
        <ScrollViewer.Content>
          <Grid x:Name="myGrid" HorizontalAlignment="Left" Width="650" VerticalAlignment="Top" Height =" 300" Background="Red" Grid.Row="1"  Margin="12,108,0,0"/>
        </ScrollViewer.Content>
    </ScrollViewer>

    <Grid Grid.Row="1" Height="79" HorizontalAlignment="Left" Margin="0,405,0,0" Name="grid1" VerticalAlignment="Top" Width="728"> <!-- Not important -->
    </Grid>

    <Grid Grid.Row="1" Height="73" HorizontalAlignment="Left" Margin="12,12,0,0" Name="grid2" VerticalAlignment="Top" Width="704">  <!-- Not important -->
    </Grid>
</Grid>

And then in code:

myGrid.Children.Add(some_component);

I've tried many, many ways, but none is working. Can anyone help?

Upvotes: 0

Views: 4530

Answers (2)

Charleh
Charleh

Reputation: 14012

Ok have you tried this, as your layout seems a bit strange

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid> 
        ...Static content here
    </Grid>
    <ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1">
        ...Content that scales here
    </ScrollViewer>
    <Grid Grid.Row="2"> 
        ...Static content here
    </Grid>
</Grid>

This should work fine - it helps to understand how Grid works. Also it's worth noting that most layout is possible without using margins to move things around - it's bad practice to do layout using margins because of the nature of devices and resolutions. Your apps should ALWAYS scale well - if they don't scale, people will get fed up

Grids have 3 column/row modes - auto ("auto"), absolute ("300") and fill ("*")

Auto - the grid cell only scales to fit the content inside it

Absolute - the grid cell is the size you specify

Fill - the grid cell fills all remaining space after any other cells with auto/absolute have been calculated, in proportion to other cells which are set to also fill

You can also speicify a relative 'fill' using "2*", "3*" etc

so:

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="*" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="3*" />
</Grid.RowDefinitions>

Would result in 4 rows, the first row being 100 pixels high, the 3rd row being twice the height of the 2nd row and the 4th row being three times the height of the 2nd row. These last 3 rows would fill all remaining space.

It's also worth noting that Grid "*" fills the parent container - which is useful for filling up remaining space in applications

Upvotes: 2

herzmeister
herzmeister

Reputation: 11287

First, you can't add things dynamically to a Grid so easily, because you'd have to update the RowDefinitions and ColumnDefinitions as well. If you don't specify those definitions, the children will be stacked in-place.

Try to use a StackPanel or WrapPanel instead, and you should see a scrollbar as soon as the children occupy enough space.

Upvotes: 0

Related Questions