Windows 8 XAML ListView with Header and Item Template columns should have same dynamic width

Question

I am using a Listview with an Itemtemplate and a Headertemplate. Both templates contain 6 Columns. Everything is ok if i set a fixed column width for the templates - like in figure one.
But i want to set the width to "Auto" for the items - but then i get figure 2...

How to handle this? Is it possible to set the Header Column width with c#? - or any other solution?

Figure 1:

Figure 2:

Code Listview:

<ListView x:Name="DayanalyseListView" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Top" 
                      ItemTemplate="{StaticResource DataTemplate}" 
                      HeaderTemplate="{StaticResource HeaderTemplate}">
            </ListView>

Headertemplate:

<DataTemplate  x:Key="HeaderTemplate" >
        <Grid Height="36" Background="DarkGray" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="95"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="*" MinWidth="900"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Uid="DayProject" TextWrapping="Wrap" Text="Project" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
            <TextBlock x:Uid="DayTask" TextWrapping="Wrap" Text="Task" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
            <TextBlock x:Uid="DayFrom" TextWrapping="Wrap" Text="From" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
            <TextBlock x:Uid="DayTill" TextWrapping="Wrap" Text="Till" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
            <TextBlock x:Uid="DaySum" TextWrapping="Wrap" Text="Sum"  Grid.Column="4" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
            <TextBlock x:Uid="DayNote" TextWrapping="Wrap" Text="Note"  Grid.Column="5" VerticalAlignment="Top" HorizontalAlignment="Left"  Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
        </Grid>
    </DataTemplate>

Itemtemplate:

<DataTemplate x:Key="DataTemplate">
        <Grid d:DesignHeight="50" Margin="0,5,0,0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="95"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="85"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding ProjectName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="0" ToolTipService.ToolTip="{Binding ProjectName}"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding TaskName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="1" ToolTipService.ToolTip="{Binding TaskName}"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StartTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}"  Grid.Column="2"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StopTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}"  Grid.Column="3"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Sum}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}"  Grid.Column="4"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Note}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}"  ToolTipService.ToolTip="{Binding Note}" Grid.Column="5"/>
        </Grid>
     </DataTemplate>

Answer 1

The following works perfectly in my case:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid x:Name="ListViewHeaders" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition  />
            <ColumnDefinition  />
            <ColumnDefinition  />
            <ColumnDefinition  />
            <ColumnDefinition  />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="Title Col 1" />
        <TextBlock Grid.Column="1" Text="Title Col 2" />
        <TextBlock Grid.Column="2" Text="Title Col 3" />
        <TextBlock Grid.Column="3" Text="Title Col 4" />
        <TextBlock Grid.Column="4" Text="Title Col 5" />
    </Grid>
    <ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition  />
                        <ColumnDefinition  />
                        <ColumnDefinition  />
                        <ColumnDefinition  />
                        <ColumnDefinition  />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" />
                    <TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" />
                    <TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" />
                    <TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" />
                    <TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Answer 2

ListView does not operate like a DataGrid. ListView only understands rows and doesn't understand columns. You can simulate columns like you are by using a Grid, but the important thing to understand is that the item and the header are two completely separate UI elements.

Meaning there is no easy to have the size of the columns in the item change the size of the columns in the header. Even if you were to name them, they are part of a template so the names won't be of any use (remember, there will be multiple items created).

I recommend you stay with fixed widths, use * widths or use an actual DataGrid control.