Listview incorrect displays columns - xaml

Question

I have three columns. I setup header of ListView to display data - its work correct. I similarly setup ListView ItemTemplate but it incorrect displays data.
<Grid>
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Блюдо" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Цена" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Количество" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding bludo}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding tsena}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding kol}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Answer 1

The problem here is that in ListViewItem, it's HorizontalContentAlignment property is set to Left by default. This property indicates the horizontal alignment of the control's content. When it is set to Left, the ListViewItem's content i.e the Grid in your DataTemplate will be left aligned. So the Gird won't take the whole width of the ListView and you will see the "strange" layout like your screenshot.
To see this clearly, we can check ListViewItem styles and templates, in its default style, we can see
<Setter Property="HorizontalContentAlignment" Value="Left"/>
To fix this issue, we can set the HorizontalContentAlignment property to Stretch like:
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Блюдо" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Цена" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Количество" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<!-- Add this in your code -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding bludo}" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding tsena}" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding kol}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>