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

Question

我在

下面的 link 中阅读了 Zebble for Xamarin 中的堆栈和网格

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

之后，我尝试为 Zebble 创建地铁 UI，但我不知道如何创建不同大小的网格或堆栈，如 windows phone主菜单，我在下面提供了它的屏幕截图。

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

<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

要创建类似于您上传的图片的内容，您可以使用堆栈元素在 windows 部手机中显示菜单或项目，例如地铁 UI。

我制作了类似 metro UI 的东西来向您展示如何使用 SCSS 和 Zebble for Xamarin 扩展创建类似 metro UI 的东西。

这是您的应用程序在 windows 平台上的样式表：

Windows.scss: 

.metroItemType1{
width:50%;
height:50px;
margin:3px;
}

.metroItemType2 {
width: 25%;
height: 50px;
margin: 3px;
}

.metroItemType3 {
width: auto;
height: 34px;
margin: 3px;
}

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

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 for Xamarin 中制作 Metro UI？

How to make Metro UI in Zebble for Xamarin?

c#

.net

xamarin

xamarin-zebble

zebble