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    lt ListView Name  lstCustomers  ItemsSource   Binding Path Collection   gt       lt ListView View gt           lt GridView gt               lt GridViewColumn Header  ID  DisplayMemberBinding   Binding Id   Width  40   gt               lt GridViewColumn Header  First Name  DisplayMemberBinding   Binding FirstName   Width  100    gt               lt GridViewColumn Header  Last Name  DisplayMemberBinding   Binding LastName    gt           lt  GridView gt       lt  ListView View gt   lt  ListView gt    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    lt ListView Name  lstCustomers  ItemsSource   Binding Path Collection   gt       lt ListView View gt           lt GridView gt               lt GridViewColumn Header  ID  Width  Auto  gt                   lt GridViewColumn CellTemplate gt                       lt DataTemplate gt                           lt TextBlock Text   Binding Id   TextAlignment  Right  Width  40   gt                       lt  DataTemplate gt                   lt  GridViewColumn CellTemplate gt               lt  GridViewColumn gt               lt GridViewColumn Header  First Name  DisplayMemberBinding   Binding FirstName   Width  Auto    gt               lt GridViewColumn Header  Last Name  DisplayMemberBinding   Binding LastName   Width  Auto   gt           lt  GridView gt       lt  ListView View gt   lt  ListView gt

User · Accepted Answer

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>

User · Answer

I have created the following class and used across the application wherever required in place of GridView        lt summary gt      Represents a view mode that displays data items in columns for a System Windows Controls ListView control with auto sized columns based on the column content           lt  summary gt  public class AutoSizedGridView   GridView               protected override void PrepareItem ListViewItem item                foreach  GridViewColumn column in Columns                           Setting NaN for the column width automatically determines the required                width enough to hold the content completely                  If the width is NaN  first set it to ActualWidth temporarily              if  double IsNaN column Width                 column Width   column ActualWidth                  Finally  set the column with to NaN  This raises the property change                event and re computes the width              column Width   double NaN                                              base PrepareItem item

User · Answer

I created a function for updating GridView column headers for a list and call it whenever the window is re-sized or the listview updates it s layout   public void correctColumnWidths         double remainingSpace   myList ActualWidth       if  remainingSpace  gt  0                 for  int i   0  i  lt   myList View as GridView  Columns Count  i                  if  i    2                     remainingSpace -   myList View as GridView  Columns i  ActualWidth               Leave 15 px free for scrollbar           remainingSpace -  15              myList View as GridView  Columns 2  Width   remainingSpace

User · Answer

I had trouble with the accepted answer  because I missed the HorizontalAlignment Stretch portion and have adjusted the original answer    This is another technique   It uses a Grid with a SharedSizeGroup   Note  the Grid IsSharedScope true on the ListView    lt 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  gt   lt Grid gt       lt ListView Name  lstCustomers  ItemsSource   Binding Path Collection   Grid IsSharedSizeScope  True  gt           lt ListView View gt               lt GridView gt                   lt GridViewColumn Header  ID  Width  40  gt                       lt GridViewColumn CellTemplate gt                           lt DataTemplate gt                                lt Grid gt                                     lt Grid ColumnDefinitions gt                                          lt ColumnDefinition Width  Auto  SharedSizeGroup  IdColumn   gt                                     lt  Grid ColumnDefinitions gt                                     lt TextBlock HorizontalAlignment  Right  Text  Binding Path Id    gt                                lt  Grid gt                           lt  DataTemplate gt                       lt  GridViewColumn CellTemplate gt                   lt  GridViewColumn gt                   lt GridViewColumn Header  First Name  DisplayMemberBinding   Binding FirstName   Width  Auto    gt                   lt GridViewColumn Header  Last Name  DisplayMemberBinding   Binding LastName   Width  Auto   gt               lt  GridView gt           lt  ListView View gt       lt  ListView gt   lt  Grid gt   lt  Window gt

User · Answer

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

User · Answer

