Matrix Drawing

Requires Media Center 9.1.311 or newer.

Breaks an image into a matrix and draws each cell of the matrix with different rules. Allowing only certain portions of an image to move, stretch, or tile while others remain a fixed size and position.

Matrix Properties

Matrices are a flexible list of rows and columns. Each row and column has these properties:

Image Size: number of pixels of the source image this cell describes. If this is left empty, the remaining image space is evenly split up between all cells with an undefined image size.

Flex: can this cell change size when drawing to smaller or larger regions. This defaults to false.

Flex Weight: when flexing, this cell will fill [Flex Weight] / [Total Flex Weight] percent of the total non-fixed space. (i.e. with 2 columns that flex, using a 10 and a 20 will make the first column 10/30 (1/3) of the non-fixed space and the other column 20/30 (2/3) of the non-fixed space.) This defaults to 100. This is ignored for non-flexing cells.

Column / Row Info Format

The above properties are described using a string.

[Column / Row Info] = [Image Size]-[Flex]-[Flex Weight]

Examples:

   “200-Flex-50” (200 pixels of the image, flex, using flex weight 50)
   “100” (100 pixels, no flex)
   “?” (automatic image size, no flex)
   “?-Flex” (automatic image size, flex)

Describing Columns and Rows

The matrix is made up of an array of rows and an array of columns. These are described using a string [Column / Row Info], [Column / Row Info], etc.

Examples:

   Rows=”100, ?-Flex, 100”
   Columns=”50, ?-Flex-10, 20, ?-Flex-20, 50”

Overriding Cell Flex Drawing Mode

There is also the ability to override how any particular cell should draw when flexing. All cells are stretched by default. Cells are described with a letter and a number, like in a spreadsheet program. (A1, B3, etc.)

The drawing modes are:

   Stretch: stretches in both directions (default)
   Tile: tiles in both directions
   VTile: tiles vertically, stretches horizontally
   HTile: stretches vertically, tiles horizontally

Examples:

   Cells=”A1-Tile, B3-VTile”
   Cells=”A2-Tile”

Complete Examples (XML)

For standard 9-region button, with margins 5, 10, 5, 10 and the center tiled in both directions:

   Columns=”5, ?-Flex, 5” Rows=”10, ?-Flex, 10” Cells=”B2-Tile”

To stretch the entire image (do nothing -- wouldn't actually need either of these in the XML)

   Columns=”” Rows=””

To have two stretch columns with a center, left, and right portion fixed:

   Columns=”100, ?-Flex, 100, ?-Flex, 100”

To have two stretch columns with a center, left, and right portion fixed where the left stretch portion is larger than the right stretch portion:

   Columns=”100, ?-Flex-20, 100, ?-Flex-10, 100”