DataGrid work with WrapPanel as ItemsPanel

Question

How can i implement the a vertical WrapPanel as a DataGrid's ItemsPanel? The DataGrid will, instead of expanding in height , break horizontally into another column (with header and all). My Problem is similar to the Example 2 on this thread How to make DataGrid work with WrapPanel?

As an example. If the all rows can't fit the height next rows start on the next column

|H1   | H2   |   |H1   |H2    | 
--------------   --------------
|A1   | B1   |   |A5   |B5    |
--------------   --------------
|A2   | B2   |   |A6   |B6    |
--------------   --------------
|A3   | B3   |   |A7   |B7    |
--------------   --------------
|A4   | B4   |   |      |     |
--------------   --------------

If the height of the datagrid is increased then,

|H1   | H2   |   |H1   |H2    |
--------------   --------------
|A1   | B1   |   |A7   |B7    |
--------------   --------------
|A2   | B2   |   |     |      |
--------------   --------------
|A3   | B3   |   |     |      |
--------------   --------------
|A4   | B4   |   |     |      |
--------------   --------------
|A5   | B5   |   |     |      |
--------------   --------------
|A6   | B6   |   |     |      |
--------------   --------------

Currently

I have managed to get it to break into the next column

<DataGrid ItemsSource="{Binding Path=Items}">
    <DataGrid.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel MaxHeight="500" Orientation="Vertical" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </DataGrid.ItemsPanel>
    <DataGrid.Columns>
        <DataGridTextColumn Header="No." Binding="{Binding Item1}" />
        <DataGridCheckBoxColumn Header="A" Binding="{Binding Item2}" />
        <DataGridCheckBoxColumn Header="B" Binding="{Binding Item3}" />
        <DataGridCheckBoxColumn Header="C" Binding="{Binding Item4}" />
        <DataGridCheckBoxColumn Header="D" Binding="{Binding Item5}" />
        <DataGridTextColumn Binding="{x:Null}" />
    </DataGrid.Columns>
</DataGrid>

I have disabled the headers in the code as i can't get it repeat for the next columns and added an empty column as i can't get the margin when the rows begin again in next column.

This works fine (except for the above reasons) when the grid doesn't need to scroll horizontally. But when the grid needs to scroll horizontally, every column starts scrolling and disappears to the left

When Not Scrolling

When Scrolling

Answer 1

I know its very late to answer to this question. (It's been 6yrs ago, LOL) I hope I understand your question well, this the first time answering on here~

When I am using your code to test on my side, I got the same issue when scrolling left and right. The solution of mine is to add a layer of listview outside of the datagrid. If we use the datagrid own scrollbar and the setting of the datagrid is not good enough, the view will confuse the user.

So, adding a listview at the outter layer of datagrid can help to solve the scrolling issue, because the listview does not limit the size of the content therefore the datagrid will not force its own scrollbar to appear.

<ListView Grid.Row="0" HorizontalAlignment="Center">
    <DataGrid Name="dtGrid" ItemsSource="{Binding DtGridData}" AutoGenerateColumns="False" BorderBrush="Blue" BorderThickness="5" HeadersVisibility="Column">
        
        <DataGrid.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel MaxHeight="300" Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </DataGrid.ItemsPanel>
        
        
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name"
                            Binding="{Binding Custname}"
                            Width="100">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" 
                            Value="BlanchedAlmond" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Header="Mobile NO"
                            Binding="{Binding Mobileno}"
                            Width="100"
                            FontFamily="Times New Roman" >
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" 
                            Value="MistyRose" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Credit"
                            Binding="{Binding Credit}"
                            Width="100"
                            FontFamily="Times New Roman" >
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" 
                            Value="Honeydew" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
    </ListView>

The image below shows when the window become smaller the scrollbar of the listview will appear but not the datagrid's scroll bar.

result

Hope this help, and to be honest your idea of adding wrappanel into the itemspanel save my life. Thanks, ha!