Search code examples
.netvisual-studioxamarinzebblexamarin-zebble

How to change back button position in Zebble for Xamarin?

I build my new Zebble application on the android device, but when I use below code back button shows like this screenshot.

This is my code for navigation to another page.

await Nav.Forward<MyTestPage>(PageTransition.SlideUp);

And this is the result of above code on the android device.

enter image description here

After that, I tried to correct it with stylesheet on Android.scss file like below:

NavigationBar {
    #Title {
        text-align: left;
        padding-left: 65px;
        font-size: 20px;
        font-weight: normal;
    }
    .back {
        margin-bottom: 20px;
    }
}

but nothing did not happen. Also, I review information on the link below, but I did not find anything could help me in this problem.

http://zebble.net/docs/navbarpage-class

Solution

  • To solve this issue, you should change the padding of the back button on common.scss file in styles directory like below:

    .back { 
    color: white;
    width: 48px;
    padding: 0;
       #Icon { 
             height: 80%; 
             background: url(Images/Icons/Back.png); 
             padding:2px 0;
      }
       #TextView { text-align: right; }
  }

    I changed the padding role from 7px to 2px and then it works.