スタックパネルの選択項目に応じてスクロール

Question

ItemsControlとバインドされたビューモデルがあります。そのItemsControlの中に私はスタックパネルを持っています。今私が欲しいのは、選択したアイテムを矢印キーで変更できることです。添付の写真のように1番目のアイテムが選択されていて、4番目のアイテムを押すと選択する必要があります。問題は、行ごとの項目が画面の解像度に依存するためです。画面によっては、行ごとに4つの項目があり、一部には3つあります。次に、ページが終了する位置までスクロールしてスクロールします。どのように私はこれを達成することができますか？私が言ったように私はそれを行うための任意のきれいな方法を認識していないよ、

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

Answer 1

：

は、ここに私のXAMLです。まず、アイテムのActualWidth（たとえば、 "ItemBorder" Borderエレメント）を見てみましょう。アイテムのActualWidth（および任意のHorizo​​ntal Margin）、ItemsControlのActualWidthを知っている場合は、その瞬間に1行にいくつの要素があるかを知ることができます。このオンデマンドを再計算する必要があります。サイズが変更されたためにスクロールが実行されたときにこれを再計算するか、レイアウト変更を再計算して最新の状態に保つことができます。

ActualWidthsを見つけるには、いくつかのオプションがあります。 1つは、スクロール・タイムに視覚的な子孫をトラバースすることができ、気になる要素が見つかるまでです。もう1つは、「ロード済み」イベントを購読してその時間に実際の幅を覚えていることです。幅が時間とともに変化しないと仮定します。