WinRT - How to use columns in ListView header?

[afree]

I’ve been using WPF for a while now, but when i moved to WinRT to make some universal Windows Application (uwp) i got stuck at making a listview with column headers.

in WPF we used to do that through :

<ListView>
    <ListView.View>
        <!-- You define the way the Columns will be displayed. -->
    </ListView.View>
</ListView>

But now i discovered that

“WinRT does NOT have any ListView.View property”.

I searched for a while i couldn’t find any alternative, can you please help?

[sparta (this.is.sparta)]

WinRT and UWP ListView Doesn’t allow having columns. (plus it doesn’t make sense either when you think about phone and tablet apps).

[Yassine]

as @sparta commented out, WinRT doesn’t have any columns elements. so obviously it’s really recommended to avoid that, especially in Tablet and phone targeted apps.

But if you still insist in having columns header, in your WinRT ListView here is a small workaround XAML to make it:

<!-- XAML Resources -->
 
<!-- We Add Borders around each ListView Item, to make it look like a grid, you can change this. -->
<Style x:Name="ItemBorder" TargetType="Border">
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="White" />
</Style>
<Style x:Name="ColumnItemBorder" TargetType="Border">
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="Silver" />
</Style>

<!-- The ListView Control -->
<ListView x:Name="ListView1" ItemsSource="{StaticResource ListViewItemsCollectionView}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!-- ItemTemplate: ItemData is linked to the DataMembers of the ListView ItemsSource. -->
                <Border Style="{StaticResource ItemBorder}" Grid.Column="0" >
                    <TextBlock Text="{Binding DataMember_1}" />
                </Border>
                <Border Style="{StaticResource ItemBorder}" Grid.Column="1" >
                    <TextBlock Text="{Binding DataMember_2}" />
                </Border>
                <Border Style="{StaticResource ItemBorder}" Grid.Column="2" >
                    <TextBlock Text="{Binding DataMember_3}" />
                </Border>
                <Border Style="{StaticResource ItemBorder}" Grid.Column="3" >
                    <TextBlock Text="{Binding DataMember_4}" />
                </Border>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.Template>
        <!-- We Change the ListView's Template to add the Column Headers as requested. -->
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>  <!-- Columns Header: Will be like normal Grid.Row. -->
                    <RowDefinition Height="*"/>     <!-- ListView Rows. -->
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="0">
                        <TextBlock>Data Member #1</TextBlock>
                    </Border>
                    <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="1">
                        <TextBlock>Data Member #2</TextBlock>
                    </Border>
                    <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="2">
                        <TextBlock>Data Member #3</TextBlock>
                    </Border>
                    <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="3">
                        <TextBlock>Data Member #4</TextBlock>
                    </Border>
                </Grid>
                
                <!-- Our ListView's Regular Rows. -->
                <ItemsPresenter Grid.Row="1"></ItemsPresenter>
            </Grid>
        </ControlTemplate>
    </ListView.Template>
</ListView>

Remember the XAML above will result in a neither Draggable nor Resizable Columns, to add that functionality (though it’s not advised for Phone & Tablet) you can make some more advanced customization.

That’s it.

[sparta (this.is.sparta)]

I think Windows Runtime XAML has column headers :o no need to redo it!

[KunniCan]

I don’t think that’s entirely correct, Universal Windows Apps and Windows Runtime ListView in general

Does Not Have Column Headers At All

And in fact it doesn’t even have a GridView property for ListViews (like in WPF) so there is no way to add that except by following the Xaml code @Yassine suggested, other than that don’t think it’s doable.

[Yassine]

Are you sure @sparta

hmm… Or are you talking about some different WinRT The UWP & WinRT in general that I know doesn’t have any column headers officially.