Xamarin.Forms Shell FlyoutHeader don't update

Question

I use the Shell and i did the header, where it have image, name of user.
When user log out and after log in, information in the header don't update.
I use MVVM and bindings.
On pages update was good, but not in the header.
<Shell.FlyoutHeader>
<view:HeaderView />
</Shell.FlyoutHeader>

HeaderView:

<StackLayout>  

        <Frame Margin="10"  
                               BorderColor="Black"  
                               CornerRadius="50"  
                               HeightRequest="60"  
                               WidthRequest="60"  
                               IsClippedToBounds="True"  
                               HorizontalOptions="Center"  
                               VerticalOptions="Center">  

            <Image Source="{Binding ImageSource}"  
                                     Aspect="AspectFit"  
                                     Margin="-40"  
                                      />  

        </Frame>  



        <Label Text="{Binding newLogINModel.Name}" FontAttributes="Bold" FontSize="Header"  
                                HorizontalOptions="CenterAndExpand" />  


    </StackLayout>  

BaseViewModel:

        public BaseViewModel()  
        {  
            Debug.WriteLine("DBG: BaseViewModel");  

            if (ImageSource == null)  
                GetData();  
        }  

        public NewLogINModel newLogINModel  
        {  
            get => _newLogINModel;  
            set => SetProperty(ref _newLogINModel, value);  
        }  

        public async void GetData()  
        {  
            Debug.WriteLine("DBG: GetData");  

            newLogINModel = await PersonDataModel.GetPersonData();  

            ImageSource = ImageSource.FromStream(() => new MemoryStream(Convert.FromBase64String(newLogINModel.personPicture64)));  
        }  

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

When user log out and after log in, information in the header don't update.

A simple method is to use MessagingCenter to achieve this.

You can refer the following code:

private void UserLogin_Event(object sender, EventArgs e)  
{  
    // other code  
    MessagingCenter.Send<object>(new FlyoutHeader(), "hi");  
}  

The FlyoutHeader.xaml.cs

   public partial class FlyoutHeader : ContentView  
    {  
        public FlyoutHeader()  
        {  
            InitializeComponent();  
  
            MessagingCenter.Subscribe<object>(this, "hi", (sender) => {  
                if (App.newLogINModel.IsLogin)  
                {  
                    mNameLabel.Text = App.newLogINModel.Name;  
                    mHeadImage.Source = App.newLogINModel.ImageSource;  
                }  
                else  
                {  
                    mNameLabel.Text = "";  
                    mHeadImage.Source = "default.png";  
                }  
            });  
        }  
    }  

The FlyoutHeader.xaml

<?xml version="1.0" encoding="UTF-8"?>  
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
             x:Class="Xaminals.Controls.FlyoutHeader"  
             HeightRequest="200">  
    <Grid BackgroundColor="Black">  
        <Image   
              
            x:Name="mHeadImage"  
               Aspect="AspectFill"   
               Source="xamarinstore.jpg"   
               Opacity="0.6" />  
        <Label   
              
                x:Name="mNameLabel"  
               Text="Animals"   
               TextColor="White"   
               FontAttributes="Bold"   
               HorizontalTextAlignment="Center"  
               VerticalTextAlignment="Center" />  
    </Grid>  
</ContentView>  

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

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.

Answer 2

Try this inside your Property setter
RaisePropertyChanged();