2017-04-20 7 views
1

リストビューでページの下部に2つのボタンを作成する必要があります。だから私は、ページの本文に2つのスタックを作成し、以下のようにそれらにListViewコントロールとボタンを置く:XamarinのZebbleでページ下部に固定ボタンを作成する方法は?

<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の高さを設定するとボタンが隠されました。

+0

このページにはどのようなテンプレートを使用していますか? –

答えて

2

ナビゲーションバーページの下部にボタンバーを作成するには、すべてのプラットフォームで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> 

、リストビューで、あなたはにあなたができるスクロールビューを使用する必要がありますリストを上下にスクロールします。

関連する問題