Column auto sizing?

[catmanjan]

I can see

WinUI.TableView/src/TableViewHeaderRow.cs

Line 276 in 3c3abe4

internal void CalculateHeaderWidths()

But I can't work out how to set up a table to set up columns to autostretch - I am just using ItemsSource="{x:Bind ViewModel.Items}" so I'm not setting widths on any columns directly

[w-ahmad]

When columns are auto-generated, their width is set to Auto, allowing them to stretch according to the cell content and header width. If they aren’t stretching, there might be an issue with the implementation. Could you share some code snippets?

[catmanjan]

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="Ingress.IngressAnalystPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ingress"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:tv="using:WinUI.TableView" d:DataContext="{d:DesignInstance Type=local:Item}">
    <Grid>
        <!--<ProgressRing x:Name="ProgressRing1" />-->
        <TabView CanDrag="False" CanDragTabs="False" CanReorderTabs="False" CanTearOutTabs="False" IsAddTabButtonVisible="False">
            <TabViewItem Header="Warnings" IsClosable="False">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Important" />
                </TabViewItem.IconSource>
                <TabViewItem.Content>
                    <tv:TableView x:Name="MyTableView" 
                                  AutoGenerateColumns="True"
                                  ItemsSource="{x:Bind ViewModel.Items}" 
                                  CanFilterColumns="False" 
                                  CanSortColumns="False" 
                                  CanReorderColumns="False" 
                                  CanReorderItems="False" 
                                  CanResizeColumns="False" 
                                  HeadersVisibility="Columns">
                    </tv:TableView>
                </TabViewItem.Content>
            </TabViewItem>
        </TabView>
    </Grid>
</Page>

[catmanjan]

Perhaps what I'm looking for isn't quite what the feature does - I want the columns to stretch to fill available space, rather than stretch to fill content

[w-ahmad]

Just tried it and noticed an issue with auto-sizing when the item count is small. I’ll work on fixing it in a future release.

For filling columns to the available size, the column width is of type GridLength, so setting it to * will make it stretch to fit. Since the columns are generated automatically in your example, you’ll need to handle the AutoGeneratingColumn event and adjust the column’s properties there.

    private void TableView_AutoGeneratingColumn(object sender, TableViewAutoGeneratingColumnEventArgs e)
    {
        e.Column.Width = new GridLength(1, GridUnitType.Star);
    }

[catmanjan]

Thanks thats nearly perfect - it looks like you get a little constant width at the end of all column when you do that:

[catmanjan]

Also see how the text is abruptly cut off in the first column? Can that be auto ellipsized?

[w-ahmad]

That right margin is maybe coming due to the hidden row's header width. I'll check it up.

The built-in text column is not set to show eclipses. you can try it with templated column with own data template or override the existing text column with your own display element.

[catmanjan]

How would I do that with autogenerated?

[w-ahmad]

You can create a custom column type by inheriting from TableViewTextColumn and overriding the GenerateElement method to access the generated TextBlock. From there, adjust the TextTrimming property as desired. Then, within the AutoGeneratingColumn event, create this new column and assign it to the even args's Column proeprty.

private void TableView_AutoGeneratingColumn(object sender, TableViewAutoGeneratingColumnEventArgs e)
{
    if (e.Column is TableViewTextColumn textColumn)
    {
        e.Column = new MyTableViewTextColumn
        {
            Header = e.Column.Header,
            Binding = textColumn.Binding
        };
    }
}

public partial class MyTableViewTextColumn : TableViewTextColumn
{
    public override FrameworkElement GenerateElement(TableViewCell cell, object? dataItem)
    {
        var textBlock = (TextBlock)base.GenerateElement(cell, dataItem);
        textBlock.TextTrimming = TextTrimming.CharacterEllipsis;
       
        return textBlock;
    }
}