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 i.e. 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?

mauris · Accepted Answer · 2012-05-28 09:12:26Z

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. E.g.

<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>

Stuart · Accepted Answer · 2011-02-02 08:37:05Z

0

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 i.e. it comes back to first row which stops from last item selection" doesn't make sense to me - sorry

answered Feb 2, 2011 at 8:37

Stuart

66.9k7 gold badges116 silver badges169 bronze badges

9 Comments

Stuart Over a year ago

Sorry - still not clear to me. What does "not able to scroll" mean? Do you mean "the user cannot scroll the listbox"? Or do you mean "I want to programmatically select which item is currently shown"?

Shaireen Over a year ago

what i meant was that when user scrolls the list to rach the bottom item of list,it does not reach the bottom item in list.

Stuart Over a year ago

can you post your entire page XAML? If you can't see the bottom of the ListBox then somehow that ListBox must be being positioned so that it's bottom is beyond the bottom of the screen.

Stuart Over a year ago

Just for now... can you try removing the "row definitions" from your LayoutRoot - after you've done this, then I think your listbox will display fine. If that's the case, then you need to rewrite your Grid layout (perhaps readup about how to use "Auto" and "*")

Stuart Over a year ago

Can you remove everything in your page except the ListBox? That way we can be sure that things like 'Height="768"' aren't interfering

|

ColinE · Accepted Answer · 2011-02-02 08:38:40Z

0

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.

answered Feb 2, 2011 at 8:38

ColinE

70.3k16 gold badges171 silver badges236 bronze badges

1 Comment

Shaireen Over a year ago

Thanx a lot for ur reply...I did wat u suggested but Still the bottom item of list is not reachable on scrolling.

Collectives™ on Stack Overflow

Not able to scroll the listbox in WP7

3 Answers 3

Comments

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related