如何在.NET MAUI Shell和MVVM中使用不同的绑定源填充多个选项卡，但内容相同？

huangapple
go评论121阅读模式
英文:

How can I populate multiple Tabs with the same page content but a different binding source in .Net MAUI Shell and MVVM

问题

我正在开发一个应用程序，该应用程序将显示每周每天的数据，从星期一到星期日。我希望每天都是一个单独的选项卡，以便您可以在不同天之间轻松切换。目前，我正在使用一个选项卡，其中包含7个不同的ShellContent页面，每个页面完全相同，与ViewModel中的不同可观察集合绑定。

这种方法确实可以工作，但我遇到了两个主要问题：
1）由于我创建了7个不同的内容页面，如果我更改其中一个的布局，那么我必须手动更改所有页面的布局，这既繁琐又容易出错。
2）每次打开一个选项卡时，都会创建ViewModel的新实例，这些实例需要在用户切换选项卡时加载，这对用户来说可能不太流畅。

我查看了TabbedPage，看起来这是我想要的东西，我可以添加一个DataTemplate并使用项源绑定选项卡，但是无法与Shell一起使用TabbedBar。

我应该如何重复使用相同的内容以及在用户切换选项卡之前加载所有页面的数据？我可以接受初始加载速度较慢，因为我可以在上面放置加载指示器。

目前，我是这样添加它们的：

  1. <FlyoutItem Title="Weekly Rota" Icon="team.png">
  2.         <Tab>
  3.             <ShellContent Title="Monday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaMonday}"/>
  4.             <ShellContent Title="Tuesday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaTuesday}" />
  5.             <ShellContent Title="Wednesday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaWednesday}" />
  6.             <ShellContent Title="Thursday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaThursday}" />
  7.             <ShellContent Title="Friday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaFriday}" />
  8.             <ShellContent Title="Saturday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaSaturday}" />
  9.             <ShellContent Title="Sunday" Shell.TabBarIsVisible="False" ContentTemplate="{DataTemplate startupPages:WeeklyRotaSunday}"  />
  10.         </Tab>
  11.     </FlyoutItem>

ViewModel中的代码如下：

  1. public ObservableCollection<DailyData> MondayList { get; set; } = new();
  2. public ObservableCollection<DailyData> TuesdayList { get; } = new();
  3. public ObservableCollection<DailyData> WednesdayList { get; } = new();

然后，通过页面的代码后台，将数据绑定到每个页面：

  1. public WeeklyRotaFriday(WeeklyRotaViewModel viewModel)
  2. {
  3.     InitializeComponent();
  4.     this.BindingContext = viewModel;
  5.     viewModel.GetDailyDataCommand.Execute(DayOfWeek.Friday);
  6. }

我理解这种方法远非理想，但我对应用程序开发非常陌生，并且找不到完全符合我尝试实现的示例。它确实可以运行，但应该有更好的方法。

英文:

I am developing an App that will display data for each day of the week , Monday to Sunday
I would like each day to be a separate tab so you can swipe through the days, Currently i am using a Tab that adds 7 different shellContent pages each one is exactly the same and is bound to a different observable collection in the viewmodel.
This does work but there are 2 main issues I am having. 1) as I have created 7 different content pages if i change the layout in one i have to then manually change the layout for all of them, which is tedious and error prone. 2) every time i open a tab it is creating a new instance of the viewmodel and these need to get loaded into the tab page on each swipe which is jarring for the user.

I looked at TabbedPage and this seems to be what i want, I can add one Datatemplate and bind the tabs using the item source however i cannont use TabbedBar with Shell.

How can i resuse the same content for each tab and ideally have all the pages loaded with their data before the user has to swipe. I am ok with the initial loading being a little slower as i can but a loading indicator on it.

