Listview 不正确显示列答案

【问题标题】：Listview incorrect displays columnsListview 不正确显示列
【发布时间】：2016-07-21 15:20:50
【问题描述】：

我有三列。我设置了ListView 的标题来显示数据——它的工作正确。我同样设置了ListView ItemTemplate，但它显示的数据不正确。

  <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>

【问题讨论】：

您是否尝试在项目的容器样式中设置水平内容对齐，以便将项目拉伸到全宽？ Sample here
我删除了水平对齐。相似

标签： xaml listview uwp

【解决方案1】：

这里的问题是，在ListViewItem 中，它的HorizontalContentAlignment 属性默认设置为Left。此属性指示控件内容的水平对齐方式。当它设置为Left 时，ListViewItem 的内容，即DataTemplate 中的Grid 将左对齐。所以Gird 不会占用 ListView 的整个宽度，您会看到像屏幕截图一样的“奇怪”布局。

为了看清楚，我们可以查看ListViewItem styles and templates，在它的默认样式下，我们可以看到

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

要解决此问题，我们可以将HorizontalContentAlignment 属性设置为Stretch，例如：

<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>

【讨论】：