Home > Back-end >  Displaying authenticated user info on AppShell FlyoutHeaderTemplate
Displaying authenticated user info on AppShell FlyoutHeaderTemplate

Time:03-20

I'm trying to create a flyout header that displays the authenticated user's avatar and name in the FlyoutHeaderTemplate.

The issue I ran into is that it looks like OnAppearing() method is not invoked at all for AppShell. I put break points in that method and never hit it.

I also tried using a ContentView to display the header in my Flyout but turns out ContentView's don't have OnAppearing() or OnDisappearing() lifecycle events either.

How do I display authenticated user info in my flyout? I have the user info in my local database. All I need to do is:

  1. Be able to call var user = await _dbService.GetUser(); to read user info
  2. I also need to be able to bind to certain controls i.e. Label for username and Avatar for user image.

Here's what I have in my AppShell:

<Shell.FlyoutHeaderTemplate>
   <DataTemplate>
      <StackLayout>
         <Label Text="{Binding ???}"/>
      </StackLayout>
   </DataTemplate>
</Shell.FlyoutHeaderTemplate>

CodePudding user response:

First time you run the Appshell it will hit the constructor so you can call var user = await _dbService.GetUser(); in the constructor . Then Bind the shell to itself this.BindingContext = this;. Add a string property to bind it to the Text Label in xaml.

private string name;
public string Name { get{return name;} set { SetProperty(ref name, value); } 

public AppShell()
{
  InitializeComponent();
   Task.Run(async () =>
                    {
                        await GetUser();
                    });
  this.BindingContext = this;
}

public async void GetUser(){
  var user = await _dbService.GetUser();  
  Name = user.Name; 
}

The OnAppearing() will hit whenever you go to await Shell.Current.GoToAsync("..");. So you can call var user = await _dbService.GetUser(); in it also.

  • Related