CODEWITHSUNDEEP
c#xamarin.formsxamarin.androidxamarin.iosxamarin.shell
Rizwan Siddiqui
Rizwan Siddiqui

Reputation: 53

Defining layout of a crossplatform mobile app in c# (xamarin forms) using Shell

I am new to xamarin forms and shell and I am currently trying to design the hierarchial structure of an app using Shell (Xamarin.Forms Shell). I want to design my app so that once the user logs in, he will be taken to a page (let's call it home page one) that can be chosen from the flyout menu and has it's own unique tabs at the bottom. I also want there to be another page visible in the flyout menu (let's call it home page two) so that if the user clicks on home page two, it is taken to home page two, which has it's own different tabs at the bottom. The user should see different tabs depending on which home page they chose in the flyout menu.

Here's the idea of the overall layout:

  1. Once user starts up application, they are taken to a start page (StartPage)

  2. The start page gives the user the choice to login (LoginPage) or register (RegistrationPage)

  3. Once the user successfully logs in, they are taken to home page one(HomePageOne) which contains 4 tabs at the bottom

  4. If the user opens the flyout menu, it should display an item for HomePageOne and HomePageTwo, as well as a logout menu item.

  5. If the user clicks on home page two (HomePageTwo), they are taken to home page two, which has different tabs from home page one and vice versa

  6. If the user chooses to logout, they are taken back to the start page (StartPage)

I currently have two questions. First, I'm not sure how to define my shell to account for the different home pages having different tabs. Second, when the user chooses to logout, it is still displaying the flyout menu (hamburger menu) even though that should only be visible while the user is successfully logged in.

Here is my AppShell.xaml:

<ShellItem Route="Start" FlyoutItemIsVisible="False">
    <ShellContent Route="StartPage" ContentTemplate="{DataTemplate local:StartPage}" />
</ShellItem>
<ShellItem Route="Login" FlyoutItemIsVisible="False" >
    <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</ShellItem>
<ShellItem Route="Registration" FlyoutItemIsVisible="False" >
    <ShellContent Route="RegistrationPage" ContentTemplate="{DataTemplate local:RegistrationPage}" />
</ShellItem>

<FlyoutItem Title="Home Page One" Icon="icon_about.png">        
    <ShellContent Route="HomePageOne" ContentTemplate="{DataTemplate local:HomePageOne}" />
</FlyoutItem>
<FlyoutItem Title="Home Page Two" Icon="icon_feed.png">
    <ShellContent Route="HomePageTwo" ContentTemplate="{DataTemplate local:HomePageTwo}" />
</FlyoutItem>

<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to  -->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="MenuLogout_Clicked">
</MenuItem>

Here is my AppShell.xaml.cs:

public partial class AppShell : Xamarin.Forms.Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(StartPage), typeof(StartPage));
        Routing.RegisterRoute(nameof(RegistrationPage), typeof(RegistrationPage));
        Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
    }

    private async void MenuLogout_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("StartPage");
    }

}

Upvotes: 0

Views: 195

Answers (1)

Rizwan Siddiqui
Rizwan Siddiqui

Reputation: 53

I found the answer by watching a couple of videos by James Montemagno on youtube. If you are new to xamarin, I highly recommend these videos!

https://www.youtube.com/watch?v=ylbgWHB_gMI&t=1s - Login flow

https://www.youtube.com/watch?v=8iYpLMKE_ws&t=1067s - Shell Navigation

Upvotes: 0

Related Questions