Bilder in ListBox mit WrapPanel und ScrollViewer umhüllen, ausgewählte Objekte verschwinden!

Question

Ich verwende eine ListBox, um eine horizontale Anzeige von 800 Thumbnails anzuzeigen, aber nur 6 gleichzeitig (abhängig von der Bildschirmauflösung). Ich möchte die Bilder mit den Tasten auf beiden Seiten der Liste verschieben.

Ich habe derzeit das funktioniert, aber wenn ich das SelectedItem der Listbox zum nächsten/vorherigen Thumbnail ändern ScrollViewer hält das SelectedItem nicht automatisch im Blick. Das SelectedItem nach 6 Thumbnails wird einfach verschwinden.

Ich kann die ScrollBar bewegen, um das SelectedItem zu sehen, aber das ist nicht gut genug, in der endgültigen Version möchte ich nicht einmal eine ScrollBar, ich möchte nur die Benutzer in der Lage sein, die Links oder Rechts Tasten gedrückt zu halten es blättert durch die Fotos.

Auch nur um Ihnen zu geben, warum ich das will, jedes Mal, wenn das SelectedItem auf der ListBox geändert wird, ändert es die FullSize-Vorschau des obigen Fotos.

Gibt es trotzdem in Silverlight 2, um sicherzustellen, dass das SelectedItem im ScrollViewer (in der ListBox) im sichtbaren Bereich bleibt?

Hier ist die aktuelle XAML für die List-Box:

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

Artikel Container-Stil ist hier:

<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

landete ich mit ScrollViewer.ScrollToHorizontalOffset als ScrollIntoView up nicht

Answer 2

Sie könnten die ScrollIntoView Methode in dem ausgewählten Elemente vorbei.

MSDN Docs