Maui Tabbed pages Application Code in one place

Question

Hi all

I want to write a Maui app with 3 tabs

1 for user text input by editor control
2 for user options set by checkboxses and pickers
3 app results output editor

no flyouts only tabs.

I want to handle the tabs 1 and 2 input
and my logical code in one place
if that possible can someone give me
a skeleton for this.

Thank you.

Answer 1

Hello,

I want to write a Maui app with 3 tabs no flyouts only tabs.

1.You need to create a MAUI project with Shell.
2.You can set three Tab in TabBar, TabBar type will disable the flyout.

I want to handle the tabs 1 and 2 input and my logical code in one place

Tab1 and Tab2 can binding the same ViewModel. But you need to use Singleton Pattern to create this ViewModel like following code.

   public class MyViewModel  
       {  
           public static MyViewModel viewModel;  



          public static MyViewModel Instance()  
           {  
               if (viewModel == null)  
               {  
                   viewModel = new MyViewModel();  
               }  
               return viewModel;  
           }  
       }  

For Page1 and Page2, you can bind it like following code.

   public Page1()    {  
           InitializeComponent();  
           BindingContext = MyViewModel.Instance();  
       }  

   public Page2()    {  
           InitializeComponent();  
           BindingContext = MyViewModel.Instance();  
       }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.