Envelopper des images dans ListBox en utilisant WrapPanel et ScrollViewer, les éléments sélectionnés disparaissent!

Question

J'utilise un ListBox pour afficher un affichage horizontal de 800 miniatures, mais seulement 6 à la fois (selon la résolution de l'écran), je veux parcourir les images en utilisant les boutons de chaque côté de la liste.

J'ai actuellement ce travail, mais quand je change l'élément SelectedItem de la listbox à la vignette suivante/précédente, le ScrollViewer ne maintient pas automatiquement le SelectedItem en vue. Le SelectedItem après 6 vignettes va juste disparaître.

Je peux déplacer le ScrollBar pour voir le SelectedItem, mais ce n'est pas assez bon, dans la version finale je ne veux même pas un ScrollBar, je veux juste que les utilisateurs puissent maintenir les boutons Gauche ou Droite et ça blesse à travers les photos.

Aussi juste pour vous donner pourquoi je veux cela, chaque fois que le SelectedItem est changé sur le ListBox il change l'aperçu FullSize de la photo ci-dessus.

Y at-il de toute façon dans Silverlight 2 pour s'assurer que SelectedItem dans le ScrollViewer (dans le ListBox), reste dans la zone visible?

Voici le XAML actuel pour la zone de liste:

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

style conteneur L'article est ici:

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

Answer 1

Je fini par utiliser ScrollViewer.ScrollToHorizontalOffset comme ScrollIntoView ne fonctionnait pas

Answer 2

Vous pouvez utiliser la méthode ScrollIntoView passant l'élément sélectionné.

MSDN Docs