Layouts

Just as sites in Rock have layouts Avalanche needs to know how to lay out its blocks. Originally, Avalanche was going to have a handful of prebuilt layouts to choose from. However, in practice this was too limiting and we didn't want the burden of imagining every possibility that we may need. This makes the process more difficult and more complicated, but it improves the flexibility of Avalanche.

Layouts are stored as JSON in a Defined Type and are sent with the page when it is requested. The layout is selected by matching the name of the Rock layout to the defined Value. A Layout in Rock is made up of HTML and Zones a layout in Avalanche consists of nested list of Layout Templates. A block placed in a Zone in Rock is matched to the Layout Template by name. When creating a new layout, you will need to make both a new aspx layout and a defined type.

A Layout Template is a single class representation of the two most straight forward Xamarin Forms layouts --stacklayouts and grids. Note that grids cannot contain blocks, they contain stacklayout which contain blocks.

[
  {
    "Name": string,
    "Type": "StackLayout" or "Grid",
    "Row" : int --zero based index of row in parent grid,
    "Column": int --zero based index of column in parent grid,
    "RowSpan": int --number of rows to expand to in parent grid,
    "ColumnSpan": int  --number of columns to expand to in parent grid ,
    "RowDefinitions": string --defines the size of each row -grid only,
    "ColumnDefinitions": string --defines the size of each row -grid only,
    "ScrollY": bool,
    "ScrollX": bool,
    "Orientation": "Vertical" or "Horizontal" --determines direction of blocks/child layouts stacking -stack layout only,
    "Spacing": double -- distance between blocks/child layouts -stacklayout only,
    "Attributes" : { string: string } - automapped properties,
    "Children": [] -Subtemplates to be placed inside.
  }
]

Example Layout Template:

    [
      {
        "Name": "TopHorizontal",
        "Type": "Grid",
        "Attributes": {
          "HorizontalOptions": "FillAndExpand",
          "VerticalOptions": "Start",
          "MinimumHeightRequest": "60",
          "BackgroundColor": "#222222"
        },
        "Children": [
          {
            "Name": "TopLeft",
            "Type": "StackLayout",
            "Orientation": "Vertical",
            "Row": 0,
            "Column": 0,
            "Attributes": {}
          },
          {
            "Name": "TopCenter",
            "Type": "StackLayout",
            "Orientation": "Vertical",
            "Row": 0,
            "Column": 1,
            "Attributes": {}
          },
          {
            "Name": "TopRight",
            "Type": "StackLayout",
            "Orientation": "Vertical",
            "Row": 0,
            "Column": 2,
            "Attributes": {}
          }
        ]
      },
      {
        "Name": "Featured",
        "Type": "StackLayout",
        "Orientation": "Vertical",
        "Attributes": {
          "VerticalOptions": "Start"
        }
      },
      {
        "Name": "Container",
        "Type": "StackLayout",
        "Orientation": "Vertical",
        "ScrollY": true,
        "Attributes": {
          "VerticalOptions": "StartAndExpand"
        },
        "Children": [
          {
            "Name": "MainGrid",
            "Type": "Grid",
            "Children": [
              {
                "Name": "MainBackground",
                "Type": "StackLayout",
                "Orientation": "Vertical"
              },
              {
                "Name": "Main",
                "Type": "StackLayout",
                "Orientation": "Vertical"
              }
            ]
          },
          {
            "Name": "Horizontal",
            "Type": "StackLayout",
            "Orientation": "Horizontal",
            "Children": [
              {
                "Name": "Left",
                "Type": "StackLayout",
                "Orientation": "Vertical"
              },
              {
                "Name": "Center",
                "Type": "StackLayout",
                "Orientation": "Vertical"
              },
              {
                "Name": "Right",
                "Type": "StackLayout",
                "Orientation": "Vertical"
              }
            ]
          }
        ]
      }
    ]