Dynamically add items to grid WPF

Question

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:

Currently I'm seeing them sorted vertically like this:

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?

Answer 1

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.