Databases
StackOverflow2013
Postsdbo
POWrapping images in ListBox using WrapPanel and ScrollViewer, Selected Items disappear!
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrapping images in ListBox using WrapPanel and ScrollViewer, Selected Items disappear!
    primarykey
    data
    text
    <p>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. </p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Is there anyway in Silverlight 2 to make sure the SelectedItem in the ScrollViewer (in the ListBox), stays in the viewable area?</p> <p>Here's the current XAML for the ListBox:</p> <pre><code> &lt;ListBox x:Name="lbPhotos" ItemsSource="{Binding Photos}" SelectedItem="{Binding Path=SelectedPhoto, Mode=TwoWay}" ItemContainerStyle="{StaticResource ReflectionListBoxItemStyle}"&gt; &lt;ListBox.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;controls:WrapPanel Margin="0" /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/ListBox.ItemsPanel&gt; &lt;ListBox.Template&gt; &lt;ControlTemplate&gt; &lt;Grid&gt; &lt;ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" BorderThickness="0" MaxHeight="170"&gt; &lt;ItemsPresenter /&gt; &lt;/ScrollViewer&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/ListBox.Template&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Image MaxHeight="85" Source="{Binding ThumbnailUrl, Converter={StaticResource UrlToBitmapImageConverter}}" /&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; </code></pre> <p>Item container style is here:</p> <pre><code>&lt;Style x:Key="ReflectionListBoxItemStyle" TargetType="ListBoxItem"&gt; &lt;Setter Property="Padding" Value="3"/&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Left"/&gt; &lt;Setter Property="VerticalContentAlignment" Value="Top"/&gt; &lt;Setter Property="Background" Value="Transparent"/&gt; &lt;Setter Property="BorderThickness" Value="1"/&gt; &lt;Setter Property="TabNavigation" Value="Local"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="ListBoxItem"&gt; &lt;Grid Background="{TemplateBinding Background}"&gt; &lt;vsm:VisualStateManager.VisualStateGroups&gt; &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt; &lt;vsm:VisualState x:Name="Normal"/&gt; &lt;vsm:VisualState x:Name="MouseOver"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContentBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReflectionBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/vsm:VisualState&gt; &lt;vsm:VisualState x:Name="Disabled"&gt; &lt;/vsm:VisualState&gt; &lt;/vsm:VisualStateGroup&gt; &lt;vsm:VisualStateGroup x:Name="SelectionStates"&gt; &lt;vsm:VisualState x:Name="Unselected"/&gt; &lt;vsm:VisualState x:Name="Selected"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContentBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReflectionBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource PinkColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/vsm:VisualState&gt; &lt;/vsm:VisualStateGroup&gt; &lt;vsm:VisualStateGroup x:Name="FocusStates"&gt; &lt;vsm:VisualState x:Name="Focused"&gt; &lt;/vsm:VisualState&gt; &lt;vsm:VisualState x:Name="Unfocused"/&gt; &lt;/vsm:VisualStateGroup&gt; &lt;/vsm:VisualStateManager.VisualStateGroups&gt; &lt;StackPanel Orientation="Vertical" Margin="0,0,4,0"&gt; &lt;!-- Image --&gt; &lt;Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}" BorderThickness="3,3,3,2" CornerRadius="1" x:Name="MainContentBorder" VerticalAlignment="{TemplateBinding VerticalAlignment}"&gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="#00000000"/&gt; &lt;/Border.BorderBrush&gt; &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/&gt; &lt;/Border&gt; &lt;!-- Image reflection --&gt; &lt;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}"&gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="#00000000"/&gt; &lt;/Border.BorderBrush&gt; &lt;Border.OpacityMask&gt; &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt; &lt;GradientStop Color="#66000000" Offset="1"/&gt; &lt;GradientStop Color="#00000000" Offset="0.348"/&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.OpacityMask&gt; &lt;Border.RenderTransform&gt; &lt;TransformGroup&gt; &lt;ScaleTransform ScaleY="-1"/&gt; &lt;/TransformGroup&gt; &lt;/Border.RenderTransform&gt; &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/&gt; &lt;/Border&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAsh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWrapping images in ListBox using WrapPanel and ScrollViewer, Selected Items disappear!
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload