Grid does not take 100% width

Question

I have the following XAML code:

    <ListView Background="Blue" x:Name="lstFriends" Grid.Row="2" HorizontalContentAlignment="Stretch" >
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="Pink">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="64" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="ms-appx:///Assets/Logo.png" Margin="12" VerticalAlignment="Top"></Image>

                    <StackPanel Orientation="Vertical" Grid.Column="1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Grid.Column="0" Text="{Binding Path='Fullname'}" Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"></TextBlock>
                            <Image Grid.Column="1" Source="{Binding Path='OnlineIcon'}" Width="16" Height="16" HorizontalAlignment="Right" />
                        </Grid>


                        <TextBlock Text="{Binding Path='Subtitle'}" Style="{StaticResource ListViewItemContentTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12"></TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I already set HorizontalContentAlignment, as well as ItemContainerStyle as of these 2 articles:

How to set width to 100% in WPF

XAML Columndefinitions width * not taking available space

However, it still not works. The grid only take as much space as the TextBlocks and Images need.

What did I do wrong? How can I make the Grid take all the space, and the OnlineIcon to the right?

Have you tried adding `` in your *ListView.ItemContainerStyle*? — Romasz, Feb 25 '15 at 05:56
Nice finding! I had to changed from `HorizontalAlignment` to `HorizontalContentAlignment`. Thank you. — Luke Vo, Feb 25 '15 at 08:29

score 5 · Accepted Answer · answered Feb 25 '15 at 09:16

Adding:

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

in <ListView.ItemContainerStyle> should do the job.

You have mentioned about HorizontalContentAlignment in the question, but as I see you haven't set it in the xaml code. By default HorizontalContentAlignment is set to Left, thus it doesn't take all available space.

Grid does not take 100% width

1 Answers1