如何在Zebra的Xamarin页面的底部创建固定按钮？

Question

我需要使用列表视图在页面底部创建两个按钮。所以，我创建了页面的主体两个堆栈，并把ListView和按钮将它们象下面这样：

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

而且样式表是这样的：

//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; 
} 

但是，当我设置#top高度按钮被隐藏。

Answer 1

要在导航栏页面的底部制作按钮栏，您可以在common.scss中为所有平台使用此css角色。

.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; 
} 

和你的主页视图代码体是：

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

有一个在上面的代码一份公告列表视图，在列表视图中，你应该使用滚动视图，你能上下滚动你的列表。