0

I have a seemingly very simple requirement: I want to create a scrollable table/gridbox/gridview with two headers. The table should bind a data set called DataSet containing a collection of objects with the properties Column1 and Column2. Furthermore, the body of the table should be vertically scrollable. See the image below for an illustration.

The type of table I want to create

However simple this seems, I cannot manage to do it.

I tried using a ListBox control with two TextBlocks on top but this looks ugly (since the headers are not aligned properly and are not part of the table). and I am sure there is a better solution that I just haven't found yet.

Can someone show me how to create a grid like the description above which binds a data set called DataSet which has Column1 and Column2 and where the body is vertically scrollable?

user2609980
  • 10,264
  • 15
  • 74
  • 143
  • 1
    Should the header always be on top of the screen, or should it be scrolled with the list? – Schullz Oct 14 '15 at 11:00
  • @Schullz Only the body should be scrollable. I updated the question because this was not clear. – user2609980 Oct 14 '15 at 11:02
  • I've done something similar, just without titles, create a stack panel inside a list view. In your circumstance, nest a stack panel in a list view. then use headers above them – Harvey Oct 14 '15 at 11:12
  • @Harvey, could you please post your XAML-code here? – Schullz Oct 14 '15 at 11:16

1 Answers1

1

I would use an embedded stack panel in a list view. So, you have a scrollable stack which you can populate with information. Then use text blocks at the top for headers.

The below XAML is purely example and probably wont work well.

<ListView x:Name="NameofList">
                    <ListView.DataContext>
                        <Put in your object type! (Maybe a mapped class?)>
                    </ListView.DataContext>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel x:Name="stackList"
                                        Grid.ColumnSpan="2"
                                        Width="595"
                                        Height="59"
                                        HorizontalAlignment="Left"
                                        BorderBrush="#FF595050"
                                        BorderThickness="0,1">
                                <TextBlock x:Name="tbListName"
                                           FontWeight="Bold"
                                           Text="{Binding Name}" />
                                <TextBlock x:Name="tbListDate"
                                           FontWeight="Bold"
                                           Text="{Binding Date}" />
                                <TextBlock x:Name="tbListNote1"
                                           FontWeight="Bold"
                                           Text="{Binding Number}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <Your object! />
                </ListView>
Harvey
  • 1,320
  • 3
  • 13
  • 33
  • Thanks for your help. How can I get the text blocks in the stackpanel to be displayed next to each other at the same width of the headers? – user2609980 Oct 14 '15 at 21:21
  • Use 'orientation="horizontal" as a property of the stack panel, and manually setting the 'width' property of each, should give you what your after – Harvey Oct 14 '15 at 21:58
  • Your answer combined with [this one](http://stackoverflow.com/questions/13849912/windows-8-xaml-listview-with-header-and-item-template-columns-should-have-same-d#15192047) makes it start to look like what I want. – user2609980 Oct 14 '15 at 22:07