How to make DataGrid work with WrapPanel?

Dec 4, 2008 at 7:40 AM
Edited Dec 4, 2008 at 7:45 AM

How can we implement following requirement by using DataGrid?
When only one column of data need be displayed, it is displayed in such way:
The data is filled into DataGrid cells of the first column,
if all the cells of the first column is full,
then the data will be filled into the cells of second column and so on.

Example 1: Display 1 column of data
----------------------------
|A1   | A5   | A9   |      |
----------------------------
|A2   | A6   | A10  |      |
----------------------------
|A3   | A7   |       |       |
----------------------------
|A4   | A8   |       |       |
----------------------------

Example2: Display two columns of data
----------------------------
|A1   | B1   | A5   |B5    |
----------------------------
|A2   | B2   | A6   |B6    |
----------------------------
|A3   | B3   |       |       |
----------------------------
|A4   | B4   |       |       |
----------------------------

If the height of DataGrid is increased, and it can display 5 rows.
The data of above will be displayed in following way.
----------------------------
|A1   | B1   | A6   |B6    |
----------------------------
|A2   | B2   |       |       |
----------------------------
|A3   | B3   |       |       |
----------------------------
|A4   | B4   |       |       |
----------------------------
|A5   | B5   |       |       |
----------------------------


For ListView, I can modify the ControlTemplate of it to make the column wrap. But I don't know how to do this on DataGrid.
        <Style TargetType="{x:Type ListView}">
               <Setter
            Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation ="Vertical" x:Name="listViewWrapPanel"
                               Height="{Binding (FrameworkElement.ActualHeight),
                                   RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                               ItemWidth="{Binding (ListView.View).ItemWidth,
                                   RelativeSource={RelativeSource AncestorType=ListView}}"
                               MinWidth="{Binding ItemWidth,
                                   RelativeSource={RelativeSource Self}}"
                               ItemHeight="{Binding (ListView.View).ItemHeight,
                                   RelativeSource={RelativeSource AncestorType=ListView}}"
                               MinHeight="{Binding ItemHeight,
                                   RelativeSource={RelativeSource Self}}"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Dec 15, 2008 at 9:08 AM
I want try another solution.
Suppose the binding data collection has 4 fields, and the DataGrid has 4 Columns.
To display the collection of data A1 to A10 as following figure shows, the orginal data A1 to A4 will be put in the first field of the binding source data collection,
A5 to A8 will be put into the second field of the binding source data collection, A9 and A10 will be put into the third field of the binding source data collection.
Example 1: Display 1 column of data
----------------------------
|A1   | A5   | A9   |      |
----------------------------
|A2   | A6   | A10  |      |
----------------------------
|A3   | A7   |       |       |
----------------------------
|A4   | A8   |       |       |
----------------------------

I want to know how to know how many rows as much as possible can be displayed in DataGrid without showing the vertical scrollbar.
As the number of rows is known, I can put the data into the binding source data collection.
Sep 29, 2014 at 7:41 PM
have you found a solution to this?