CODEWITHSUNDEEP
c#.netwpf
Tornike Gomareli
Tornike Gomareli

Reputation: 1709

StackPanels in WrapPanel WPF

enter image description here

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 enter image description here

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?

Upvotes: 0

Views: 589

Answers (2)

TimvZon
TimvZon

Reputation: 240

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>

Upvotes: 2

Michael Matt
Michael Matt

Reputation: 34

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.

Upvotes: 1

Related Questions