I’m working with Xamarin Forms Shell in a small internal app and I was looking for the way to do Onboarding within the same AppShell.xaml file and I found crazy things out there, that’s why I write this post for you.
🚨 The first thing you need to know is: you can’t manage your login, onboarding, and similar scenarios with Shell. Well, not yet.
Knowing that we can continue and use the tools that we already have. This is a really simple method, I don’t use to write this kind of article because this is basic but I don’t want you to make crazy things with really bad practices.
Onboarding with Xamarin Forms Shell
Currently, the shell Xaml structure doesn’t allow us to build an onboarding process but it doesn’t matter at all because we can use what we already know, see below.
...
public App()
{
InitializeComponent();
if (IsFirstTime)
{
MainPage = new OnboardingPage();
}
else
{
MainPage = new AppShell();
}
}
...
Notice that we are setting the OnboardingPage as the MainPage in our App.xaml.cs file as we do normally. Once we do this, go to your OnboardingPage look for your button that would trigger the navigation and set the MainPage as AppShell, as you see below, in order to navigate to your shell structure.
...
public partial class OnboardingPage : ContentPage
{
...
private void navigationButton_Clicked(object sender, System.EventArgs e)
{
Application.Current.MainPage = new AppShell();
}
...
}
With this you have your Onboarding process done.
Login with Xamarin Forms Shell
In order to set the Login process in your app with Xamarin Forms Shell we are going to use the method that we use before but with a little change, see below.
...
public App()
{
InitializeComponent();
if (IsFirstTime)
{
MainPage = new OnboardingPage();
}
else if (IsLoggedIn)
{
MainPage = new AppShell();
}
else
{
MainPage = new LoginPage();
}
}
...
Notice that we used IsLoggedIn to know is the user has already logged in before in your application, here you need to use your own logic to set this. Once you know if your user is logged in or not just set the appropriate page.
Later then, if you want to navigate to your shell from the LoginPage we need to set Application.Current.MainPage as AppShell, as we did before.
...
public partial class LoginPage : ContentPage
{
...
private void navigationButton_Clicked(object sender, System.EventArgs e)
{
Application.Current.MainPage = new AppShell();
}
...
}
With this you have your login process done. Do you see? really simple and clean. Stop doing workaround when is not necessary.
I hope this tip can help some of you. If you think this can help others just share it to them or leave your thought in comments 😉
For small tips, follow me on Instagram and LinkedIn! Thank you for reading!
