ListView - Stretch header to full width

Question

I have a simple ListView inside of a grid which take the full page (see screenshow below). I was able to stretch the rows of the ListView to the full width of the container using a style (HorizontalContentAlignment), but I can’t do the same with the header. I’m not able to set the HorizontalContentALignement to Stretch for the Header (see highlighted in screenshot below).

Any idea how I could accomplish this?

<Page.Resources>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Grid.Row="1">
    <ListView x:Name="itemListView" Margin="120,0,0,60" SelectionMode="None" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
        <ListView.Header>
            <Grid Margin="6" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="Rank" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="1" Text="Username" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="2" Text="Score" Style="{StaticResource TitleTextStyle}" />
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Rank}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                    <TextBlock Grid.Column="1" Text="{Binding Username}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
                    <TextBlock Grid.Column="2" Text="{Binding Score}" Style="{StaticResource BodyTextStyle}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

enter image description here

Did you even sort this Martin as I have the same problem. Thanks — Sun

Johan Larsson Johan Larsson · Accepted Answer · 2013-07-11T20:25:23

One way could be to use a converter:

<ListView ItemsSource="{Binding Players}">
    <ListView.Resources>
        <rxDummy:MultiplyConverter x:Key="MultiplyConverter"/>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="Rank" Header="Rank" DisplayMemberBinding="{Binding Rank}"
                            Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}, 
                                        Converter={StaticResource MultiplyConverter}, 
                                        ConverterParameter=0.33}"/>
            <GridViewColumn Header="Username" DisplayMemberBinding="{Binding Username}" 
                            Width="{Binding ElementName=Rank, Path=ActualWidth}"/>
            <GridViewColumn Header="Score" DisplayMemberBinding="{Binding Score}" 
                            Width="{Binding ElementName=Rank, Path=ActualWidth}"/>
        </GridView>
    </ListView.View>
</ListView>

public class MultiplyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var d = System.Convert.ToDouble(value);
        double p = System.Convert.ToDouble(parameter,CultureInfo.InvariantCulture);
        return d * p;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

ListView - Stretch header to full width

1 Answers