Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Bottom Nav Bar

Hi Techie,
How to implement bottom Nav bar with customized image ? I have implemented the Bottom Nav bar with customized image but if i hot reload the page image is hidden. Then again restarted the project. Its working fine .

How to overcome this problem ?

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited October 2020

    but if i hot reload the page image is hidden

    Will this issue occur on the emulator when deploying the project? Please test the sample to check that, Hot Reload may have the limitation. How did you load the 'customized images'? Using binding? Try to use MVVM pattern to set binding for the images and test again.

    If the issue also occurs on the emulator, please post the related code to reproduce the issue.

  • Vasanthakumar06Vasanthakumar06 Member ✭✭✭
    edited October 2020

    Here is the Code

    CS Code

    public Home()
    {
    InitializeComponent();
    NavigationPage.SetHasNavigationBar(this, true);
    imgHome.Source = ImageSource.FromResource("Demo.Home.jpeg");
    imgFriends.Source = ImageSource.FromResource("Demo.Friends.png");
    imgInvite.Source = ImageSource.FromResource("Demo.Invite.png");
    imgNotification.Source = ImageSource.FromResource("Demo.Notification.jpeg");
    imgMore.Source = ImageSource.FromResource("Demo.More.jpg");
    //Home Tap
    var homeTap = new TapGestureRecognizer();
    homeTap.Tapped += (sender, e) => {
    DefaultBackground();
    };
    stckHome.GestureRecognizers.Add(homeTap);
    //ShowOff Tap
    var showffTap = new TapGestureRecognizer();
    showffTap.Tapped += (sender, e) => {
    DefaultBackground();
    App.Current.MainPage = new NavigationPage();
    App.Current.MainPage.Navigation.PushAsync(new Showoff());
    };
    stckShowoff.GestureRecognizers.Add(showffTap);
    //Invite Tap
    var inviteTap = new TapGestureRecognizer();
    inviteTap.Tapped += (sender, e) => {
    DefaultBackground();
    App.Current.MainPage = new NavigationPage();
    App.Current.MainPage.Navigation.PushAsync(new Invite());
    };
    stckInvite.GestureRecognizers.Add(inviteTap);
    //Notification Tap
    var notificationTap = new TapGestureRecognizer();
    notificationTap.Tapped += (sender, e) => {
    DefaultBackground();
    App.Current.MainPage = new NavigationPage();
    App.Current.MainPage.Navigation.PushAsync(new Notification());
    };
    stckNotification.GestureRecognizers.Add(notificationTap);
    //More Tap
    var moreTap = new TapGestureRecognizer();
    moreTap.Tapped += (sender, e) => {
    DefaultBackground();
    App.Current.MainPage = new NavigationPage();
    App.Current.MainPage.Navigation.PushAsync(new More());
    };
    stckMore.GestureRecognizers.Add(moreTap);

  • Vasanthakumar06Vasanthakumar06 Member ✭✭✭
    edited October 2020

    Co














  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited October 2020

    XAML Hot Reload can't reload C# code, try setting the source of the images in xaml instead of code behind.

    Place the image files to each application project and reference the image in xamarin.forms. Check the tutorial: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images

    <StackLayout ...>
        <Image Margin="0,10,0,10" x:Name="imgHome" Source="Home" .../>
    </StackLayout>
    
  • Vasanthakumar06Vasanthakumar06 Member ✭✭✭

    @Jarvan
    Bottom nav bar is not fit into mobile, Bottom nav bar is aligned different in each and every devices. . Why ?

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Bottom nav bar is not fit into mobile, Bottom nav bar is aligned different in each and every devices.

    This may be because you have specified a fixed value to the view of the navigation bar, which will show different effects on different devices. Try to set the size proportionally, you could use Grid or AbsoluteLayout instead of the StackLayout.

  • Vasanthakumar06Vasanthakumar06 Member ✭✭✭
    edited November 2020

    @Jarvan said:

    Bottom nav bar is not fit into mobile, Bottom nav bar is aligned different in each and every devices.

    This may be because you have specified a fixed value to the view of the navigation bar, which will show different effects on different devices. Try to set the size proportionally, you could use Grid or AbsoluteLayout instead of the StackLayout.

    I used the Absolute Layout . But still same Bottom nav bar is not fit into the mobile

    abs.JPG 100.2K
Sign In or Register to comment.