Introducing Blend for Visual Studio 2012 – Build a simple Windows 8 Store App

Posted by: Pravinkumar Dabade , on 1/17/2013, in Category Windows Store Apps
Views: 80926
Abstract: In this article we will see how to use Microsoft Blend for Visual Studio 2012 for designing Windows 8 style applications using HTML5 and CSS3. We will see the different parts of Blend which you can use for designing the Windows 8 style applications.

In this article we will see how to use Microsoft Blend for designing Metro style applications using HTML5 and CSS3. We will see the different parts of Blend which you can use for designing the Metro style applications.

Please note that the purpose of this demonstration is to give you an overview of Blend for Visual Studio 2012 and not to show you a production quality UX design.

Blend for Visual Studio has its lineage in the Expression Blend and Expression Studio suite of tools targeted for Designers. However starting with VS2012, Blend is bundled with Visual Studio.  When you install Visual Studio 2012, you will find the option for installing Blend for Visual Studio.

 

Once installed, start the Blend tool and create a new “New Project”. I’ve named it “OnLineShoppee” and it uses the “Blank App” project template.

newproj

Once the project is ready, you will see the default set of tool windows laid out for a Windows 8 style project. Let’s take a closer look at the tool windows.

The Projects Window

This window lists out all the items under your project. It is similar to the Solution Explorer in Visual Studio.

projwindow

The items under your project will change based on the choice of the template which you are using while creating the project. We have chosen the Blank App template, so we are getting the ‘CSS’ , ‘images’ and ‘js’ folder along with “default.html ” page.

The Assets Window

Assets windows displays HTML elements as well as dynamic controls which are designed by using Java Script called “Windows Library for JavaScript”. You can take an advantage of both the control models for designing the screens.

assetswindows

You can use the drag and drop functionality and design the screens as per your prototype.

The Device Window

The Device Window allows us to view our page layout in different ways like “Landscape”, “Filled”, “Snapped” and “Portrait”. It also allows us to use different scale modes. This helps us develop and test our app with different devices that have different view characteristics (like dpi and resolution) so that our page will fit in different devices.

devicewindow

Style Rules Window

This window allows us to see existing CSS files structure in a hierarchical view. It also helps us to create new external style sheets or add style with new media queries

 newcss

1. Live DOM Window – Live DOM window displays all the contents of our HTML document in a tree view structure as shown below –

livedomwindows

2. HTML Attributes Windows – This window allows us to set different properties/attribute values of a selected HTML Element as shown below – (I have selected an Image Element from Live DOM window).

 htmlattrwindow

3. CSS Properties – This window allows us to change the style of a selected element class or allows us to create a new class in the existing CSS file or allows us to create new style rule for a CSS class as shown below –

csspropertieswindos

Now as we have seen different windows which we can use for designing Metro Style Apps, let’s start designing our application.  To start off with our design, we will first add a new CSS file in our project and we will continue to use the same CSS file throughout the project. If you look at our project template, it comes by default with a default style sheets as “ui-dark.css” and “default.css”. The “ui-dark.css” is by default applied to our default.html page as shown below –

 defstyle

If you try removing it, you will see a plain blank page. The “ui-dark.css” file comes with default theme. Let’s test it with a few HTML tags. Let’s add a “Button” in our page and see how that button appears in design view.

buttonstyle

Now if you try to position your button on the screen anywhere else, you will not be able to do so. Because the button style is static. In that case, you will have to change the “Position” property of the button by going to CSS Properties window and setting it to “Absolute, Relative or Fixed” as shown below –

disppropgrd

Likewise you can test some HTML tags for the “ui-dark.css” file styles.

Let’s add our own CSS file which we will use to design the layout of our screen. To add the new style sheet, go to “Style Rules” window and add a new CSS file with the name “ui-onlineshop” as shown below –

 newcss

If you observe our new CSS file, it’s completely blank. It does not contain anything apart from blank body. If you switch back to default.html source code, you will see our style sheet has been automatically referenced in the same. Now let’s go to our “Live DOM” window and delete the Paragraph tag which resides under body tag. After this step, let’s select a Body tag from “Live DOM” and set its Display property to “-ms-grid” from CSS Properties window as shown below –

disppropgrd

As soon as you set the Display property of our body tag to “-ms-grid”, you can start adding the rows and columns in to our grid as shown below –

addrow

For our demonstration, we will create a layout with one column and four rows. First row is for logo and title of the site. Second row is for description. Third row is for our main content. And the last row is for our footer.

Now let’s add an image tag in our header and set its position property to “Absolute”. Also add “h1” tag with the title “My Online Shoppee site”. Your header should look like below –

header

Now let’s add “h2” tag in our second row where we will add a description about our page. The description should be like “Mega OnLine Shopper’s Stop!!”. Now let’s add”h2” tag into our last row which is the footer and use a nice footer text as per your convenience.

So as of now, our header, description and footer are ready. Well done! Now comes the major part of our page where we have to display the images of the products we want to sell. So let’s first add a “Grid” from “Assets” window and add 4 rows, 3 columns. Then add an image control into each cell of our grid as shown below –

gridimg

Now if you see, my images are too big to fit into my grid cell. So, let’s add a new “Style Rule” in our “Style rule” window and name it “img”. Then set its height and width to 200px by 300px. Now observe the layout.

The last thing which we will do now is add a “Rating” control where people will rate your page. For this we will take the help of “Windows Library for JavaScript” which you can find under Assets window. Let’s add a Rating control and set its position to Absolute, so that we can place this control in our Description row. Also, set the “averageRating” property to “3” from “HTML Attributes” window and now your UI should look like below –

finaloutput

As you can see, by using various options in Blend, you can easily style your web pages in Metro style. This is completely dedicated to designers where designers can work with HTML 5 and CSS 3.

Conclusion

In this article, we have seen how to use Blend for Visual Studio 2012 for designing Metro Style applications using various options provided by Blend as a designer’s tool.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the pre-order of The Absolutely Awesome Book on C# and .NET. This is a concise technical eBook and will be available in PDF, ePub, and mobi.

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core. Use these concepts in your next .NET Project or to crack your next .NET Interview.

Click here to Pre-Order this eBook at a Discounted Price!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Indrajit Sinh Rayjada on Sunday, March 10, 2013 3:59 AM
MR.Pravinkumar Dabade

upload a sample code witch connect vs2012 blend and sql database or ms-access database

One suggestion is that you create a full tutorial series that tech how to create basic application in blend to robust application including all the controls,class,etc.. In C#,js,and VB  
Plz.................
Comment posted by krish on Thursday, March 28, 2013 7:33 AM
can tell me how to convert normal app in to ms app
Comment posted by krish on Thursday, March 28, 2013 7:33 AM
u look funny
Comment posted by Pritish on Sunday, October 13, 2013 4:27 AM
Hi Pravin,

I have recently installed Microsoft VS 2013 RC Express. But there is no Javascript option and windows store option available. How to install it ?
I am using Windows 8 OS.
Thanks
Comment posted by Myron on Saturday, November 23, 2013 9:16 PM
I have Visual Studio 2012 Ultimate with Blend. But I could not find Blend from new WPF Application project. I'm using Windows 7. Am I missing anything?
Comment posted by asad ali on Saturday, March 7, 2015 10:19 AM
Hello sir i am using VS 2012, i dont have the option of Windows Store Apps, how i get it.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook