locked
How to achieve a 'wrapping' DataGrid effect? RRS feed

  • Question

  • I have information that is best displayed in a tabular format or rows and columns. However, the data itself has a fair number of rows but only a few columns. Due to constraints in the layout the result is a cluster of columns on the left with a great deal of unused screen space on the right. The perfect solution would be for the data to wrap in much the same fashion as one would achieve using a ListBox that displays rows of multiple columned data using a WrapPanel as the means by which the rows of data object would be presented. While the data presented in the fashion that was desired the loss of the column header row was objected to by the people that will be using the program.

    Maybe a visual of what the View looks like when using a DataGrid will better illustrate the problem and make it clearer what I'd like to accomplish.

    My first attempt at this was to use a ListBox and insert the WrapPanel in it. I was able to get the columns I wanted but could not figure out how to detect when the wrap panel wrapped a new column and so could not figure out how to insert a new row header. Any ideas?


    Richard Lewis Haggard

    Thursday, October 29, 2015 12:00 PM

Answers

  • I don't see the relationship between the datagrid and the area below it.

    I notice you have a slider there though.

    Most monitors are rectangular now.
    Could you arrange the data below to the right of the datagrid and perhaps make the window wider?

    Or rely on that data sliding vertically as well.

    Maybe sort of:

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <DataGrid />
            <ScrollViewer Grid.Column="1">
                <Grid>
                    Other data from below grid
                </Grid>
            </ScrollViewer>

    There are fancier options.

    You could put some of the data in a flyout style panel slides in or the back of a panel flips over if it's not used much.


    Hope that helps.

    Technet articles: WPF: MVVM Step 1; All my Technet Articles

    Thursday, October 29, 2015 12:57 PM
  • I still have not figured this out so I punted and used a ListBox with a wrap panel for a display area and each ListBoxItem contains a grid with one row and 5 columns, the widths of each are shared between rows so that the row columns all line up nicely. It is not what I wanted but it is close enough to keep my consumers happy.

    Here's my result. In this case both the upper 'grid' and the lower 'name/value pair' items are presented in the listbox fashion described above.


    Richard Lewis Haggard


    Saturday, November 7, 2015 4:51 AM

All replies

  • I don't see the relationship between the datagrid and the area below it.

    I notice you have a slider there though.

    Most monitors are rectangular now.
    Could you arrange the data below to the right of the datagrid and perhaps make the window wider?

    Or rely on that data sliding vertically as well.

    Maybe sort of:

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <DataGrid />
            <ScrollViewer Grid.Column="1">
                <Grid>
                    Other data from below grid
                </Grid>
            </ScrollViewer>

    There are fancier options.

    You could put some of the data in a flyout style panel slides in or the back of a panel flips over if it's not used much.


    Hope that helps.

    Technet articles: WPF: MVVM Step 1; All my Technet Articles

    Thursday, October 29, 2015 12:57 PM
  • I still have not figured this out so I punted and used a ListBox with a wrap panel for a display area and each ListBoxItem contains a grid with one row and 5 columns, the widths of each are shared between rows so that the row columns all line up nicely. It is not what I wanted but it is close enough to keep my consumers happy.

    Here's my result. In this case both the upper 'grid' and the lower 'name/value pair' items are presented in the listbox fashion described above.


    Richard Lewis Haggard


    Saturday, November 7, 2015 4:51 AM
  • Hi Richard.Haggard,

    Thanks for your solution, you could mark your answer, it would be helpful to other developers to find the result of the similar questions.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, November 10, 2015 2:40 AM
  • Hi Richard.Haggard,

    Thanks for your solution, you could mark your answer, it would be helpful to other developers to find the result of the similar questions.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Xavier, it's great to see all your contributions here! Can you email me? It's edprice at Microsoft. Thanks!

    Ed Price, Azure & Power BI Customer Program Manager (Blog, Small Basic, Wiki Ninjas, Wiki)

    Answer an interesting question? Create a wiki article about it!

    Saturday, December 5, 2015 8:35 PM