Windows Store App (Metro UI) Design in SharePoint 2010

Objective

We want to implement the Windows Store App (Metro UI) themes in our SharePoint 2010 pages.

Steps

We are not going develop the CSS and pages from scratch. We will try to implement the code project solution file for CSS and design.

Site Link

http://www.lifeinsharepoint.co.uk/2011/12/03/metro-ui-sharepoint-2010-masterpage-solution/

CodePlex Link

http://lifeinsharepoint.codeplex.com/releases/view/78033

First download the WSP file and install it in the SharePoint Server. We can use the PowerShell command to simplify the process.

Add Solution

Add-SPSolution c:\solutionpath\LifeInSharePoint.Metro.wsp

Deploy Solution

Install-SPSolution -Identity LifeInSharePoint.Metro.wsp -WebApplication http://myprojectsite -GACDeployment

Once it's successfully deployed, we can check the deployment files in 14 hive path as mentioned in the following path.

Go To -> Site Collection Administration -> Site collection Features; we can see the installed feature with the name "SITE.LifeInSharePoint.Metro"



Before we activate the feature, we will see the following design for sites and pages.



Site Collection Admin page looks like the following page:



Activate the feature, make sure site collection's publishing feature is already activated in the site collection.



As soon as the feature has activated, we will immediately make the design (UI) changes.



The entire site's design has changed to that of a Windows Store App (Metro UI):



Summary

Creating a SharePoint site in Windows Store App (Metro UI) is fun. Still we are using the CodePlex tool; we will understand the basic design principles behind the scene.

UI Design Principle

http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx