Wpf 使用WrapPanel和ScrollViewer在列表框中包装图像,选定的项目将消失!
我使用列表框来显示800个缩略图的水平显示,但一次只能显示6个(取决于屏幕分辨率),我希望使用列表两侧的按钮浏览图像 我目前正在工作,但当我将列表框的SelectedItem更改为下一个/上一个缩略图时,ScrollViewer不会自动将SelectedItem保留在视图中。6个缩略图之后的SelectedItem将立即消失 我可以移动滚动条来查看SelectedItem,但这还不够好,在最终版本中,我甚至不想要滚动条,我只希望用户能够按住左键或右键,然后快速浏览照片 另外,为了告诉你我为什么要这样做,每次在列表框中更改SelectedItem时,它都会更改上面照片的全尺寸预览 Silverlight 2中是否有确保ScrollViewer(在列表框中)中的SelectedItem保留在可查看区域中的方法 以下是列表框的当前XAML:Wpf 使用WrapPanel和ScrollViewer在列表框中包装图像,选定的项目将消失!,wpf,silverlight,listbox,scrollviewer,wrappanel,Wpf,Silverlight,Listbox,Scrollviewer,Wrappanel,我使用列表框来显示800个缩略图的水平显示,但一次只能显示6个(取决于屏幕分辨率),我希望使用列表两侧的按钮浏览图像 我目前正在工作,但当我将列表框的SelectedItem更改为下一个/上一个缩略图时,ScrollViewer不会自动将SelectedItem保留在视图中。6个缩略图之后的SelectedItem将立即消失 我可以移动滚动条来查看SelectedItem,但这还不够好,在最终版本中,我甚至不想要滚动条,我只希望用户能够按住左键或右键,然后快速浏览照片 另外,为了告诉你我为什么要
<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>
您可以使用ScrollIntoView方法传入所选项目
我最终使用了ScrollViewer.ScrollToHorizontalOffset,因为ScrollIntoView不工作我遇到了这个问题,你是如何计算水平偏移的?仅仅通过获取索引并将缩略图的宽度加在一起?我也尝试过这一方法,但它不适用于自定义内容,除非您将scrollviewer控件命名为与MS listbox模板中的命名完全相同的名称,请参见错误报告