原文：http://www.howtosp.com/blog/2012/10/14/sharepoint-2013-create-a-metro-live-tile-programmatically/
SharePoint is going metro.. keeping up with the styling of Windows 8. Just create a new team site in SP2013 and you will find the metro UI styling in the home page.. which looks like this..
Wow!! looks good, but in real life applications, you will have little use for the default tiles displayed. So conveniently, there is a “REMOVE THIS” link there to remove the OOTB tiles.
Add custom tiles by configuration:
SharePoint provides a way to add you own set of tiles. You will have to create a new list based on the “PromotedLinks” list template and add the list to the page.. and you will get your tile. Step-by-Step walkthrough is provided in this post by Isha.
Add custom tiles using MetroJS, JsRender and REST API:
For all those developers who are not satisfied with what it provided OOTB, you can create a webpart using Visual studio and deploy it SharePoint. If you are strong in javascript or would like to learn using javascript for this task, you can refer to this post by Alex Choroshin
Add custom tiles programmatically using SharePoint API:
But SharePoint provides an easier way to programmatically add tiles to your SharePoint environment. You will have to build your webpart that inherits from the abstract base class TilesViewWebPart.
Create a new SharePoint Project and add a normal webpart file. Inherit from TilesViewWebpart and implement the abstract class
To implement the GetTiles() .. you will need a collection of TileData. I used a data class to hold the data and then build the collection on PageLoad..
|
1
2
3
4
5
6
7
8
|
private class TileMetadata{ public int TileOrder { get; set; } public string Link { get; set; } public TileLaunchBehavior Behavior { get; set; } public string Title { get; set; } public string Description { get; set; }} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
private static CustomTileWebPart.TileMetadata[] defaultTiles;protected override void OnLoad(EventArgs e){ base.OnLoad(e); SPWeb web = SPContext.Current.Web; defaultTiles = new CustomTileWebPart.TileMetadata[] { new CustomTileWebPart.TileMetadata { TileOrder = 1, Link = SPUrlUtility.CombineUrl(SPUrlUtility.CombineUrl(web.ServerRelativeUrl, SPUtility.GetLayoutsFolder(web)), "/aclinv.aspx?forSharing=1"), Behavior = TileLaunchBehavior.Dialog, Title= "Share Your Site", Description="Bring the right people together!" }, new CustomTileWebPart.TileMetadata { TileOrder = 2, Behavior = TileLaunchBehavior.NewTab, Title= "Google", Description="Your search engine!" }, new CustomTileWebPart.TileMetadata { TileOrder = 3, Link = SPUrlUtility.CombineUrl(SPUrlUtility.CombineUrl(web.ServerRelativeUrl, SPUtility.GetLayoutsFolder(web)), "/prjsetng.aspx?Source=~source"), Behavior = TileLaunchBehavior.InPageNavigation, Title= "Project Settings", Description="Manage your site!" } }; base.BaseViewID = "2";} |
Note: More on BaseViewID and TileLaunchBehavior below
Now within the GetTiles() method, build the TileData[]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
string backgroundImageLocation =SPUrlUtility.CombineUrl( SPUtility.ContextLayoutsFolder, "Images/gettingstarted.png");TileData[] array = new TileData[CustomTileWebPart.defaultTiles.Length];for (int i = 0; i < CustomTileWebPart.defaultTiles.Length; i++){ CustomTileWebPart.TileMetadata tileMetadata = CustomTileWebPart.defaultTiles[i]; int num = i + 1; array[i] = new TileData { ID = num, Title = tileMetadata.Title, Description = tileMetadata.Description, BackgroundImageLocation = backgroundImageLocation, LinkLocation = tileMetadata.Link, LaunchBehavior = tileMetadata.Behavior, TileOrder = tileMetadata.TileOrder };}return array; |
Done! deploy the webpart and see your custom tiles in action
BaseViewID:
The default value is “1” if you don’t specify a value. The available values are
TileView : same as getting started but without the Title and the option to remove this
GettingStartedView : what you see in the start page OOTB
GridView: will arrange the tiles in a grid
In the code above you can use the following to specify the value..
|
1
|
base.BaseViewID = ((int)TilesBaseViewID.TileView).ToString(); |
TileLaunchBehavior
The values are self explanatory .. but nice to know.