Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions 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

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 8

    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 8

    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 8

    Co














  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 8

    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 ?

  • JarvanJarvan 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 17

    @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.