Question

我有三列。我设置了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>

Answer 1

此处的问题是，在ListViewItem中，默认情况下HorizontalContentAlignment属性设置为Left。此属性指示控件内容的水平对齐方式。如果设置为Left，则ListViewItem的内容即Grid中的DataTemplate将保持对齐状态。所以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>

Listview不正确显示列

1 个答案: