I’m using a ListBox to display a horizontal display of 800 thumbnails, but only 6 at a time (depending on screen resolution), I want to move through the images using buttons either side of the list.
I currently have this working, but when I change the SelectedItem of the listbox to next/previous thumbnail the ScrollViewer doesn’t automatically keep the SelectedItem in view. The SelectedItem after 6 thumbnails will just disappear.
I can move the ScrollBar to see the SelectedItem, but thats not good enough, in the final version I don’t even want a ScrollBar, I just want the users to be able to hold down the Left or Right buttons and it blitses through the photos.
Also just to give you why I want this, every time the SelectedItem is changed on the ListBox it changes the FullSize preview of the photo above.
Is there anyway in Silverlight 2 to make sure the SelectedItem in the ScrollViewer (in the ListBox), stays in the viewable area?
Here’s the current XAML for the ListBox:
<ListBox x:Name="lbPhotos"
ItemsSource="{Binding Photos}"
SelectedItem="{Binding Path=SelectedPhoto, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ReflectionListBoxItemStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel Margin="0" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden"
BorderThickness="0" MaxHeight="170">
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<Image MaxHeight="85" Source="{Binding ThumbnailUrl, Converter={StaticResource UrlToBitmapImageConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Item container style is here:
<Style x:Key="ReflectionListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContentBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReflectionBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected"/>
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContentBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReflectionBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical" Margin="0,0,4,0">
<!-- Image -->
<Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}" BorderThickness="3,3,3,2" CornerRadius="1" x:Name="MainContentBorder" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Border.BorderBrush>
<SolidColorBrush Color="#00000000"/>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
<!-- Image reflection -->
<Border RenderTransformOrigin="0.5,0.5" BorderThickness="3,2,3,3" CornerRadius="1" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="0,2,0,0" x:Name="ReflectionBorder" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
<Border.BorderBrush>
<SolidColorBrush Color="#00000000"/>
</Border.BorderBrush>
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="1"/>
<GradientStop Color="#00000000" Offset="0.348"/>
</LinearGradientBrush>
</Border.OpacityMask>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I ended up using ScrollViewer.ScrollToHorizontalOffset as ScrollIntoView didn’t work