WrapPanel WPF中的StackPanels

Question

Goal is to create Layout like this.

I'm from iOS development and new to WPF development, so my thoughts are going to CollectionViews of StackViews with 4 multi media elements from iOS, but I know that in WPF things are working a far different then in iOS. So I'm going to use StackPanels and WrapPanels in WPF, if my solution is WRONG please give me a better one.

<Window x:Class="WPF_MultiViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_MultiViewer"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <WrapPanel>
            <StackPanel x:Name="MyStackPanel">
                <StackPanel Orientation="Horizontal">
                    <Button Height="100" Width="80">Button1</Button>
                    <Button Height="100" Width="80">Button2</Button>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <Button Height="100" Width="80">Button1</Button>
                    <Button Height="100" Width="80">Button2</Button>
                </StackPanel>
            </StackPanel>
        </WrapPanel>
    </Grid>
</Window>

Result is this

I know that if I will hardcode it and copy paste 12 times, it will work but problem is that I want to create ONE template and then create it dynamically for example 12 times 4 stack panel in one column. To control and maintain it easily, How can I achieve this in WPF?

Answer 1

To give you an example to work with:

<ItemsControl x:Name="Stacks" Grid.Column="0" ItemsSource="{Binding example}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Whatever you want"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Content="{Binding Eaxmple}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Answer 2

In WPF you can use the MVVM (Model-View-ViewModel) Pattern. If you want to create elements dynamically you could also use a Library called "Prism" in wpf. Here https://www.c-sharpcorner.com/article/how-to-add-the-dynamic-control-in-to-the-view-from-view-mode/ is a little tutorial how you can create an element at runtime.

For your requirement I would use a Grid and the ViewModel can create the elements dynamically for the defined Rows and Columns.