Databound listbox below a text block is not scrolling in windows phone

Question

I have a databound list box and a text block in my application

Initially the listbox will be populated with some values (More than 10 values). i tried to scroll the list. But I couldn't. When I Click on the list and drag the mouse up, the list goes further down. The effect is more or like pulling down the list.

The xaml code is as follows. please help.

<Grid>
   <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
   </Grid.RowDefinitions>
   <TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>

   <ScrollViewer Grid.Row="1">
      <ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
      <ListBox.ItemContainerStyle>
          <Style TargetType="ListBoxItem">
              <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
          </Style>
      </ListBox.ItemContainerStyle>
      <ListBox.ItemTemplate>
         <DataTemplate>
            <Border BorderThickness="0,0,0,2" BorderBrush="White">
                <Grid HorizontalAlignment="Stretch" Width="450">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>
                    <CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
                    <TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
                    <TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
                </Grid>
             </Border>
           </DataTemplate>
      </ListBox.ItemTemplate>
      </ListBox>
    </ScrollViewer>
</Grid>

Thank you.

Answer 1

I achieved what i wanted. I didn't even need to include the scroll viewer. I just needed to change the row definition of the grid (row of the list box) from 'auto' to '*'. That worked as expected.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
        <ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0,0,0,2" BorderBrush="White">
                        <Grid HorizontalAlignment="Stretch" Width="450">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
                            <TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
                            <TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Answer 2

Your ScrollViewer is currently wrapped around only the ListBox. Bearing in mind the ListBox has its own ScrollViewer this will result in unpredictable behaviour. I would wrap your Grid with a ScrollViewer and disable the ListBox one so that you can scroll your TextBlock and ListBox smoothly.

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
            <ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderThickness="0,0,0,2" BorderBrush="White">
                            <Grid HorizontalAlignment="Stretch" Width="450">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                </Grid.ColumnDefinitions>
                                <CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
                                <TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
                                <TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </ScrollViewer>