none
Listbox non-default selection = scrolling error

    General discussion

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

    Saturday, May 08, 2010 2:17 PM

All replies