Binding ObservableCollection to Grid Inside a Listbox

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

You could try using a WrapPanel and if you require the cells to all be the same size use the answer from here: WPF WrapPanel - all items should have the same width

edited May 23 '17 at 12:03

Community

1
1

answered Mar 02 '12 at 12:23

Scroog1

3,539
21
26

Hi scroog, I did change the stackpanel to wrappanel, but If I have the scrollviewer the wrappanel works just like the stackpanel. If I remove the scrollviewer the images get populated in the grid fashion. How do I have both scrollviewer and wrappanel behaving like grid. – Questions Mar 02 '12 at 13:01
@Scrogg, After changing the visibility of the scrollviewer, things just works fine as expected. Appreciate your help. – Questions Mar 02 '12 at 13:06
You could try specifying the width of the WrapPanel. – Scroog1 Mar 02 '12 at 13:06

score 0 · Answer 2 · answered Mar 02 '12 at 12:33

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>

Binding ObservableCollection to Grid Inside a Listbox

2 Answers2