UWP中的ListView

Question

I am trying to Align my ListView items in dynamic way without setting explicitly Width for them. The problem i am getting is aligning them the attribute name that is above them. ie attribute Name should have Coke below it, Quantity should have Integer value number and Subtotal should have floating points below it. if i resize my Windows the ListView should also change with the respective attribute name but it doesn't. I have tried RelativePanel, ListBox for them but nothing works without explicity giving a width which i want it to be dynamic.

<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

Edit:

You can create one item with the DataTemplate layout above the listview.

To avoid setting explicitly the Width, you can set the HorizontalAlignment to Stretch (similiar to Android XML fill_parent) and use Margin.

Example:

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

Answer 2

Your column definitions should be percentages, not whole values.

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

.8 = 80% .1 = 10% .1 = 10% Total = 100%

Your definitions are:

3 = 300% 1 = 100% 1 = 100% Total = 500% !!