A Grid is similar to ListView but instead of a single column it allows you to set the Columns (int) property.

To use this component, install the Zebble.Grid nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

 

The items in the data source will be rendered using the provided Template class. Each row will be filled first before moving to the next row.

When you add a child to a Grid, it will be added to its "current horizontal stack", until there are as many items in it as the "Columns" of the grid. Once reached, if you try to add another child view, it will first create a new row and then add the child to that row.

A grid is essentially a vertical stack of horizontal stacks.

The child objects within the grid can be anything. Also the width of each object can be different. In that sense the Zebble Grid is different from a HTML table.

MarkUp:

<Grid Id="MyGrid" Width="200" Height="250" Columns="2">
       <TextView Text="Row 1, left cell" />
       <TextView Text="Row 1, right cell" />
       <TextView Text="Row 2, left cell" />
       <TextView Text="Row 2, right cell" />
       <TextView Text="Row 3, left cell" />
       <TextView Text="Row 3, right cell" />
       ...
</Grid>

 

Enabled & Ignored

 

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

Direction

Direction property determines how the cells of Grid are arranged. It has two value:

• Horizontal: Grid is arranged its rows in a row.
• Vertical (Default value): Grid is arranged like a table. It is same Grid View in VS.

Markup:

<Grid Id="MyGrid"  Direction="Horizontal" Columns="2" Style.Height="90"  >
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left cell" />
    </Grid>

 

<Grid Id="MyGrid" Direction="Vertical" Columns="2" Style.Height="90"  >
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left cell" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
    </Grid>

Rotation

You can see more information about rotation in  Zebble here: http://zebble.net/docs/rotation-in-zebble

As you can see in picture, first Grid is rotated 50 degree around X-axis and second grid around Y-axis:

MarkUp:

<Grid Id="FristGrid" Direction="Vertical" Columns="2" Style.Height="90" Style.Border="1" Style.Border.Color="blue" RotationX="50">
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left celll" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
    </Grid>
 

<Grid Id="SecondGrid" Direction="Vertical" Columns="2" Style.Height="90" Style.Border="1" Style.Border.Color="red" RotationY="40">
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left celll" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
   </Grid>

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

 

Font and color

 

Note: It's strongly recommended avoiding using the Style directly unless you have to. Instead, you should use CSS to apply your styles.

<Grid Id="MyGrid" Direction="Vertical" Columns="2" Style.BackgroundColor="gold" >
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left celll" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
   </Grid

 

Box Shadow

 

MarkUp:

<Grid Id="MyGrid" Direction="Vertical" Columns="2" Style.BoxShadow.Color ="green" Style.BoxShadow.BlurRadius="15" Style.Border="1" Style.BoxShadow.SpreadRadius ="5" Style.BoxShadow.XOffset="10" Style.BoxShadow.YOffset="10">
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left celll" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
   </Grid>

Position

You can use Style.X and Style.Y for changnig the location of Grid object.

 MarkUp:
   <Grid Id="MyGrid" Style.X="60" Style.Y="50" Direction="Vertical" Columns="2" Style.BoxShadow.Color ="green" >
      <TextView Text="Row 1, left cell" Style.TextColor="red"/>
      <TextView Text="Row 1, right cell" />
      <TextView Text="Row 2, left celll" />
      <TextView Text="Row 2, right cell" />
      <TextView Text="Row 3, left cell" />
      <TextView Text="Row 3, right cell" />
   </Grid>

Ensure full columns:

If the number of items in the last row is less than the columns, it adds empty canvas cells to fill it up. This is useful for when you want to benefit from the automatic width allocation.

MyGrid.EnsureFullColumns();

Grid<TSource, TCellTemplate>

Just like ListView, Grid also comes in a generic form that is suitable for data binding scenarios. You can specify a data source and also an item templte so it can create the items for you automatically.

Events:

• on-Flashed: Raised when the object is flashed.
• on-Initialized: Raised when the object is created and rendered.
• on-Initializing: Raised when the object is being created and rendered.
• on-LongPressed: Raised when user clicked on the object for a long time.
• on-PanFinished: Raised when user panned on the object .
• on-Panning: Raised when user starts to pan on the object .
• on-PreRendered: Raised when the object is not started to rendered before rendering.
• on-Swiped: Raised when user swiped on the object .
• on-Tapped: Raised when user tapped on the object .