Xamarin Flyout Dynamic change content after login

Question

Hi
How to change Flyout FlyoutHeaderTemplate image and FlyoutFooterTemplate content after successfully login mobile application and also display customer email address when login customer.

<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid BackgroundColor="White"
HeightRequest="140" Margin="0,30,0,0">
<Image
Source="AppLogo.jpg"
Aspect="AspectFit"/>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>

in place of AppLogo.jpg change user profile picture after login otherwise display app logo

<Shell.FlyoutFooterTemplate>
<DataTemplate>
<StackLayout Padding="20" Spacing="5">
<Label
TextColor="{StaticResource LabelPlaceHolder}"
FontAttributes="Bold"
FontSize="17"
HorizontalOptions="Center" />
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="{StaticResource LabelPlaceHolder}"
HorizontalOptions="Center"
FontSize="14"/>
</StackLayout>
</DataTemplate>
</Shell.FlyoutFooterTemplate>

and FlyoutFooterTemplate how to display application current version(Xamarin.Essentials.VersionTracking.CurrentVersion)

Thanks,

Answer 1

Hello,

in place of AppLogo.jpg change user profile picture after login otherwise display app logo

You could new a view model and bind the AppShell to change the logo. When the user is login, publish a message by MessagingCenter and change the ImageSource. You could also set a static member or use a static Properties dictionary to save the login status :

App

 public partial class App : Application  
    {  
        public static Boolean IsLogin { set; get; } = false; // set a static member  
        public App()  
        {  
            ......  
         //   Application.Current.Properties["IsLogin"] = false; // use static Properties dictionary  
           ......  
        }  
}  

XAML

<Shell.BindingContext>  
        <vm:ShellViewModel></vm:ShellViewModel>  
 </Shell.BindingContext>  

The image in Shell.FlyoutHeaderTemplate

<Image  
Source= "{Binding UserProfile}"  
Aspect="AspectFit"/>  

ViewModel:

public class ShellViewModel: BaseViewModel// the BaseViewMode calls INotifyPropertyChanged method  
    {  
        string _userprofile = string.Empty;  
        public string UserProfile  
        {  
            get { return _userprofile; }  
            set { SetProperty(ref _userprofile, value); }  
        }  
    }  

Push message when logging in

private async void OnLoginClicked(object obj)  
        {  
            ......  
            MessagingCenter.Send<Object, string>(this, "UserProfile", "icon_feed.png");// test a PNG file, you could set the user profile   
            App.IsLogin = true;  
           //   Application.Current.Properties["IsLogin"] = true;  
        }  

Subscribe this message in the constructor of ShellViewModel

 public ShellViewModel()  
        {  
            MessagingCenter.Subscribe<Object, string>(this, "UserProfile", (sender, s) =>  
            {  
                this.UserProfile = s;  
            });  
        UserProfile = App.IsLogin ? "icon_feed.png" : "icon_about.png";// test   
    }  

Pay attention to unsubscribing the message, refer to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/messaging-center#unsubscribe-from-a-message

and FlyoutFooterTemplate how to display application current version(Xamarin.Essentials.VersionTracking.CurrentVersion)

You could bind the version like the user profile in ShellViewModel

<Shell.FlyoutFooterTemplate>  
        <DataTemplate>  
            <StackLayout Padding="20" Spacing="5">  
                ......  
                <Label Text="{Binding CurrentVersion}" TextColor="{StaticResource LabelPlaceHolder}"  
HorizontalOptions="Center"  
FontSize="14"></Label>  
            </StackLayout>  
        </DataTemplate>  
    </Shell.FlyoutFooterTemplate>  

Set the CurrentVersion in ShellViewModel

public class ShellViewModel: BaseViewModel  
{  
          ......  
public string CurrentVersion { get; set; } = Xamarin.Essentials.VersionTracking.CurrentVersion;  
          ......  
}  

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.