Not able to scroll the listbox in WP7

Question

I have a listbox control where items are added using a user control having a textblock and image.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="52" d:DesignWidth="480">

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,10,0,0" Name="Index_itemtext" Text="" VerticalAlignment="Top" Width="145" />
    <Image Height="34"  HorizontalAlignment="Right" Margin="0,6,55,0" Source="blue_triangle.png" Name="IndexList_itemImage" Stretch="Uniform" VerticalAlignment="Top" Width="66" />
    <Line Height="10" HorizontalAlignment="Left" Margin="0,38,0,0" Name="seperator_line" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Width="480" Stretch="Fill" Fill="#FFF5E9E9" />
</Grid>

And the list box xaml:

  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="768"/>
        <RowDefinition Height="0*" />
    </Grid.RowDefinitions>

    <Grid  Opacity="5"  VerticalAlignment="Top" Grid.Row="0">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF282828" Offset="0.366" />
                <GradientStop Color="#FE848484" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>

        <Button  Content="Top" Grid.Column="0" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Height="72"  Name="Top_btn"  Width="114"  BorderBrush="{x:Null}" Click="topbutton_Click" Style="{StaticResource ButtonStyle1}" >             
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF908585" Offset="0.11" />
                    <GradientStop Color="#FF342E2E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>

        <Button Content="Back" Height="72" Grid.Column="1"  Grid.Row="0" Name="Back_btn" Width="104" HorizontalAlignment="Right" HorizontalContentAlignment="Center" Margin="0"  BorderBrush="{x:Null}" Click="backbutton_Click" Style="{StaticResource ButtonStyle1}" >
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF908585" Offset="0.11" />
                    <GradientStop Color="#FF342E2E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
    </Grid>

            <ListBox Name="Index_list" ScrollViewer.VerticalScrollBarVisibility="Visible"  VerticalContentAlignment="Top" SelectionChanged="on_selection" Margin="0,78,0,0" Height="Auto">
        <ListBoxItem Style="{StaticResource ListBoxItemStyle}">


        </ListBoxItem>
    </ListBox>



</Grid>

Now when i add the items to the list ,the vertical scroll does not go till the last item/bottom of list box not reachable ie it comes back to first row which stops from last item selection:

 for (int i = 0; i < gridSize; i++)
            {
                listbox_item list_item = new listbox_item();
                list_item.Index_itemtext.FontSize = 25;
                list_item.Index_itemtext.Text = index[i];
                list_item.IndexList_itemImage.Source = new BitmapImage(new Uri("some.png", UriKind.Relative));
                list_item.seperator_line.StrokeThickness = 5;
                list_item.Margin = new Thickness(0, 0, 0, 5);
                Index_list.Items.Add(list_item);
            }

Also the list row does not occupy the width of device in landscape mode,whereas the requirement is that the row item widens as the device width changes.Can someone help with these problems?

Answer 1

Having put the code that you've shown so far in a sample project I don't have the problems that you describe with scrolling, so I assume that there are other elements ont he page along with the ListBox that are affecting the layout and hence the scrolling.

As mentioned above, the problem with the orientation change was to do with fixed width elements, which you can resolve using star width columns as discussed in Automatic Rotation Support or Automatic Multi-Orientation Layout Support for Windows Phone ont he Windows Phone Developer Blog.

One other point worth making is that unless you actually have some logic related to this items that you have created the listbox_item UserControl for, you can implement the layout by specifying the ItemTemplate property of the ListBox , and then you can simply create a list of data objects and bind them to the ItemsSource property. Eg

<ListBox x:Name="Index_list"
         HorizontalContentAlignment="Stretch"
         Margin="0,78,0,0"
         SelectionChanged="on_selection"
         VerticalContentAlignment="Top">
  <ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Background="{StaticResource PhoneChromeBrush}">
            <!-- Column definitions here. -->
            <TextBlock Height="30" HorizontalAlignment="Left" Text="{Binding Label}" VerticalAlignment="Top" />
            <Image Height="34" HorizontalAlignment="Right" Margin="0,6,55,0" Source="{Binding ImagePath}" Stretch="Uniform" VerticalAlignment="Top" Width="66" />
            <Line Height="10" HorizontalAlignment="Stretch" Margin="0,38,0,0" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Stretch="Fill" Fill="#FFF5E9E9" />
        </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Answer 2

On the landscape problem - You are setting the Width property on all your UserControl elements - so they will not autoscale.

On the scrolling issue, can you rephrase the question - sorry, but I'm not sure I understand the issue - "the vertical scroll does not go till the last item ie it comes back to first row which stops from last item selection" doesn't make sense to me - sorry

Answer 3

The method ListBox.ScrollIntoView allows you to scroll the ListBox to view a specific item. Also, with the WP7 ListBox if you select an item it is automatically scrolled into view.

Regarding your question on the with of the rows, you need to set the ListBoxItemsStyle as follows:

    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    </Style>

And remove your hard-coded widths in your template.