uwp xaml listview with header and datatemplate

Question

How can i add a header to a listview in xaml? I have this listview with a DataTemplate and cannot figure out how to get a header for the both text blocks.

<ListView Name="myListView"  Grid.Row="2"  IsItemClickEnabled="True" ItemClick="ListView_ItemClick" >

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>

            <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Thema">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock FontSize="16" Text="{x:Bind Name}" VerticalAlignment="Center" Grid.Column="0" />

                    <TextBlock FontSize="16" Text="{x:Bind FachId}" VerticalAlignment="Center" Grid.Column="1" />

                </Grid>

            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

The Listview gets its data from the c# code in the background: myListView.ItemsSource = tempThemen; It is a List with items in it.

Reverie

Just add <ListView.Header> with related content? – Edington

Do you want a header for each item or each group of items? – Posen

Answer 1

Easier than you think.

<TextBlock Grid.Column="0">
    <Run Text="Name" />
    <LineBreak />
    <Run Text="{x:Bind Name}" />
</TextBlock>

<TextBlock Grid.Column="1">
    <Run Text="FachId" FontWeight="Bold" />
    <LineBreak />
    <Run Text="{x:Bind FachId}" />
</TextBlock>

Best of luck!

Swaggering

As you can see: I defined a grid with 3 columns in the DataTemplate and i would like to have a header for every of the 3 columns. I could use the <ListView.Header> tag before the DataTemplate and inside the <ListView> but then the header hasn´t the same width like the content in the DataTemplate. I like to achieve something like in the financial app: imgur.com/yCmdVxU – Reverie

when using x:Bind, you should set Mode=OneWay, or it will not update when value changed. The default Mode of compiled binding is OneTime – Matador

Answer 2

I create Header Rows on my ListViews by defining ListView.HeaderTemplate.

 <ListView.HeaderTemplate>
     <DataTemplate>
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="8*" MinWidth="135"/>
                 <ColumnDefinition Width="15*" MinWidth="150"/>
                 <ColumnDefinition Width="3*" MinWidth="20"/>
                 <ColumnDefinition Width="2*" MinWidth="10"/>
             </Grid.ColumnDefinitions>

             <Border BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Race Date" Margin="5,0,0,0" />
             </Border>
             <Border Grid.Column="1" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Circuit" Margin="5,0,0,0"/>
             </Border>
             <Border Grid.Column="2" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Laps" Grid.Column="2" Margin="0,0,5,0" HorizontalAlignment="Right"/>
             </Border>
             <Border Grid.Column="3" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
             </Border>

         </Grid>                   
     </DataTemplate>
 </ListView.HeaderTemplate>

Then I define the ListView.ItemTemplate with the same column definitions. After that, you'll notice that the ListViewItems have some padding and margins screwing up the alignment of the header and items. You can fix this in ListView.ItemContainerStyle like so:

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>

Apian

In WinUI3, adding the ItemContainerStyle element broke a lot of default functionality of the ListView such as highlighting the selected item. :( – Connection