singaporezuloo.blogg.se

1. Blend for visual studio how to#
2. Blend for visual studio install#
3. Blend for visual studio windows 8#
4. Blend for visual studio windows#

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

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 – Now if you try to position your button on the screen anywhere else, you will not be able to do so.

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

The “ui-dark.css” is by default applied to our default.html page as shown below – If you look at our project template, it comes by default with a default style sheets as “ui-dark.css” and “default.css”. 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.

Blend for visual studio windows#

Now as we have seen different windows which we can use for designing Metro Style Apps, let’s start designing our application. 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 – 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).ģ. Live DOM Window – Live DOM window displays all the contents of our HTML document in a tree view structure as shown below –Ģ. It also helps us to create new external style sheets or add style with new media queriesġ. This window allows us to see existing CSS files structure in a hierarchical view. 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. It also allows us to use different scale modes. The Device Window allows us to view our page layout in different ways like “Landscape”, “Filled”, “Snapped” and “Portrait”. You can use the drag and drop functionality and design the screens as per your prototype. You can take an advantage of both the control models for designing the screens. The Assets WindowĪssets windows displays HTML elements as well as dynamic controls which are designed by using Java Script called “Windows Library for JavaScript”. We have chosen the Blank App template, so we are getting the ‘CSS’, ‘images’ and ‘js’ folder along with “default.html ” page. The items under your project will change based on the choice of the template which you are using while creating the project. It is similar to the Solution Explorer in Visual Studio. This window lists out all the items under your project. Let’s take a closer look at the tool windows.

Blend for visual studio windows 8#

Once the project is ready, you will see the default set of tool windows laid out for a Windows 8 style project. I’ve named it “OnLineShoppee” and it uses the “Blank App” project template. Once installed, start the Blend tool and create a new “New Project”.

Blend for visual studio install#

When you install Visual Studio 2012, you will find the option for installing Blend for Visual Studio. However starting with VS2012, Blend is bundled with Visual Studio. 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.īlend for Visual Studio has its lineage in the Expression Blend and Expression Studio suite of tools targeted for Designers. We will see the different parts of Blend which you can use for designing the Metro style applications.

Blend for visual studio how to#

In this article we will see how to use Microsoft Blend for designing Metro style applications using HTML5 and CSS3.