UWP - create table view with resizable columns - xaml

Question

I know there is no DataGrid or DataGridView controls in UWP. I also read advices to rethink design to avoid using table view in UWP applications, but i still need it. I was able to emulate DataGrid partially using ListView control and GridSplitter from Microsoft.Toolkit.Uwp.UI.Controls. Here is my code:
<Page.Resources>
<Style x:Name="ItemBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="White" />
</Style>
<Style x:Name="ColumnItemBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="Silver" />
</Style>
</Page.Resources>
<ListView x:Name="PersonsTableView"
ItemsSource="{Binding Path=Persons, Mode=TwoWay}"
SelectedItem="{Binding Path=SelectedPerson, Mode=TwoWay}">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<Border Style="{StaticResource ColumnItemBorder}" Grid.Column="0">
<TextBlock>FirstName</TextBlock>
</Border>
<UWPToolKit:GridSplitter Grid.Column="1" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
<Border Style="{StaticResource ColumnItemBorder}" Grid.Column="2">
<TextBlock>MiddleName</TextBlock>
</Border>
<UWPToolKit:GridSplitter Grid.Column="3" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
<Border Style="{StaticResource ColumnItemBorder}" Grid.Column="4">
<TextBlock>LastName</TextBlock>
</Border>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate x:Name="TableDataTemplate" x:DataType="local:PersonEntity">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<!-- ItemTemplate: ItemData is linked to the DataMembers of the ListView ItemsSource. -->
<Border Style="{StaticResource ItemBorder}" Grid.Column="0" >
<TextBlock Text="{x:Bind Person.FirstName}" />
</Border>
<UWPToolKit:GridSplitter Grid.Column="1" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
<Border Style="{StaticResource ItemBorder}" Grid.Column="2" >
<TextBlock Text="{x:Bind Person.MiddleName}" />
</Border>
<UWPToolKit:GridSplitter Grid.Column="3" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
<Border Style="{StaticResource ItemBorder}" Grid.Column="4" >
<TextBlock Text="{x:Bind Person.LastName}" />
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<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>
</ListView>
The problem is that this way I can only resize columns within current row and my requirement is - resize the whole column. Also i need to be able to add columns dynamically in code.

Answer 1

You should look into Telerik UI for UWP toolkit. It is open source under the Apache license and it contains a RadDataGrid control which does exactly what you need, including resizable columns.

Answer 2

Insert a WebView Control, then use HTML tables instead?
HTML example of table with resizeable columns
HTML:
<div class="container">
<h2>Resizable Columns</h2>
<table class="table table-bordered"
data-resizable-columns-id="demo-table-v2">
<thead>
<tr>
<th data-resizable-column-id="nr">#</th>
<th data-resizable-column-id="first_name">First Name</th>
<th data-resizable-column-id="nickname">Nickname</th>
<th data-resizable-column-id="last_name">Last Name</th>
<th data-resizable-column-id="username" id="username-column">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Dude Meister</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Barney von Matterhorn</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>What</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</diu>
CSS:
table{
table-layout: fixed;
td, th{
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
}
JS:
$(function() {
$("table").resizableColumns({
store: window.store
});
});