1

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

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

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

在此处输入图像描述

然后我尝试使用网格元素创建一些内容，以在下面的代码中显示具有某些背景的文本表格，例如 Metro 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>

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

4

1 回答 1

2

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

我制作了类似 Metro UI 的东西来向您展示如何使用 SCSS 和 Zebble 为 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;
}

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

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>
于 2017-04-14T20:15:16.950 回答