ListView fill the width of parent, screen or whatever

Question

I am trying to display some data from an Observable Collection to a ListView. Binding is working fine. My only problem I cannot fix is the layout of the ListView.I use a Grid with 2 rows to split my View. The ListView is one the second row. I only try to use * for setting Columns and Rows as suggested in most sources. The code for the ListView is this.

<Grid Grid.Row="1" Margin="10,0,10,0" HorizontalAlignment="Stretch">
    <ListView ItemsSource="{Binding Collection}" HorizontalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" HorizontalAlignment="Center" Text="{Binding Period}" Foreground="{StaticResource ColorBrush}" FontFamily="{StaticResource Family}" FontSize="20"/>
                    <TextBlock Grid.Column="1" HorizontalAlignment="Center" Text="{Binding Currency}" Foreground="{StaticResource ColorBrush}" FontFamily="{StaticResource Family}" FontSize="20"/>
                    <TextBlock Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Date}" Foreground="{StaticResource ColorBrush}" FontSize="20" FontFamily="{StaticResource Family}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

When I use HorizontalAlignment="Stretch" for the Grid that contains the ListView and the ListView itself the data is displayed on the left side without getting the whole width of parent View. When I explicitly set Width to some value (i.e.380) it displays OK.

<Grid Grid.Row="1" Margin="10,0,10,0">
    <ListView ItemsSource="{Binding Collection}" Width="380">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="380">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" HorizontalAlignment="Center" Text="{Binding Period}" Foreground="{StaticResource ColorBrush}" FontFamily="{StaticResource Family}" FontSize="20"/>
                    <TextBlock Grid.Column="1" HorizontalAlignment="Center" Text="{Binding ValueInCurrency}" Foreground="{StaticResource ColorBrush}" FontFamily="{StaticResource Family}" FontSize="20"/>
                    <TextBlock Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Date}" Foreground="{StaticResource ColorBrush}" FontSize="20" FontFamily="{StaticResource Family}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

But I want to know a better way to not use implicit values, but *.

score 23 · Accepted Answer · edited Apr 05 '19 at 05:59

23

Try this. Add the following jus after </ListView.ItemTemplate>

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

edited Apr 05 '19 at 05:59

LightBulb

964
1
11
27

answered Jun 02 '15 at 09:11

alfah

2,077
1
31
55

Thanks a lot. I din't find the similar question while searching. – Andreas777 Jun 03 '15 at 07:55

ListView fill the width of parent, screen or whatever

1 Answers1