This is your code   lt ListView Name  lstCustomers  ItemsSource   Binding Path Collection   gt       lt ListView View gt           lt GridView gt               lt GridViewColumn Header  ID  DisplayMemberBinding   Binding Id   Width  40   gt               lt GridViewColumn Header  First Name  DisplayMemberBinding   Binding FirstName   Width  100    gt               lt GridViewColumn Header  Last Name  DisplayMemberBinding   Binding LastName    gt           lt  GridView gt       lt  ListView View gt   lt  ListView gt    Try this   lt ListView Name  lstCustomers  ItemsSource   Binding Path Collection   gt       lt ListView View gt           lt GridView gt               lt GridViewColumn DisplayMemberBinding   Binding Id   Width  Auto  gt                  lt GridViewColumnHeader Content  ID  Width  Auto    gt               lt  GridViewColumn gt               lt GridViewColumn DisplayMemberBinding   Binding FirstName   Width  Auto  gt                 lt GridViewColumnHeader Content  First Name  Width  Auto    gt               lt  GridViewColumn gt               lt GridViewColumn DisplayMemberBinding   Binding LastName   Width  Auto  gt                 lt GridViewColumnHeader Content  Last Name  Width  Auto    gt               lt  GridViewColumn          lt  GridView gt       lt  ListView View gt   lt  ListView gt

User · Answer

I liked user1333423 s solution except that it always re-sized every column  i needed to allow some columns to be fixed width  So in this version columns with a width set to  Auto  will be auto-sized and those set to a fixed amount will not be auto-sized   public class AutoSizedGridView   GridView       HashSet lt int gt   autoWidthColumns       protected override void PrepareItem ListViewItem item                if   autoWidthColumns    null                         autoWidthColumns   new HashSet lt int gt                  foreach  var column in Columns                                if double IsNaN column Width                        autoWidthColumns Add column GetHashCode                                                      foreach  GridViewColumn column in Columns                        if   autoWidthColumns Contains column GetHashCode                                   if  double IsNaN column Width                       column Width   column ActualWidth                   column Width   double NaN                                                                 base PrepareItem item

User · Answer

I know that this is too late but here is my approach    lt GridViewColumn x Name  GridHeaderLocalSize   Width  100  gt         lt GridViewColumn Header gt       lt GridViewColumnHeader HorizontalContentAlignment  Right  gt           lt Grid Width  Auto  HorizontalAlignment  Right  gt               lt Grid ColumnDefinitions gt                   lt ColumnDefinition Width  100   gt               lt  Grid ColumnDefinitions gt               lt TextBlock Grid Column  0  Text  Local size  TextAlignment  Right  Padding  0 0 5 0   gt           lt  Grid gt       lt  GridViewColumnHeader gt   lt  GridViewColumn Header gt   lt GridViewColumn CellTemplate gt       lt DataTemplate gt           lt TextBlock Width   Binding ElementName GridHeaderLocalSize  Path Width  FallbackValue 100    HorizontalAlignment  Right  TextAlignment  Right  Padding  0 0 5 0  Text  Text   gt           lt  TextBlock gt       lt  DataTemplate gt   lt  GridViewColumn CellTemplate gt      The main idea is to bind the width of the cellTemplete element to the width of the ViewGridColumn  Width 100 is default width used until first resize  There isn t any code behind  Everything is in xaml

User · Answer

If your listview is also re-sizing then you can use a behavior pattern to re-size the columns to fit the full ListView width  Almost the same as you using grid column definitions   lt ListView HorizontalAlignment  Stretch                 Behaviours GridViewColumnResize Enabled  True  gt               lt ListViewItem gt  lt  ListViewItem gt               lt ListView View gt                     lt GridView gt                           lt GridViewColumn   Header  Column                                                           Behaviours GridViewColumnResize Width      gt                                 lt GridViewColumn CellTemplate gt                                       lt DataTemplate gt                                             lt TextBox HorizontalAlignment  Stretch  Text  Example1    gt                                       lt  DataTemplate gt                                 lt  GridViewColumn CellTemplate gt    See the following link for some examples and link to source code http   lazycowprojects tumblr com post 7063214400 wpf-c-listview-column-width-auto

User · Answer

Since I had an ItemContainerStyle I had to put the HorizontalContentAlignment in the ItemContainerStyle       lt ListView ItemContainerStyle gt               lt Style TargetType  ListViewItem  gt                   lt Style Triggers gt                       lt DataTrigger Binding   Binding Path FieldDef DispDetail  Mode OneWay   Value  False  gt                            lt Setter Property  Visibility  Value  Collapsed   gt                       lt  DataTrigger gt                   lt  Style Triggers gt                   lt Setter Property  HorizontalContentAlignment  Value  Stretch    gt

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

Examples related to wpf

Examples related to xaml

Examples related to listview

Examples related to gridview

Examples related to gridviewcolumn