// Initialize our column object, passing the screen required, all others optional
public MetroColumn(MetroScreen metroScreen, string titleText = "", string onClick = "", string navUrl = "")
{
// Look to see if there is a "last" column in the list, if not returns null
MetroColumn lastColumnAdded = metroScreen.Columns.LastOrDefault();
// Set the defaults for columns
this.LeftMargin = metroScreen.TilesStartLeftMargin;
this.TilesTopMargin = metroScreen.TilesStartTopMargin;
this.SpacingBetweenTiles = metroScreen.SpacingBetweenTiles;
this.NavUrl = navUrl;
this.Position = 0;
// If this is not the first column, calculate the left margins based on the previous column
if (lastColumnAdded != null)
{
lastColumnAdded.Width = lastColumnAdded.Rows.OrderBy(e => e.Width).LastOrDefault().Width;
this.LeftMargin = lastColumnAdded.LeftMargin + lastColumnAdded.Width + metroScreen.SpacingBetweenColumns;
this.Position = lastColumnAdded.Position + 1;
}
// Set the column title and click event
this.TitleText = titleText;
this.OnClick = onClick;
// Create our default list of rows for this column
this.Rows = new List <MetroRow>();
}
// Initialize our column object, passing the screen required, all others optional
public MetroColumn(MetroScreen metroScreen, string titleText = "", string onClick = "", string navUrl = "")
{
// Look to see if there is a "last" column in the list, if not returns null
MetroColumn lastColumnAdded = metroScreen.Columns.LastOrDefault();
// Set the defaults for columns
this.LeftMargin = metroScreen.TilesStartLeftMargin;
this.TilesTopMargin = metroScreen.TilesStartTopMargin;
this.SpacingBetweenTiles = metroScreen.SpacingBetweenTiles;
this.NavUrl = navUrl;
this.Position = 0;
// If this is not the first column, calculate the left margins based on the previous column
if (lastColumnAdded != null)
{
lastColumnAdded.Width = lastColumnAdded.Rows.OrderBy(e => e.Width).LastOrDefault().Width;
this.LeftMargin = lastColumnAdded.LeftMargin + lastColumnAdded.Width + metroScreen.SpacingBetweenColumns;
this.Position = lastColumnAdded.Position+1;
}
// Set the column title and click event
this.TitleText = titleText;
this.OnClick = onClick;
// Create our default list of rows for this column
this.Rows = new List<MetroRow>();
}
public ActionResult Index()
{
// Some temp variables to make life a bit more cleaner
MetroTile aTile;
MetroColumn aColumn;
MetroRow aRow;
// =============================================================================
// =============================================================================
// Everything starts with a screen object
// =============================================================================
// =============================================================================
MetroScreen metroScreen = new MetroScreen(145, 10, 0, 45);
// =============================================================================
// =============================================================================
// Lets create a column (group)
// Steps:
// 1. Add a column to the screen object
// 2. Add a row to the column
// 3. Add tiles to your row
// 4. As necessary, keep adding rows to the column and tiles to rows
// =============================================================================
// =============================================================================
aColumn = metroScreen.AddColumn("Column0", "window.alert('Column 0 title clicked!')");
// Now a row within this column
aRow = aColumn.AddRow();
// How about some tiles to this row, specific to this column
// Only need to grab the tile if you want to add additional property values
aTile = aRow.AddTile(TileType.ScrollingText, TileWidth.Wide, TileHeight.Normal, "orange", "Tile0", "window.alert('Tile 0_0_0')");
aTile.LabelText = "Label";
aTile.Text.Add("This is a scrolling text tile...");
aTile.Text.Add("You can add as many lines as needed...");
aTile.Text.Add("Easy peasy!!");
// Now another row, within this column
aRow = aColumn.AddRow();
// Tiles for this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "purple", "Tile1", "window.alert('Tile 0_1_1')");
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "purple", "Tile2", "window.alert('Tile 0_1_2')");
// Now our final row, within this column
aRow = aColumn.AddRow();
// And our final tile in this row, specific to this column
aTile = aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightblue", "Tile3", "window.alert('Tile 0_2_3')");
aTile.Text.Add("This is a simple tile, Text, No Image");
// =============================================================================
// =============================================================================
// Lets create aanother column (group)
// Steps:
// 1. Add a column to the screen object
// 2. Add a row to the column
// 3. Add tiles to your row
// 4. As necessary, keep adding rows to the column and tiles to rows
//
// Notice this one has no title and obviously no onClick
// =============================================================================
// =============================================================================
aColumn = metroScreen.AddColumn("Column1");
// Now a row within this column
aRow = aColumn.AddRow();
// How about some tiles to this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 1_0_0')");
// now another row, within this column
aRow = aColumn.AddRow();
// Tiles for this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 1_1_1')");
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 1_1_2')");
// now our final row, within this column
aRow = aColumn.AddRow();
// and our final tile in this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 1_2_3')");
// =============================================================================
// =============================================================================
// Lets create another column (group)
// Steps:
// 1. Add a column to the screen object
// 2. Add a row to the column
// 3. Add tiles to your row
// 4. As necessary, keep adding rows to the column and tiles to rows
//
// Notice this column has a title, no click event
// =============================================================================
// =============================================================================
aColumn = metroScreen.AddColumn("Column2");
// Now a row within our column
aRow = aColumn.AddRow();
// How about some tiles to this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 2_0_0')");
// now another row, within this column
aRow = aColumn.AddRow();
// Tiles for this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 2_1_1')");
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 2_1_2')");
// now our final row, within this column
aRow = aColumn.AddRow();
// and our final tile in this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 2_2_3')");
// =============================================================================
// =============================================================================
// Lets create our final column (group)
// Steps:
// 1. Add a column to the screen object
// 2. Add a row to the column
// 3. Add tiles to your row
// 4. As necessary, keep adding rows to the column and tiles to rows
//
// Notice this column has a title, no click event
// =============================================================================
// =============================================================================
aColumn = metroScreen.AddColumn("Column3");
// Now a row within our column
aRow = aColumn.AddRow();
// How about some tiles to this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 3_0_0')");
// now another row, within this column
aRow = aColumn.AddRow();
// Tiles for this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 3_1_1')");
aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 3_1_2')");
// now our final row, within this column
aRow = aColumn.AddRow();
// and our final tile in this row, specific to this column
aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 3_2_3')");
// =============================================================================
// =============================================================================
// Done with creating our columns and tiles
//
// Lets get the html to define our screen
// =============================================================================
// =============================================================================
string colHtml = null;
string tileHtml = null;
string configVariables = null;
// Build our html for the screen
foreach (MetroColumn column in metroScreen.Columns)
{
// first lets get the html for this columns header
colHtml += column.GetTitleHtml();
// Lets get the html for the tiles associated with this column
tileHtml += column.GetTileHtml();
}
// create our variables for the javascript side
configVariables = metroScreen.GetClientConfig();
// lets put the html and script in the global data space for the view
ViewData["configVariables"] = configVariables;
ViewData["metroHtml"] = colHtml + tileHtml;
return View();
}
