Unable to scroll list in WP7

Question

I have a listbox control where items are added using a user control that has a text block and an 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 xaml list box:

  <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 items to the list, vertical scrolling does not pass until the last item / bottom of the list is reachable, i.e. returns to the first line, which stops after the last element 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 line does not occupy the width of the device in landscape mode, while the requirement is that the line item expands as the device width changes. Can anyone help with these issues?

Answer 1

, , , , , ListBox, , , .

, , , , , Windows Phone Windows Phone.

, , , , - , , listbox_item UserControl , , ItemTemplate ListBox, ItemsSource. .

<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

. Width UserControl, .

- , , - " , .. , " -

Answer 3

ListBox.ScrollIntoView ListBox . , WP7 ListBox, , .

, ListBoxItemsStyle :

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

And remove your gated width in the template.