How to create fixed button to the bottom of the page in Zebble for Xamarin?

Question

I need to create two buttons in the bottom of the page with a list view. So I create two stacks in the body of the page and put listview and buttons to them like below:

<z-place inside="Body">
   <Stack Direction="Vertical">
      <Stack Id="top">

  </Stack>
  <Stack Id="bottomMenu" Direction="Horizontal">
    <Button Text="Btn1" CssClass="btmButton1"></Button>
    <Button Text="Btn2" CssClass="btmButton2"></Button>
  </Stack>
 </Stack>
</z-place>

And the stylesheet like this:

//Android.scss

.btmButton1 {
    background: linear-gradient(to bottom, #039795, #196e6d);
    color: #ffffff;
    height: 52px;
    margin: 0;
    border-radius: 0;
}

.btmButton2 {
    background: linear-gradient(to bottom, #5c0eb3, #3f1968);
    color: #ffffff;
    height: 52px;
    margin: 0;
    border-radius: 0;
}

#top {
    height: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
    background: #dadada
}

#bottomMenu {
    width: calc("Zebble.Device.Screen.Width");
    margin-top: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
    position: fixed;
}

But, when I set the #top height buttons was hidden.

Answer 1

To make button bar on the bottom of navigation bar page, you can use this css role in common.scss for all platforms.

.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}

.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}

#top {
height: calc("(Zebble.Device.Screen.Height - 116)");
background: #dadada
}

#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
height:52px;
}

And your body of main page view code is:

  <z-place inside="Body">
    <Stack Direction="Vertical">

      <Modules.ContactsList Id="top" />

     <Stack Id="bottomMenu" Direction="Horizontal">
      <Button Text="Btn1" CssClass="btmButton1"></Button>
      <Button Text="Btn2" CssClass="btmButton2"></Button>
    </Stack>
  </Stack>
 </z-place>

There is a notice in above code which is the list view, in list view, you should use scroll view that you able to scroll your list up and down.