currently I am adding them like this

  1. &lt;FlyoutItem Title=&quot;Weekly Rota&quot; Icon=&quot;team.png&quot;&gt;
  2.         &lt;Tab&gt;
  3.             &lt;ShellContent Title=&quot;Monday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaMonday}&quot;/&gt;
  4.             &lt;ShellContent Title=&quot;Tuesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaTuesday}&quot; /&gt;
  5.             &lt;ShellContent Title=&quot;Wednesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaWednesday}&quot; /&gt;
  6.             &lt;ShellContent Title=&quot;Thursday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaThursday}&quot; /&gt;
  7.             &lt;ShellContent Title=&quot;Friday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaFriday}&quot; /&gt;
  8.             &lt;ShellContent Title=&quot;Saturday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaSaturday}&quot; /&gt;
  9.             &lt;ShellContent Title=&quot;Sunday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate startupPages:WeeklyRotaSunday}&quot;  /&gt;
  10.         &lt;/Tab&gt;
  11.     &lt;/FlyoutItem&gt;

the ViewModel has the following Code

  1.         public ObservableCollection&lt;DailyData&gt; MondayList { get; set; } = new();
  2.         public ObservableCollection&lt;DailyData&gt; TuesdayList { get; } = new();
  3.         public ObservableCollection&lt;DailyData&gt; WedensdayList { get; } = new();

The data is then bound to each page via the codebehind of the page

  1.     public WeeklyRotaFriday(WeeklyRotaViewModel viewModel)
  2.     {
  3.         InitializeComponent();
  4.         this.BindingContext = viewModel;
  5.         viewModel.GetDailyDataCommand.Execute(DayOfWeek.Friday);
  6.     }

I understand this approach is far from ideal but I am very new to App Development and and have not been able to find any examples that do exactly what i am trying to do. It does function but there must be a better way to do it.

答案1

得分: 1

以下是您要翻译的内容：

You can use only one page and achieve to change content for different day by override OnParentChanging method.

Add Route to every ShellContent:

  1. &lt;FlyoutItem&gt;
  2.     &lt;Tab&gt;
  3.         &lt;ShellContent Title=&quot;Monday&quot; Route=&quot;Monday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot;/&gt;
  4.         &lt;ShellContent Title=&quot;Tuesday&quot; Route=&quot;Tuesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  5.         &lt;ShellContent Title=&quot;Wednesday&quot; Route=&quot;Wednesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  6.         &lt;ShellContent Title=&quot;Thursday&quot; Route=&quot;Thursday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  7.         &lt;ShellContent Title=&quot;Friday&quot; Route=&quot;Friday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  8.         &lt;ShellContent Title=&quot;Saturday&quot; Route=&quot;Saturday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  9.         &lt;ShellContent Title=&quot;Sunday&quot; Route=&quot;Sunday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  10.     &lt;/Tab&gt;
  11. &lt;/FlyoutItem&gt;

Page.xaml:

  1. &lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
  2.              xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot; 
  3.              x:Class=&quot;MauiApp2.MainPage&quot;&gt;
  4.     &lt;ScrollView&gt;
  5.         &lt;VerticalStackLayout&gt;
  6.             &lt;Label Text=&quot;{Binding Selection}&quot;/&gt;
  7.             &lt;CollectionView ItemsSource=&quot;{Binding WeekList}&quot;&gt;
  8.                 &lt;CollectionView.ItemTemplate&gt;
  9.                     &lt;DataTemplate&gt;
  10.                         &lt;Image Source=&quot;{Binding Name}&quot;/&gt;
  11.                     &lt;/DataTemplate&gt;
  12.                 &lt;/CollectionView.ItemTemplate&gt;
  13.             &lt;/CollectionView&gt;
  14.         &lt;/VerticalStackLayout&gt;
  15.     &lt;/ScrollView&gt;
  16. &lt;/ContentPage&gt;

