How to dynamically scale column width in UWP ListView with DataTemplate like table

Question

I am working on a UWP Desktop application with a ListView with Table Datatemplate. When I set fixed widths for the columns, the items are aligned with the headers, but when I try to change the width to "*" to occupy the available width in the grid, when the application is maximized, for example, the items are not aligned. Any help is most welcome. Thanks.

Code that works...

<ListView x:Name="lvwTest">
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Padding="12" Margin="3,5,3,5" Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Header 1" />
                    <TextBlock Grid.Column="1" Text="Header 2" />
                    <TextBlock Grid.Column="2" Text="Header 3" />
                    <TextBlock Grid.Column="3" Text="Header 4" />
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate x:Name="TableDataTemplate" >
                <Grid Margin="3,5,3,5" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="{Binding OriginalText}" />
                    <TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="{Binding TextForAudio}"/>
                    <TextBlock Grid.Column="2" FontSize="12" Text="{Binding Start}"/>
                    <TextBlock Grid.Column="3" FontSize="12" Text="{Binding Stop}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Code that fail...

<ListView x:Name="lvwTest">
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Padding="12" Margin="3,5,3,5" Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Header 1" />
                    <TextBlock Grid.Column="1" Text="Header 2" />
                    <TextBlock Grid.Column="2" Text="Header 3" />
                    <TextBlock Grid.Column="3" Text="Header 4" />
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate x:Name="TableDataTemplate" >
                <Grid Margin="3,5,3,5" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="{Binding OriginalText}" />
                    <TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="{Binding TextForAudio}"/>
                    <TextBlock Grid.Column="2" FontSize="12" Text="{Binding Start}"/>
                    <TextBlock Grid.Column="3" FontSize="12" Text="{Binding Stop}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

but when I try to change the width to "*" to occupy the available width in the grid, when the application is maximized, for example, the items are not aligned.

The problem is the default HorizontalContentAlignment of ListViewItem is not Stretch, so the ListViewItem content will not fill the listview column. For this scenario, you could set ItemContainerStyle like following to make the content strech. For more please refer ItemContainerStyle document.

<ListView x:Name="lvwTest">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.HeaderTemplate>
    ......