(Part 7) Tools for Metro Style Application Development

This is the last blog from my side in this series. In this I would discuss about CSS property panel, Projects panel, Platform panel, Styles panel and Attribute panel. So let us discuss them one by one :

CSS property panel

The CSS Properties panel in Microsoft Expression Blend 5 for Windows Developer Preview is where you can view and modify the CSS properties of an element that is selected on the artboard or under Live DOM. If you modify an element directly on the artboard with your mouse using the object handles, the property changes will be reflected in the CSS Properties panel. The reverse is also true: if you scale an object by using the value editor under Sizing in the CSS Properties panel, the object will scale on the artboard.

The CSS Properties panel undocked

VS 2011

Hh452645.af4f4234-b404-40f2-86bf-26f72a4773dd(en-us,VS.85).png     CSS properties An expandable and collapsible list of CSS properties that can be sorted by category or by name. Click Expand Hh452645.6375953d-074c-421a-bbb3-6f5055b67b64(en-us,VS.85).png and CollapseCollapse to toggle between       views.

Hh452645.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.85).png    Applied Rules Displays the sources of all the CSS rules that apply to the selected element, including inline, in-document, and external style sheets. The winning rule displays the CSS rule with the highest order of precedence.

Hh452645.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.85).png    View set properties only Check this box to display only those CSS properties that are configured for the selected element.

Hh452667.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.85).png    Category properties When CSS properties are arranged by category, displays all of the properties that belong to the expanded category.

Hh452645.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,VS.85).png    Color editor Select a color from the color picker, by adjusting individual RGBA values, or by specifying hex values, in ARGB order.

Projects Panel

The Projects panel in Microsoft Expression Blend 5 for Windows Developer Preview helps you perform the following tasks:

  • View all files associated with the currently open project.
  • Open your project files for editing.
  • Manage your project files.

The Projects panel as it appears when you view a Metro style app project in Expression Blend 5 for Windows Developer Preview

Vs 2011

Hh452645.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.85).png   Search box Type text in the Search box to filter the list of project files.

Hh452645.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.85).png   Solution Contains the Metro style app project and its assets.

Hh452667.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.85).png   References Includes project references such as CSS and JavaScript files.

Hh452645.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,VS.85).png   default.html The code-behind file for the main document.

Hh452667.a5d608f2-bba2-48c5-8b15-2c115db86acc(en-us,VS.85).png   package.appxmanifest A file that lists your app and its assets and that defines the starting page of your app.

Platform Panel

The Platform panel in Microsoft Expression Blend 5 for Windows Developer Preview lets you select displays, views, and display options.

VS 2011

Hh452645.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.85).png   Views Select the display view for your app, either portrait, landscape, filled or snapped.

Hh452645.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.85).png   Display Select the display resolution of the device for which you’re designing your app.

Hh452667.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.85).png   Show Chrome Uncheck this box to turn off the simulated tablet frame around your app in the Design view.

Hh452645.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,VS.85).png   Override scaling Check this box to emulate the built-in display scaling of the device.

Hh452667.a5d608f2-bba2-48c5-8b15-2c115db86acc(en-us,VS.85).png   Deploy Target Select the device where your app will be deployed when it builds.

Styles panel

The Styles panel lists all the style sheets attached to the current document and all of the styles defined in them.

You can open the Styles panel by clicking Styles on the Window menu.

The Styles panel when a project is open
VS 2011
Hh452645.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.85).png   Search box Use the Search box to filter the list of assets.
Hh452645.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.85).png   Style sheets Displays all style sheets (CSS) attached to the current document.
Hh452667.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.85).png   Styles Displays styles defined within the style sheets.

Attributes panel

The Attributes panel lists attributes for the selected element.

You can open the Attributes panel by clicking Attributes on the Window menu.

The Attributes panel while you are working on an application

VS 2011

Hh452645.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.85).png   ID Displays the type and ID of the selected element.

Hh452645.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.85).png   Search box Use the Search box to filter the list of attributes.

Hh452667.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.85).png  Attributes Click an attribute to edit it. If an attribute has default values, they are displayed in a drop-down menu.

I have done with this series and  waiting for your reply.

Vaibhav Tayal

Vaibhav Tayal
A Computer Science Engineering graduate working with a leading IT Company. He is Microsoft Certified Professional and also earned some IBM certifications. He likes to spend time in software and website development, blogging, surfing for updates of mobile technology. Has passion for various Microsoft, open source and Database technologies.