Override OnParentChanging in Page.xaml.cs:

  1. public partial class MainPage : ContentPage
  2. {
  3.     VM VM = new VM();
  4.     public MainPage()
  5.     {
  6.         InitializeComponent();
  7.         BindingContext = VM;
  9.     }
  10.     protected override void OnParentChanging(ParentChangingEventArgs args)
  11.     {
  12.         base.OnParentChanging(args);
  13.         var shellContent = args.NewParent as ShellContent;
  14.         var route = shellContent.Route;
  15.         switch (route)
  16.         {
  17.             case &quot;Monday&quot;:
  18.                 VM.Selection = &quot;Wednesday&quot;;
  19.                 break;
  20.             case &quot;Tuesday&quot;:
  21.                 VM.Selection = &quot;Tuesday&quot;;
  22.                 VM.WeekList = VM.NameIdList1;
  23.                 break;
  24.             case &quot;Wednesday&quot;:
  25.                 VM.Selection = &quot;Wednesday&quot;;
  26.                 VM.WeekList = VM.NameIdList2;
  27.                 break;
  28.             case &quot;Thursday&quot;:
  29.                 VM.Selection = &quot;Thursday&quot;;
  30.                 break;
  31.             case &quot;Friday&quot;:
  32.                 VM.Selection = &quot;Friday&quot;;
  33.                 break;
  34.             case &quot;Saturday&quot;:
  35.                 VM.Selection = &quot;Saturday&quot;;
  36.                 break;
  37.             case &quot;Sunday&quot;:
  38.                 VM.Selection = &quot;Sunday&quot;;
  39.                 break;
  40.             default: break;
  41.         }
  42.     }
  43. }

ViewModel:

  1. public class VM : INotifyPropertyChanged
  2. {
  3.     public ObservableCollection&lt;NameId&gt; WeekList { get; set; } = new();
  4.     public ObservableCollection&lt;NameId&gt; NameIdList1 { get; set; } 
  5.     = new ObservableCollection&lt;NameId&gt; 
  6.     { 
  7.         new NameId { Id = &quot;Id A&quot;, Name = &quot;Name A&quot; }, 
  8.         new NameId { Id = &quot;Id B&quot;, Name = &quot;Name B&quot; }, 
  9.         new NameId { Id = &quot;Id C&quot;, Name = &quot;Name C&quot; } 
  10.     };
  11.     public ObservableCollection&lt;NameId&gt; NameIdList2 { get; set; } 
  12.     = new ObservableCollection&lt;NameId&gt; 
  13.     { 
  14.         new NameId { Id = &quot;Id A&quot;, Name = &quot;Name 2&quot; }, 
  15.         new NameId { Id = &quot;Id B&quot;, Name = &quot;Name 2&quot; }, 
  16.         new NameId { Id = &quot;Id C&quot;, Name = &quot;Name 2&quot; } 
  17.     };
  18.     
  19.     public string selection;
  20.     public string Selection
  21.     {
  22.         get =&gt; selection;
  23.         set
  24.         {
  25.             selection = value;
  26.             OnPropertyChanged(nameof(Selection));
  27.         }
  28.     }
  29.     public event PropertyChangedEventHandler PropertyChanged;
  30.     void OnPropertyChanged(string propertyName)
  31.     {
  32.         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  33.     }
  34. }
英文:

You can use only one page and achieve to change content for different day by override OnParentChanging method.

Add Route to every ShellContent:

  1. &lt;FlyoutItem&gt;
  2.     &lt;Tab&gt;
  3.         &lt;ShellContent Title=&quot;Monday&quot; Route=&quot;Monday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot;/&gt;
  4.         &lt;ShellContent Title=&quot;Tuesday&quot; Route=&quot;Tuesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  5.         &lt;ShellContent Title=&quot;Wednesday&quot; Route=&quot;Wednesday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  6.         &lt;ShellContent Title=&quot;Thursday&quot; Route=&quot;Thursday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  7.         &lt;ShellContent Title=&quot;Friday&quot; Route=&quot;Friday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  8.         &lt;ShellContent Title=&quot;Saturday&quot; Route=&quot;Saturday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  9.         &lt;ShellContent Title=&quot;Sunday&quot; Route=&quot;Sunday&quot; Shell.TabBarIsVisible=&quot;False&quot; ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; /&gt;
  10.     &lt;/Tab&gt;
  11. &lt;/FlyoutItem&gt;

