Xamarin Listview动态列宽 [英] Xamarin Listview Dynamic Column Width

问题描述

我想知道是否有适当的方法来解决这种情况.想象一下，您正在将动态数据转换为如下形式:

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>

问题N1

现在的ID可以是123或34816349714，问题是下一个单元格的数据已移动，因此所有内容均不在网格中.

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.

问题N2

我想在顶部为每个列设置一个列标题.

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

也许listview并不是最好的选择，但是任何人都可以在这种情况下使用现成的方法吗?谢谢.

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

推荐答案

我使用网格，堆栈布局和列表视图共同解决了这个问题.

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>

这篇关于Xamarin Listview动态列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！