Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grid does not take 100% width

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?

like image 310
Luke Vo Avatar asked May 15 '26 08:05

Luke Vo


1 Answers

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.

like image 118
Romasz Avatar answered May 19 '26 03:05

Romasz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!