Xamarin 列表视图分组问题

Question

我在Xamarin中使用ListView进行分组时遇到问题。我看的指南多得数不清，但我仍然无法让它工作。我可以看到ViewModel属性设置正确，但我得到的只是一个空白屏幕。请不要用指向其他指南的链接来回答，因为我可能已经看过它并且它没有帮助。我相信我非常接近。

类域：

public class TechInventoryDetail
{
public int EquipmentInventoryDetailEntityId { get; set; }
public int TechId { get; set; }
public string CodeDetail { get; set; }
public string CodeDescription { get; set; }
public int Need { get; set; }
public int Have { get; set; }
public string ServiceCategory { get; set; }
}

查看模型属性：

private ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>> _techEquipmentOverview = new ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>>();
public ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>> TechEquipmentOverview
{
get => _techEquipmentOverview;
set { _techEquipmentOverview = value; RaisePropertyChanged(); }
}

使用视图模型方法设置：

public async Task GetTechEquipmentOverviewAsync()
{
var result = await _techService.GetTechEquipmentOverviewAsync(false);
if (result.Success)
{
var equipmentGrouped = result.Data.InventoryDetail.GroupBy(c => c.ServiceCategory, c => c);
var groups = equipmentGrouped.Select(g => new Models.Grouping<string, TechInventoryDetail>(g.Key, g)).ToList();
if (groups.Any())
{
TechEquipmentOverview = new ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>>();
TechEquipmentOverview.AddRange(groups);
}
}
}

Xaml 列表视图：

<ListView HasUnevenRows="true" 
IsGroupingEnabled="true"
GroupDisplayBinding="{Binding Key}"
ItemsSource="{Binding TechEquipmentOverview}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="0,5,0,5" Orientation="Vertical">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource EquipmentGroupHeader}"
Text="{Binding Key}" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.Children>
<Label
Grid.Row="0"
Grid.ColumnSpan="4"
HorizontalTextAlignment="Center"
LineBreakMode="TailTruncation"
Style="{StaticResource DefaultSectionHeader}"
Text="{Binding CodeDetail}" />
<Label
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,5,5,5"
Style="{StaticResource H1}"
Text="Need" />
<Label
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,15,5,5"
LineBreakMode="TailTruncation"
Style="{StaticResource H2}"
Text="{Binding Need}" />
<Label
Grid.Row="1"
Grid.Column="2"
Grid.ColumnSpan="2"
Margin="0,5,5,5"
Style="{StaticResource H1}"
Text="Have" />
<Label
Grid.Row="2"
Grid.Column="2"
Grid.ColumnSpan="2"
Margin="0,15,5,5"
LineBreakMode="TailTruncation"
Style="{StaticResource H2}"
Text="{Binding Have}" />
</Grid.Children>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Answer 1

在GetTechEquipmentOverviewAsync方法中，您正在重置TechEquipmentOverview可观察集合，并且UI不知道新列表。

您需要在视图模型中实现INotifyPropertyChanged，并通知UI 列表引用已更改。此外，请确保使用Device.BeginInvokeOnMainThread通知主 UI 线程上的 UI。