如何在Zebble中为Xamarin制作Metro UI？

Question

我在下面的链接中阅读了Zebble for Xamarin中的堆栈和网格

http://zebble.net/docs/gridltttemplate-tdatagt-class

之后，我尝试为Zebble创建Metro UI，但我不知道如何创建不同大小的网格或堆栈，就像Windows手机主菜单一样，我在下面提供了一个屏幕截图。 / p>

然后我尝试创建一个带有网格元素的东西来显示一个带有一些背景的文本表，如下面的代码中的地铁用户界面

<Grid Columns="2">

  <z-Component z-type="Cell" z-base="GridCell[Stack]">

    <TextView Text="One" Style.BackgroundColor="#cccccc"></TextView>
    <TextView Text="Two" Style.BackgroundColor="#ccffee"></TextView>
    <TextView Text="Three" Style.BackgroundColor="#ffcccc"></TextView>
    <TextView Text="Four" Style.BackgroundColor="#ccccff"></TextView>

  </z-Component>

</Grid>

但是，我的页面上没有任何变化

Answer 1

要创建类似上传图片的内容，您可以使用stack元素在Windows手机中显示菜单或项目，如地铁用户界面。

我制作类似地铁用户界面的内容，向您展示如何使用SCSS和Zebble for Xamarin扩展创建类似地铁UI的内容。

这是Windows平台上应用程序的样式表：

MetroUI Module.zbl

<z-Component z-type="MetroUI"
         z-base="Stack"
         z-namespace="UI.Modules"
         Direction="Vertical"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="../.zebble-schema.xml">

  <Stack Direction="Horizontal">

    <Stack CssClass="metroItemType1" Style.BackgroundColor="#d2ff52">

 </Stack>

 <Stack CssClass="metroItemType2" Style.BackgroundColor="#4575D3">


 </Stack >

 </Stack>

 <Stack Direction="Horizontal">

 <Stack CssClass="metroItemType1" Style.BackgroundColor="#4575D3">

</Stack>

<Stack CssClass="metroItemType2" Style.BackgroundColor="#235C6B">


</Stack >

</Stack>

<Stack Direction="Horizontal">

<Stack CssClass="metroItemType1" Style.BackgroundColor="#F2E24F">

</Stack>

<Stack CssClass="metroItemType3" Style.BackgroundColor="#713093">

</Stack>

 </Stack>




 </z-Component>

这是Zebble中MetroUI模块的样式表：

{{1}}