Is there a way to create a column names above the columns from ListView in Xamarin C#

Issue

I have a three columns from ListView with grid. Is there a way to create a Names above the columns... For now they look like that.

ListView without column names

The code for listview look like this:

           <StackLayout>
              <ListView BackgroundColor="#d3d3d3"
                        x:Name="MeteoView"
                        ItemsSource="{Binding Forecast}"
                        HeightRequest="132"
                        IsVisible="false"
                        RowHeight="46">
                <ListView.ItemTemplate>
                  <DataTemplate>
                  <ViewCell>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                                  

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30*" />
                                    <ColumnDefinition Width="30*" />
                                    <ColumnDefinition Width="30*" />
                                </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Text="{Binding DisplayDat}"/>
                        <Label Grid.Column="1" Text="{Binding DisplayT_2M}"/>
                        <Label Grid.Column="2" Text="{Binding DisplayVmax_10M}"/>
                        
                    </Grid>
                </ViewCell>
                  </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

How to set static string to show Name on every column ?

Solution

Option 1:

You could set the Header of the ListView

<ListView.Header>
   <Grid>
       <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
                                  

       <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="30*" />
       </Grid.ColumnDefinitions>

       <Label Grid.Column="0" Text="xxx"/>
       <Label Grid.Column="1" Text="xxx"/>
       <Label Grid.Column="2" Text="xxx"/>
                        
   </Grid>
</ListView.Header>

Note : In this ways the header will scroll with the whole ListView .

Option 2

If you want the Name fix in screen , you could define another Grid on the top of ListView

<Grid>
       <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
                                  

       <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="30*" />
       </Grid.ColumnDefinitions>

       <Label Grid.Column="0" Text="xxx"/>
       <Label Grid.Column="1" Text="xxx"/>
       <Label Grid.Column="2" Text="xxx"/>
                        
   </Grid>
   <ListView>
     //...
   </ListView>

Answered By - Lucas Zhang - MSFT