我有一个与ItemsControl绑定的视图模型.在ItemsControl里面我有一个堆栈面板.现在我想要的是可以使用箭头键更改所选项目.就像在附图中我选择了第一项,当我按下第四项时应该选择.问题是每行的项目取决于屏幕分辨率,所以在某些屏幕上每行有4个项目,有些则有三个.其次,当我向下移动到页面结束时,滚动应该向下移动.我怎么能实现这个目标?
这是我的xaml:
<ScrollViewer HorizontalAlignment="Center" VerticalScrollBarVisibility="Auto" Width="Auto" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" VerticalAlignment="Top" Margin="0,10,10,0">
<ItemsControl Name="productVariants">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel MouseLeftButtonDown="ProductVariantClicked" Tag="{Binding VariantCBX}" Margin="8" MaxHeight="160" MaxWidth="200" MinWidth="200" MinHeight="160">
<Border Name="ItemBorder" CornerRadius="6" BorderBrush="Gray" Background="White" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel Margin="0">
<TextBlock Name="ProductVariantOption" Text="{Binding VariantOption}" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"/>
<Image Source="{Binding ProductVariantLogoPath}" Height="80" Width="180" />
<TextBlock Text="{Binding VendorName}" HorizontalAlignment="Center" FontSize="15" FontWeight="Bold" />
<TextBlock Text="{Binding SellingPrice}" HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" Foreground="Red" />
</StackPanel>
</Border>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True" >
<Setter TargetName="ItemBorder" Property="BorderBrush" Value="Yellow"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
最佳答案 就像我说的那样,我不知道有任何干净的方法.我可以从你的项目的ActualWidth开始(例如你的“ItemBorder”边框元素).如果您知道项目的ActualWidth(加上任何水平边距)和ItemsControl的ActualWidth,您可以计算出当时一行中有多少元素.您需要按需重新计算 – 您可以在执行滚动时重新计算(因为大小可能已更改),或者您可以通过重新计算布局更改来使其保持最新.
要查找ActualWidths,您有几个选项.一个是你可以在滚动时遍历视觉后代,直到找到你关心的元素.另一个是您可以订阅“已加载”事件并记住当时的实际宽度,假设宽度不随时间变化.