Xamarin Listview 动态列宽答案

【问题标题】：Xamarin Listview Dynamic Column WidthXamarin Listview 动态列宽
【发布时间】：2018-01-10 02:48:55
【问题描述】：

我想知道是否有适当的方法来解决这种情况。想象一下，您正在将动态数据变成这样：

 <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，问题是下一个单元格的数据发生了偏移，所以一切都脱离了网格。

问题 N2

我想为顶部的每一列设置一个列标题。

也许 listview 不是最佳选择，但是否有人有现成的方法用于这种情况？谢谢。

【问题讨论】：

我现在能想到的只是简单地硬编码每列的宽度值并保持不变。
对您的 ViewCell 内容使用 Grid 而不是 StackLayout，与您的 ListView.Header 相同
DevExpress 为 xamarin 提供免费的网格控制，也许你会尝试it
看起来很强大，谢谢。

标签： listview xamarin grid

【解决方案1】：

我使用网格、stacklayout 和 listview 一起解决了这个问题。

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

【讨论】：