Xamarin Listview Dynamic Column Width

Question

I wonder if there is a proper approach to solve this situation. Imagine you are getting dynamic data into something like this:

 <ListView HasUnevenRows="True" 
              ItemsSource="{Binding RecentSurveysList} "
              SelectedItem="{Binding Selected, Mode=TwoWay}"
              ItemSelected="ListView_OnItemSelected">

        <ListView.ItemTemplate>

            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="20">
                        <Label Text="{Binding Id}"  VerticalOptions="Start" Margin="0, 0 ,60 ,0"></Label>
                        <Label Text="{Binding Date}" HorizontalOptions="Start" VerticalOptions="Center" Margin="0, 0 ,20 ,0"></Label>
                        <Label Text="{Binding RecentLocationName}" HorizontalOptions="Start" VerticalOptions="Center" Margin="0, 0 ,20 ,0"></Label>
                        <Label Text="{Binding ClientFirstName}" HorizontalOptions="Start" VerticalOptions="Center" Margin="0, 0 ,20 ,0"></Label>
                        <Label Text="{Binding ClientLastName}" HorizontalOptions="Start" VerticalOptions="Center" Margin="0, 0 ,20 ,0"></Label>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

Problem N1

Now ID can be 123 or 34816349714 and the problem is that the data for the next cells is shifted so everything is off grid.

Problem N2

I want to set a column title for each colum on top.

Maybe listview wasn't the best choice but does any one have a ready approach they use for this scenario? Thanks.

Answer 1

I managed this issue like this using a grid, stacklayout and listview alltogether.

<StackLayout>

        <ListView HasUnevenRows="True" 
              ItemsSource="{Binding RecentSurveysList} "
              SelectedItem="{Binding Selected, Mode=TwoWay}"
              ItemSelected="ListView_OnItemSelected">

         <ListView.Header>
             <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                 <Label Text="Id" BackgroundColor="CornflowerBlue" Grid.Column="0" Grid.Row="0" TextColor="White"/>
                 <Label Text="Date" BackgroundColor="CornflowerBlue" Grid.Column="1" Grid.Row="0" TextColor="White"/>
                 <Label Text="Location" BackgroundColor="CornflowerBlue" Grid.Column="2" Grid.Row="0" TextColor="White"/>
                 <Label Text="Client Firtname" BackgroundColor="CornflowerBlue" Grid.Column="3" Grid.Row="0" TextColor="White"/>
                 <Label Text="Client Lastname" BackgroundColor="CornflowerBlue" Grid.Column="4" Grid.Row="0" TextColor="White"/>

                </Grid>
            </ListView.Header>


            <ListView.ItemTemplate>

            <DataTemplate>

                <ViewCell>

                        <Grid BackgroundColor="White" Margin="0,0,0,1" >

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

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


                            <Label Grid.Column="0" Text="{Binding Id}"  HorizontalOptions="Start" VerticalTextAlignment="Center"/>
                            <Label Grid.Column="1" Text="{Binding Date}" HorizontalOptions="Start" VerticalOptions="Center"></Label>
                            <Label Grid.Column="2" Text="{Binding RecentLocationName}" HorizontalOptions="Start" VerticalOptions="Center"></Label>
                            <Label Grid.Column="3" Text="{Binding ClientFirstName}" HorizontalOptions="Start" VerticalOptions="Center"></Label>
                            <Label Grid.Column="4" Text="{Binding ClientLastName}" HorizontalOptions="Start" VerticalOptions="Center"></Label>


                        </Grid>
                    </ViewCell>

            </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </StackLayout>