将 itemtemplate 列宽度调整为列表视图中的 headertemplate 列

Question

我有一个列表视图，我希望 ItemTemplate 列的宽度与 HeaderTemplate 列的宽度相同。我尝试了网上的许多方法，但似乎都没有用，你能帮帮我吗？谢谢！这是我的代码：

<ListView x:Name="ProductListView" Header="Products List" ItemsSource="{x:Bind ViewModel.Products}">

<ListView.HeaderTemplate>
    <DataTemplate>
        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock x:Name="NameTextBlock" Style="{ThemeResource BodyTextBlockStyle}" Text="Name" Grid.Column="0"/>
            <TextBlock x:Name="PriceTextBlock" Style="{ThemeResource BodyTextBlockStyle}" Text="Price" Grid.Column="1"/>

        </Grid>
    </DataTemplate>
</ListView.HeaderTemplate>

<ListView.ItemTemplate>
    <DataTemplate x:DataType="m:SellingProduct">
        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />                    
            </Grid.ColumnDefinitions>

            <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="{x:Bind Name, Mode=OneWay}" Grid.Column="0"/>
            <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="{x:Bind Price, Mode=OneWay}" Grid.Column="1"/>

        </Grid> 
    </DataTemplate>
</ListView.ItemTemplate>

Answer 1

您在两个列定义中都指定了 width="*" 而不是 auto 并且 HorizontalContentAlignment Stretch 的值应该是 Stretch

<ListView Margin="80,109,0,-109" ItemsSource="{Binding ListTest}"  x:Name="listview">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>

            </ListView.ItemContainerStyle>
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" x:Name="namecolumn"/>
                            <ColumnDefinition Width="*" x:Name="pricecolumn" />
                        </Grid.ColumnDefinitions>

                        <TextBlock x:Name="NameTextBlock" Style="{ThemeResource BodyTextBlockStyle}" Text="Name" Grid.Column="0"/>
                        <TextBlock x:Name="PriceTextBlock" Style="{ThemeResource BodyTextBlockStyle}" Text="Price" Grid.Column="1"/>

                    </Grid>
                </DataTemplate>
            </ListView.HeaderTemplate>

            <ListView.ItemTemplate>
                <DataTemplate >
                    <Grid HorizontalAlignment="Stretch">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock   Text="{Binding Number}" Grid.Column="0"/>
                        <TextBlock  Text="{Binding Name}" Grid.Column="1"/>

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

将 itemtemplate 列宽度调整为列表视图中的 headertemplate 列

Adapt itemtemplate columns width to headertemplate columns in a listview

listview

win-universal-app

uwp-xaml