0

I have the following 'Grid`:

<Grid x:Name="ImagesGrid" Grid.Row="1"  >
    <ItemsControl ItemsSource="{Binding FrameViewers}" />
</Grid>

I also have the following collection of UserControl items:

private ObservableCollection<FrameViewer> m_frameViewers = new ObservableCollection<FrameViewer>();

public ObservableCollection<FrameViewer> FrameViewers
{
    get => m_frameViewers;
    set
    {
        m_frameViewers = value;
        OnPropertyChanged();
    }
}

I would like to dynamically add FrameViewer to my screen, to make it look like the attached image: enter image description here

Currently I'm seeing them sorted vertically like this: enter image description here

I was able to play with the 'Grid' and added a StackPanel to the ItemSource, but then they were all sized by the length of the title, and attached to the left side of the Grid

What am I missing here? What am I missing?

Idanis
  • 1,918
  • 6
  • 38
  • 69
  • First of all, you can set the orientation of your ItemsSource StackPanel to list them horizontally instead of vertically. – Jack Dec 05 '18 at 15:08
  • I did that, but then they did not take the entire size of the `StackPanel` - they were all aligned to the left.. – Idanis Dec 05 '18 at 15:10
  • 1
    You may use a UniformGrid, with a specified number of rows or columns, as your ItemsSource.ItemsPanel. It will give your items an equal width and fill the available space. – Jack Dec 05 '18 at 15:16

1 Answers1

0

ItemsControl by default will arrange the items vertically.

For a horizontal layout, you need to change its ItemsPanel, to a different ItemsPanelTemplate - using either a horizontal StackPanel, or something like a UniformGrid, depending on what you want to happen when there are more than three FrameViewer items in the collection.

See here for some examples.

You would then need to set the ItemsControl ItemTemplate to an appropriate DataTemplate, to ensure that each FrameViewer item is displayed at the required size.

Peregrine
  • 4,287
  • 3
  • 17
  • 34