c# - UWP 中的 ListView

Question

我正在尝试以动态方式对齐我的 ListView 项目，而不为它们显式设置宽度。我遇到的问题是将它们与它们上方的属性名称对齐。即属性名称下面应该有可乐，数量应该有整数值，小计下面应该有 float 。如果我调整 Windows 的大小，ListView 也应该随相应的属性名称而改变，但事实并非如此。我已经为它们尝试了 RelativePanel 和 ListBox，但如果不明确给出我希望它是动态的宽度，则任何方法都不起作用。

<Grid Grid.Column="2" Margin="5,0,5,0">

            <ScrollViewer VerticalScrollBarVisibility="Hidden">
                <StackPanel>
                    <TextBlock Style="{StaticResource MyTextBlock1}" FontSize="20" HorizontalAlignment="Center" Margin="0,0,0,10">Order Summary</TextBlock>
                    <RelativePanel>
                        <TextBlock Name="ItemName" Style="{StaticResource MyTextBlock1}" FontSize="12">Name</TextBlock>
                        <TextBlock Name="ItemPrice" Style="{StaticResource MyTextBlock1}" FontSize="12" RelativePanel.AlignRightWithPanel="True">SubTotal</TextBlock>
                        <TextBlock Name="ItemQuantity" Style="{StaticResource MyTextBlock1}" Margin="0,0,10,0" FontSize="12" RelativePanel.LeftOf="ItemPrice">Quantity</TextBlock>
                    </RelativePanel>

                    <ListView ItemsSource="{x:Bind dumbList}">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="local:Dumb">
                                <Grid Width="200">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="3*"/>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{x:Bind name}"/>
                                    <TextBlock Text="{x:Bind id}" Grid.Column="1"/>
                                    <TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
</Grid>

CLICK HERE!! for the image

Answer 1

编辑:

您可以在 ListView 上方使用 DataTemplate 布局创建一个项目。

为避免显式设置宽度，您可以将 Horizo​​ntalAlignment 设置为 Stretch(类似于 Android XML fill_parent)并使用边距。

例子:

<Grid 
    HorizontalAlignment="Stretch" 
    Margin="12,12,12,12"
    Height="100">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Name"/>
    <TextBlock Text="Quantity" Grid.Column="1"/>
    <TextBlock Text="SubTotal" Grid.Column="2"/>
</Grid>

<ListView ItemsSource="{x:Bind dumbList}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Dumb">
            <Grid
                HorizontalAlignment="Stretch" 
                Margin="12,12,12,12"
                Height="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{x:Bind name}"/>
                <TextBlock Text="{x:Bind id}" Grid.Column="1"/>
                <TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>