How to autosize and right-align GridViewColumn data in WPF?

Question

How can I:

• right-align the text in the ID column
• make each of the columns auto size according to the text length of the cell with the longest visible data?

Here is the code:

<ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">     <ListView.View>         <GridView>             <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}" Width="40"/>             <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="100" />             <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}"/>         </GridView>     </ListView.View> </ListView> 

partial answer:

Thanks Kjetil, the GridViewColumn.CellTemplate works well and the Auto Width works of course but when the ObservativeCollection "Collection" is updated with longer-than-column-width data, the column sizes do not update themselves so that is only a solution for the initial display of data:

<ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">     <ListView.View>         <GridView>             <GridViewColumn Header="ID" Width="Auto">                 <GridViewColumn.CellTemplate>                     <DataTemplate>                         <TextBlock Text="{Binding Id}" TextAlignment="Right" Width="40"/>                     </DataTemplate>                 </GridViewColumn.CellTemplate>             </GridViewColumn>             <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="Auto" />             <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" Width="Auto"/>         </GridView>     </ListView.View> </ListView> 

Answer 1

To make each of the columns autosize you can set Width="Auto" on the GridViewColumn.

To right-align the text in the ID column you can create a cell template using a TextBlock and set the TextAlignment. Then set the ListViewItem.HorizontalContentAlignment (using a style with a setter on the ListViewItem) to make the cell template fill the entire GridViewCell.

Maybe there is a simpler solution, but this should work.

Note: the solution requires both HorizontalContentAlignment=Stretch in Window.Resources and TextAlignment=Right in the CellTemplate.

<Window x:Class="WpfApplication6.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources>     <Style TargetType="ListViewItem">         <Setter Property="HorizontalContentAlignment" Value="Stretch" />     </Style> </Window.Resources> <Grid>     <ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">         <ListView.View>             <GridView>                 <GridViewColumn Header="ID" Width="40">                     <GridViewColumn.CellTemplate>                         <DataTemplate>                             <TextBlock Text="{Binding Id}" TextAlignment="Right" />                         </DataTemplate>                     </GridViewColumn.CellTemplate>                 </GridViewColumn>                 <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="Auto" />                 <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" Width="Auto"/>             </GridView>         </ListView.View>     </ListView> </Grid> </Window> 

Answer 2

If the width of the contents changes, you'll have to use this bit of code to update each column:

private void ResizeGridViewColumn(GridViewColumn column) {     if (double.IsNaN(column.Width))     {         column.Width = column.ActualWidth;     }      column.Width = double.NaN; } 

You'd have to fire it each time the data for that column updates.