How to overflow the container?

Question

How to stack up the stackpanel vertically if it does not fit in the app?

• below code works fine with full screen app
• With resizing it does not fit due to fixed width
• With resize, How to stack up vertically.i.e not fitting stack panel should overflow the container i.e. stackpanel should stack up vertically and scroll bar appears as shown in third image?

    <ScrollViewer VerticalScrollBarVisibility="Auto"  HorizontalScrollBarVisibility="Disabled">
        <Grid HorizontalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Background="Red"/>
            <StackPanel Grid.Column="2" Background="Red"/>
            <StackPanel Grid.Column="4" Background="Red"/>
            <StackPanel Grid.Column="6" Background="Red"/>
            <StackPanel Grid.Column="8" Background="Red"/>
        </Grid>
       
    </ScrollViewer>

output with full screen:

output with resize the app to small :

How to achieve below result? scorll appaers

scroll down:

Answer 1

This is an example making use of WrapPanel. The layout depends on actual requirements.

<ScrollViewer HorizontalScrollBarVisibility="Disabled"
              VerticalScrollBarVisibility="Auto">
    <WrapPanel Margin="0,0,-15,-10">
        <WrapPanel.Resources>
            <Style x:Key="WrapPanelItem" TargetType="{x:Type ContentControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Border Background="White">
                                <Grid Width="200"
                                      Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}, Path=ActualHeight}"
                                      Margin="0,0,15,10"
                                      Background="Red">
                                    <ContentPresenter/>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </WrapPanel.Resources>

        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
    </WrapPanel>
</ScrollViewer>