Xamarin.Forms Shell Passing Data to Flyout Item Views

Question

I would like to know how to pass an item from the main shell page to flyout pages. Or, alternatively, I would like to know if I can simply use an object (which already exists in the scope of the main shell) in its flyout pages. I'm guessing there's some way to do this in the code-behind.

Specifically, I have a login page (which is not a part of the shell) which navigates to the main shell once a user logs in. It passes a Jason web token to the main shell. So I have what I need in the main shell, I just don't know how to use it in the flyout pages!

Here is some code to demonstrate:

I have a login page with a function that takes a username and passes it to the shell:

    async void SignInProcedure(System.Object sender, System.EventArgs e)
    {
        string name = nameEntry.Text;

        if (name == "sally" || name == "Sally")
            Application.Current.MainPage = new FlyoutMainShell(name);
        else
        {
            await DisplayAlert("Login", "Login Failed", "Ok");
        }
    }

And of course, I have the string in the constructor for the shell:

using System;
using System.Collections.Generic;
using System.Windows.Input;
using Xamarin.Forms;

namespace ShellTest
{
    public partial class FlyoutMainShell : Shell
    {

        public FlyoutMainShell(string name)
        {
            InitializeComponent();
        }
    }
}

Now I'm not sure how to use that string 'name' in flyout items 'page1' and 'page2', i.e. to simply display that name on the page.

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="ShellTest.FlyoutMainShell"
       xmlns:pages="clr-namespace:ShellTest">
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Gray" HeightRequest="200">
                <Label Text="Here's the header!"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
    <FlyoutItem x:Name="page1" Title="Go to Page 1">
        <ShellContent ContentTemplate="{DataTemplate pages:Page1}"/>
    </FlyoutItem>
    <FlyoutItem x:Name="page2" Title="Go to Page 2">
        <ShellContent ContentTemplate="{DataTemplate pages:Page2}" />
    </FlyoutItem>
</Shell>

Any help is greatly appreciated!

Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). — Jack Hua

Jack Hua Jack Hua · Accepted Answer · 2020-08-24T02:01:54

You can use Xamarin.Essentials: Preferences to store the data at Main Shell and get/use it in the 'page1' and 'page2':

In Main Shell, store the data:

public FlyoutMainShell(string name)
{
    InitializeComponent();

    Preferences.Set("uesr_name", name);

}

In other page, get the value:

public Page1()
{
    InitializeComponent();

    var myValue = Preferences.Get("uesr_name", "default_value");

}

And you can remove the value when the user logout:

Preferences.Remove("uesr_name");

Xamarin.Forms Shell Passing Data to Flyout Item Views

1 Answers