Page.xaml:

  1. &lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
  2.              xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot; 
  3.              x:Class=&quot;MauiApp2.MainPage&quot;&gt;
  4.     &lt;ScrollView&gt;
  5.         &lt;VerticalStackLayout&gt;
  6.             &lt;Label Text=&quot;{Binding Selection}&quot;/&gt;
  7.             &lt;CollectionView ItemsSource=&quot;{Binding WeekList}&quot;&gt;
  8.                 &lt;CollectionView.ItemTemplate&gt;
  9.                     &lt;DataTemplate&gt;
  10.                         &lt;Image Source=&quot;{Binding Name}&quot;/&gt;
  11.                     &lt;/DataTemplate&gt;
  12.                 &lt;/CollectionView.ItemTemplate&gt;
  13.             &lt;/CollectionView&gt;
  14.         &lt;/VerticalStackLayout&gt;
  15.     &lt;/ScrollView&gt;
  16. &lt;/ContentPage&gt;

Override OnParentChanging in Page.xaml.cs:

  1. public partial class MainPage : ContentPage
  2. {
  3.     VM VM = new VM();
  4.     public MainPage()
  5.     {
  6.         InitializeComponent();
  7.         BindingContext = VM;
  9.     }
  10.     protected override void
  11.     OnParentChanging(ParentChangingEventArgs args)
  12.     {
  13.         base.OnParentChanging(args);
  14.         var shellContent = args.NewParent as ShellContent;
  15.         var route = shellContent.Route;
  16.         switch (route)
  17.         {
  18.             case &quot;Monday&quot;:
  19.                 VM.Selection = &quot;Wednesday&quot;;
  20.                 break;
  21.             case &quot;Tuesday&quot;:
  22.                 VM.Selection = &quot;Tuesday&quot;;
  23.                 VM.WeekList = VM.NameIdList1;
  24.                 break;
  25.             case &quot;Wednesday&quot;:
  26.                 VM.Selection = &quot;Wednesday&quot;;
  27.                 VM.WeekList = VM.NameIdList2;
  28.                 break;
  29.             case &quot;Thursday&quot;:
  30.                 VM.Selection = &quot;Thursday&quot;;
  31.                 break;
  32.             case &quot;Friday&quot;:
  33.                 VM.Selection = &quot;Friday&quot;;
  34.                 break;
  35.             case &quot;Saturday&quot;:
  36.                 VM.Selection = &quot;Saturday&quot;;
  37.                 break;
  38.             case &quot;Sunday&quot;:
  39.                 VM.Selection = &quot;Sunday&quot;;
  40.                 break;
  41.             default: break;
  42.         }
  43.     }
  44. }

ViewModel:

  1. public class VM : INotifyPropertyChanged
  2. {
  3.     public ObservableCollection&lt;NameId&gt; WeekList { get; set; } = new();
  4.     public ObservableCollection&lt;NameId&gt; NameIdList1 { get; set; } 
  5.     = new ObservableCollection&lt;NameId&gt; 
  6.     { 
  7.         new NameId { Id = &quot;Id A&quot;, Name = &quot;Name A&quot; }, 
  8.         new NameId { Id = &quot;Id B&quot;, Name = &quot;Name B&quot; }, 
  9.         new NameId { Id = &quot;Id C&quot;, Name = &quot;Name C&quot; } 
  10.     };
  11.     public ObservableCollection&lt;NameId&gt; NameIdList2 { get; set; } 
  12.     = new ObservableCollection&lt;NameId&gt; 
  13.     { 
  14.         new NameId { Id = &quot;Id A&quot;, Name = &quot;Name 2&quot; }, 
  15.         new NameId { Id = &quot;Id B&quot;, Name = &quot;Name 2&quot; }, 
  16.         new NameId { Id = &quot;Id C&quot;, Name = &quot;Name 2&quot; } 
  17.     };
  18.     
  19.     public string selection;
  20.     public string Selection
  21.     {
  22.         get =&gt; selection;
  23.         set
  24.         {
  25.             selection = value;
  26.             OnPropertyChanged(nameof(Selection));
  27.         }
  28.     }
  29.     public event PropertyChangedEventHandler PropertyChanged;
  30.     void OnPropertyChanged(string propertyName)
  31.     {
  32.         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  33.     }
  34. }

huangapple
  • 本文由 发表于 2023年3月9日 19:52:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/75684237.html
  • c#
  • maui
  • mvvm
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定