Как создать сетку изображений с прокруткой по горизонтали в wpf

Question

Я пытаюсь реализовать Image-Overview в своем WPF-приложении. На данный момент у меня есть все изображения ниже друг друга, с возможностью прокрутки по вертикали, но они мне нужны в горизонтальной сетке прокрутки 3х (n/3) изображений, где n - общее количество изображений.

<UserControl.Resources> 
    <Style TargetType="{x:Type ListBox}"> 
     <Setter Property="ItemTemplate"> 
      <Setter.Value> 
       <DataTemplate> 
        <Border BorderBrush="Black" BorderThickness="4" CornerRadius="5" Margin="6" > 
         <Image Source="{Binding Path=UriSource}" Stretch="Fill" Width="100" Height="120" /> 
        </Border> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<UserControl.DataContext> 
    <ObjectDataProvider ObjectType="{x:Type local:FileCollection}" MethodName="LoadImages" /> 
</UserControl.DataContext> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="40"/> 
    </Grid.RowDefinitions> 

    <ListBox ItemsSource="{Binding}" Grid.ColumnSpan="3" /> 
</Grid> 

Фактическая ориентация является:

H 
H 
H 
. 
. 
. 

После того как я последовал pushprajs совет ИТС:

HHH... 

Что я хотел бы видеть это:

HHHH 
HHH 
HHH 

И снова реальные изображения:

, как она выглядит сейчас:

, что я хотел бы видеть:

Answer 1

здесь вы идете

<ListBox ItemsSource="{Binding}" 
     Grid.ColumnSpan="3"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
</ListBox> 

Идея изменить панель элементов на панель стека с горизонтальной ориентацией

3 строки across-> вертикальное расположение

<ListBox ItemsSource="{Binding}" 
     Grid.ColumnSpan="3"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Rows="3" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
</ListBox> 

3 строки вертикально-> по компоновке

это немного сложно

<Grid xmlns:l="clr-namespace:CSharpWPF"> 
    <Grid.Resources> 
     <l:CollectionSplitter x:Key="CollectionSplitter" /> 
    </Grid.Resources> 
    <ListBox Grid.ColumnSpan="3" 
      ItemsSource="{Binding Collection,Converter={StaticResource CollectionSplitter}}"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <ItemsControl ItemsSource="{Binding}"> 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <UniformGrid Columns="1" 
             Rows="3" /> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Border BorderBrush="Black" 
            BorderThickness="4" 
            CornerRadius="5" 
            Margin="6"> 
           <Image Source="{Binding Path=UriSource}" 
             Stretch="Fill" 
             Width="100" 
             Height="120" /> 
          </Border> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</Grid> 

для выше вам нужен конвертер а также

namespace CSharpWPF 
{ 
    class CollectionSplitter:IValueConverter 
    { 
     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      List<IEnumerable<object>> result = new List<IEnumerable<object>>(); 
      IEnumerable<object> collection = (value as IEnumerable).OfType<object>(); 
      for (int i = 0; i < collection.Count(); i+=3) 
      { 
       result.Add(collection.Skip(i).Take(3)); 
      } 
      return result; 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 
} 

результат