将ObservableCollection绑定到列表框内的网格

Question

Right now I have a listbox inside which a scrollviewer and a stackpanel is placed with the data binding to the observablecollection of imagelist.

I am having a photolist class which holds the image and path of it and binding it to the listbox.

<Style TargetType="{x:Type ListBox}">
  <Setter Property="Foreground" Value="White" />
  <Setter Property="Margin" Value="100"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBox}" >
          <ScrollViewer>
            <StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center"/>
          </ScrollViewer>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The above code works fine showing the listbox with a scroller and stackpanel hosting the multiple images.

Now I would like to modify the listbox to have scrollviewer and a grid instead of stackpanel, so that the images are positioned like the matrix form.

Please provide me a code snippet to bind the photolist to the grid(inside a scrollviewer which is inside a listbox).

Any help would be highly appreciated.

Answer 1

您可以尝试使用WrapPanel，如果您要求单元格的大小都相同，请使用以下答案： WPF WrapPanel-所有项目的宽度均应相同

Answer 2

You need to change your style to use the WrapPanel:

<Style TargetType="{x:Type ListBox}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Margin" Value="100"/>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border BorderThickness="1" Margin="6">
                    <Image Source="{Binding Path=ImageUri}" Stretch="Fill" Width="100" Height="120" />
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"  />
</Style>