How to make Metro UI in Zebble for Xamarin?

Question

I read about stack and grid in Zebble for Xamarin in link below

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

After that, I try to create metro UI for Zebble, but I do not know how I can create the different size of the grid or stack like a windows phone main menu and I provide a screen shot from it in below.

then I try to create something with a grid element to show a table of text with some background like metro UI in below code

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

but, nothing changed on my page

Answer 1

To create something like an image you uploaded, you can use stack element to show menus or items like a metro UI in windows phones.

I make something like metro UI to show you, how you can create something like metro UI with SCSS and Zebble for Xamarin extension.

This is a stylesheet of your application on windows platform:

Windows.scss: 

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

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

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

This is a stylesheet of your MetroUI Module in 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>