我正在使用 ListBox 显示 800 个缩略图的水平显示,但一次只能显示 6 个(取决于屏幕分辨率),我想使用列表两侧的按钮在图像中移动。
我目前有这个工作,但是当我将列表框的 SelectedItem 更改为下一个/上一个缩略图时,ScrollViewer 不会自动将 SelectedItem 保留在视图中。6 个缩略图后的 SelectedItem 将消失。
我可以移动 ScrollBar 来查看 SelectedItem,但这还不够好,在最终版本中我什至不想要 ScrollBar,我只希望用户能够按住左或右按钮,然后它会闪过相片。
也只是为了给你我想要这个的原因,每次在 ListBox 上更改 SelectedItem 时,它都会更改上面照片的 FullSize 预览。
Silverlight 2 中是否有确保 ScrollViewer(在 ListBox 中)中的 SelectedItem 保持在可视区域中?
这是 ListBox 的当前 XAML:
<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 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>