I've got a list view that looks pretty normal on Android, but on iOS, I get the category names twice. Once where they belong, and once squished over on the side.
This is the ListView XAML
<ListView x:Name="MediaList"
ItemsSource="{Binding MediaSections}"
IsGroupingEnabled="True"
GroupDisplayBinding="SectionName"
GroupShortNameBinding="SectionName">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="{Binding SectionName, Converter={StaticResource UppercaseValueConverter}}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And this is the relevant CodeBehind
// constructed once when the first module is loaded.
// then the watcher will updated everything after the fact.
public ModuleMediaTab()
{
ViewModel = new MediaPageViewModel { IsBusy = true };
InitializeComponent();
var subscriber = new ModuleSubscription();
WatchForViewModelUpdates(subscriber);
}
// constructed each time a segment is loaded
public ModuleMediaTab(Guid moduleId, string moduleTitle)
{
_moduleTitle = moduleTitle;
ViewModel = new MediaPageViewModel { IsBusy = true };
InitializeComponent();
FetchMediaListAsync(moduleId);
}
protected override void OnAppearing()
{
base.OnAppearing();
BindingContext = ViewModel;
((ListView) MediaList).ItemTapped += (sender, args) => TriggerMedia((MediaViewModel)args.Item);
}
private void WatchForViewModelUpdates(ModuleSubscription subscriber)
{
MessagingCenter.Subscribe<MainMenu, ModulePageViewModel>(subscriber, "CurrentModuleMessage", (s, e) => Task.Run(() =>
{
subscriber.CurrentModule = e;
_moduleTitle = e.Title; // this property only updates when switching modules
FetchMediaListAsync(e.Id);
}));
}
private async void FetchMediaListAsync(Guid moduleId)
{
await Task.Run(() =>
{
var mediaService = App.Container.Resolve<IMediaService>();
var media =mediaService.FindModuleMediaByModuleId(moduleId);
ViewModel.Media = media;
ViewModel.IsBusy = false;
});
}