ScrollViewer not working in windows phone with dynamic components

Question

I have a stackpanel which sometimes contains more data than can fit on the screen. When this happens I'm unable to scroll down to see the rest of the list. So I added a ScrollViewer to fix this but I'm unable to get it working. This is the code:

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ScrollViewer Height="500" Name="Scroller" VerticalScrollBarVisibility="Auto">
            <StackPanel Orientation="Vertical" Name="Stack" Height="2000">
                <TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
                <Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
                <ListBox x:Name="DepartureDates" MinHeight="2000"
                        cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" MinWidth="430"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
                                    <TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </ScrollViewer>
    </Grid>

Any ideas ? On other views I just have text that scrolls fine, it's only when adding items dynamically that I ran into issues. Saw some posts here also about problems with the scrollviewer but followed those advice such as setting scrollviewer height lower than the stackpanel but didn't work. It's probably something really simple but can't find it :) It does the scrolling movement but just doesn't allow me to go down.

Thanks,

Jorn

actually it is the same problem i am facing some time ago. so what you can do is apply the scrollviewer property of listbox on it and set the height(like 200 or 300) to the listbox.now you can scroll the listbox.also it is not scrolling because your mouse is on listbox if you scroll on textbox and button it will scroll. tell me if it helps you. — loop
@tanuj_loop do you mean like this ? ` <ListBox x:Name="DepartureDates" MinHeight="2000" cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]"> <ScrollViewer Height="300"></ScrollViewer> <ListBox.ItemTemplate>  </ListBox.ItemTemplate> </ListBox> this unfortunately doesn't work for me :( — user2346814

user2346814 user2346814 · Accepted Answer · 2013-07-12T14:12:49

I managed to fix it by reworking my XAML. It seems the stackpanel was the problem. Behavior is slightly different now but I can live with it.

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Margin="0,0,0,5">
                <TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
                <Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
            </StackPanel>
            <ListBox Grid.Row="1" x:Name="DepartureDates" 
                    cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" MinWidth="430"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
                                <TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

ScrollViewer not working in windows phone with dynamic components

2 Answers