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:
<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>
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 property determines how the cells of Grid are arranged. It has two value:
Markup:
<TextView Text="Row 1, left cell" Style.TextColor="red"/>
<TextView Text="Row 1, right cell" />
<TextView Text="Row 2, left cell" />
</Grid>
<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>
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:
<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>
<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>
You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding
Note: It's strongly recommended avoiding using the Style directly unless you have to. Instead, you should use CSS to apply your styles.
<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
MarkUp:
<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>
You can use Style.X and Style.Y for changnig the location of Grid object.
MarkUp:
<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>
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.
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.