CODEWITHSUNDEEP
c#wpf
Questions
Questions

Reputation: 185

Binding ObservableCollection to Grid Inside a Listbox

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.

Upvotes: 0

Views: 180

Answers (2)

gaurawerma
gaurawerma

Reputation: 1826

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>

Upvotes: 0

Scroog1
Scroog1

Reputation: 3579

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

Upvotes: 1

Related Questions