Listbox non-default selection = scrolling error

Question

Hello,

I have the following listbox:

 

<ListBox Height="400" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" ItemsSource="{Binding Transactions}" SelectedIndex="{Binding TransactionIndex, Mode=TwoWay}">
    <ListBox.Resources>
        <Style x:Key="TransactionsListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
            	<Setter.Value>
            		<ControlTemplate TargetType="ListBoxItem">
            			<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
            				<VisualStateManager.VisualStateGroups>
            					<VisualStateGroup x:Name="CommonStates">
            						<VisualState x:Name="Normal"/>
            						<VisualState x:Name="MouseOver"/>
            						<VisualState x:Name="Disabled">
            							<Storyboard>
            								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
            									<DiscreteObjectKeyFrame KeyTime="0">
            										<DiscreteObjectKeyFrame.Value>
            											<SolidColorBrush Color="Transparent"/>
            										</DiscreteObjectKeyFrame.Value>
            									</DiscreteObjectKeyFrame>
            								</ObjectAnimationUsingKeyFrames>
            								<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
            							</Storyboard>
            						</VisualState>
            					</VisualStateGroup>
            					<VisualStateGroup x:Name="SelectionStates">
            						<VisualState x:Name="Unselected"/>
            						<VisualState x:Name="Selected">
            							<Storyboard>
            								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Highlight">
            									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            								</ObjectAnimationUsingKeyFrames>
            								<DoubleAnimation Duration="0" To="50" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
            							</Storyboard>
            						</VisualState>
            					</VisualStateGroup>
            				</VisualStateManager.VisualStateGroups>
            				<Rectangle x:Name="Highlight" Fill="{StaticResource PhoneAccentBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
            				<Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
            					<Grid.RowDefinitions>
            						<RowDefinition Height="Auto"/>
            						<RowDefinition Height="Auto"/>
            					</Grid.RowDefinitions>
            					<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            					<Grid x:Name="grid" Margin="0" Grid.Row="1" Width="400" Height="0">
            						<Grid.Background>
            							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            								<GradientStop Color="Black" Offset="0"/>
            								<GradientStop Color="White" Offset="1"/>
            							</LinearGradientBrush>
            						</Grid.Background>
            					</Grid>
            				</Grid>
            			</Grid>
            		</ControlTemplate>
            	</Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
    <ListBox.ItemContainerStyle>
        <StaticResource ResourceKey="TransactionsListBoxItemStyle"/>
    </ListBox.ItemContainerStyle>
</ListBox>

 

Basically there is one difference to regular listbox - when item is selected, it becomes large to display more information. The idea is fine, but it creates two problems:

1. Once any item is clicked scrolling stops to be "smooth", i.e. it's not possible for listbox to display part of item at the top. The srolling goes "item by item" (sorry, hard to explain that effect).

2. Listbox does not anticipate that total height of all items is increased. As a result it is not possible or hard to reach last item.

Do you have the same effects? Is there any remedy?

Answer 1

Hi,

Can you share you solution for test?

Answer 2

Here you are:

http://cid-beeaa7a407c674bf.skydrive.live.com/embedicon.aspx/.Public/C^3%20for%20Windows%20Mobile/ListBoxExample.zip

Look at scrolling before making any selection and after that (selected item will have small red grid).

Answer 3

Do you have the same effects?

Yes, I think it is connected with CTP version of WP7

Is there any remedy?

More no than yes

I propose to look at Silverlight Performance on Windows Phone session from MIX10. There is overview of differences of listboxes WP7 and desktop Silverlight.

Answer 4

The session video says that there will be some development of dynamic items in the future so I hope they will fix it in next releases. Otherwise I would have to drop that idea.