Blend for Visual Studio Workspace (XAML)

In my previous post, I  introduced you to Blend for Visual Studio and talked about Project templates and Item templates. Now that you are set with your templates its time to understand blend workspace better. This is going to be your playground for designing and creating some stunning animations. This post will concentrate on the workspace that Blend provides when your project is in XAML.

 

Blend Workspace:

Blend-for-Visual-Studio-Workspace

There are two default workspaces in Blend

  • Deign Workspace
  • Animation Workspace
  • You can switch between the two by clicking on Window > Workspaces or by Ctrl+F11. These workspaces are customizable so you can change panel orientation, dock or float , or resize panels as per your need. You can also change the theme of the entire workspace by clicking Tools > Options > Workspace > Theme.

Panels:

 

Tools Panel

Tools panel contains the most handy tools for designing the UI elements. Some tools that are included are Selection, Direct Selection, Pan, Zoom, Eyedropper, Paint Bucket, etc.. You will notice that some of the section in tools panel have a small white triangle on the lower right corner. This is an indication that if you click and hold you will get additional option of related tools.

Assets Panel

Assets panel lists all the controls, styles, shapes, media, categories, and locations. Controls in assets also include Windows 8 specific controls like AppBar, GridView, FlipView etc. The search box in the assets panel is a handy feature. Alternatively you can access the Assets panel from the tools panel(the last button), it will contain your recently accessed assets.

Artboard:

Artboard is your work surface where you visually design a page of your application. On the top right corner you will find the view buttons. Use these to switch between Design, Code,  and split views. On the bottom left corner you will find Artboard controls like Zoom, Show snap grid, Snap to gridlines and Turn off snapping to snaplines. Learn more about snapping here.

Objects and Timeline Panel:

Objects and Timeline panel helps you in viewing the hierarchical structure of objects in the artboard. You can modify them directly by dragging them from one position and dropping them to the desired position to form the intended structure. You can add animation to your application by simply creating a new Storyboard by clicking the + button. Storyboards are containers that hold animation timelines. Learn more about adding animations here.

Properties Panel:

If you are a Visual Studio developer then Properties panel is not a new thing to you! It is the place where you view and modify properties of an object that is selected on the artboard.

Few other panels, you should know about:

  • Projects Panel – Lists all the information about your project. Similar to Visual Studio Solutions Explorer
  • Resources Panel – Lists all the resources that are used in the current project. You can drag the resource to the artboard to apply them to an object
  • Results Panel – Results panel consists of two tabs. Error Tab – Displays build and parse errors. Output Tab – Provides build information when you build, rebuild, clean or test a project.

Summary

 

Windows 8 has been reimagined from chipset to the user experience and hence it demands every store app developers to follow strict UI design principles. Blend is a great tool to start with. It helps you design stunning apps and also eases out in wiring up animations. So go ahead sweat the details and create a fast & fluid app.

-Nish-

@nishanil on twitter

Windows 8 Developers – Do you “Blend for Visual Studio”?

Blend-for-Visual-StudioNewest release of Blend now supports UX authoring for Windows 8 store apps both in XAML and HTML. The good news is that if you are a Windows 8 store apps developer then you can make use of Blend for Visual Studio 2012 which is included as part of the Visual Studio 2012 installation. More to it – you get this cake even if you download the Visual Studio Express 2012 for Windows 8 which is of-course free!

Windows 8 store apps much like Windows phone compels a developer to follow the Metro Design Principles. “Metro” as it was formally known as; “Windows 8-style UI” from now on!. With the UX guidelines in place for Windows 8 app development, it is also important to have an UX authoring tool like Blend to be part of the developer’s machine along with Visual Studio.

Blend clearly is a tool for building awesome User Interface Design. Blend lets designers focus on design while letting developers focus on logic of the UI. Blend until the last release was specifically targeted for designing front-end XAML based interfaces for WPF and Silverlight. But “Blend for Visual Studio” has clear targets – Designing Windows 8 Store Apps in XAML/HTML. It adds support to some awesome Win 8 features like App Bars, Grid view and View States. It also supports native C++ app development.

Beyond providing simple XAML/HTML designers and editing support, Blend gives you tools that help you configure UI elements, author complex animation sequences(XAML),  create user controls from vector graphics(XAML), customize visual states(XAML) etc. In HTML it provides some cool way of editing Style Rules, CSS Properties, HTML attributes and Live DOM.

Getting Started with Blend:

Start a New Project and choose your design language first. If you are a web developer and starting a hands-on with Windows development then you can choose HTML and Javascript as your language. Like me if you are a XAML developer, then prefer XAML, you will feel at home.

Project Templates:

 

Blend-for-Visial-Studio-New-Project-XAML-HTML

 

Blend provides you with templates to speed up your app development just like Visual Studio. Three important project templates available for both HTML and XAML are:

  • Blank App – As the name – just a blank project. I almost always use this template and then add Item templates based on my project needs.
  • Grid App – A project that displays groups of data in a grid format. If you are creating an app that displays group of items for e.g. a shopping app or a news app then start with this template. A grid app defaults to a home page that shows a list of groups – basically a set of items. When the user selects a particular group another page opens with group details which will have the list of items of the selected group.
  • Split App – A project that displays a master/detail list. For e.g. News app that contains headlines on top and when clicked displays the full content.
    I almost always use Blank App as my project template and then add Item Templates based on my project need.

For HTML project there are two more templates you can make use of:

  • Fixed Layout App – Fixed Layout provides similar template to Blank App except that its viewport is fixed. If you are building apps that has just one interface for e.g. a simple game in Javascript, then make this choice.
  • Navigation App – Navigation App template contains Navigation Model which is recommended for Windows store apps. This template provides a home page by default. You can add more pages to it and make use of the navigation model to navigate between them.
    Item Templates:
    Blend-for-Visual-Studio-Item-Template
    Item templates can be added anytime by clicking Project > Add New Item. Depending on your project type you will presented with items that corresponds to pages in your app.  

You can read more about Project templates and Item templates here.

Now that you have made your project choice, it is time to understand the Blend workspace. In my next blog post I will cover them.

-Nish-

Windows 8 on VirtualBox– File Sharing(Guest Additions doesn’t work)

Guest Additions on Virtual Box can be installed by changing compatibility to Windows 7 but that doesn’t mean it can be made to work. Yeah that’s where I too got stuck and my hunt for a fix to it also stopped when I read this forum.

I found few others who have tried complicated file sharing techniques, for e.g. they  created a secondary virtual hard drive and put files into it. However being working on Windows for more than a decade, I do believe there should be a simple way to achieve it. After all they are two different windows machines on the network.

Well what would you do to access a share drive on another system? Start->Run-> and type “\\machine-name\share” and hit enter?  That wouldn’t work because your host machine name will not be recognized by your virtual machine since they are on a different network group.

Now here is the solution: Go ahead and figure out the IP address of your host machine(ipconfig) and try accessing the share by its IP address instead of the machine name. That works!

 

Access

Things are simple, we complicate it most of the time.

 

/* Nish */

Hello Windows 8 world–Installation on a Virtual Machine

2009 was the year I wrote a post on Installing Windows 7 on VMware, and 2 years later with the same excitement here I am saying Hello to Windows 8. This time I am not elaborating on the installation but yes will share some interesting posts already on it.

Few approaches:

Installing Windows 8 Developer Preview in a virtual machine. – I did this, it worked for me!

Step by step instructions to install Windows 8 successfully on VMWare Workstation 8

Installing Windows 8 Developer Preview as bootable VHD” – It yields much better performance, this will be my next shot!

Before I decided to install it on the Virtual Box, I gave an attempt on the Windows Virtual PC which came pre-installed with my OS (if Windows XP Mode is enabled). But then the Win 8 version I wanted to install was a 64 bit developer preview and unfortunately Virtual PC does not support 64bit guest OS. You will get this error “This 64-bit application couldn’t load because your PC doesn’t have a 64-bit processor”.

Installation on a VirtualBox was a different experience for me – BSODs and Graphical driver crash. No you may not face this because unlike me; you would never attempt to run a Virtual PC in parallel with a Virtual Box Smile.

One important thing to do before you install is to check, if your processor supports Virtualization and enable it in your BIOS. If not you will get this error “Failed to start virtual machine (name of machine) VT-x is not available” when you start the VM.

If you are using an Intel Processor, check its specification at ark.intel.com, Intel Virtualization technology(VT-X) should be supported.

image

By default these features are disabled, so enable these from your BIOS settings.

Go ahead and complete your installation:

287664_10150801452540713_520785712_20554375_1592634805_o

I must say this before I conclude this post – “Win 8 without a touch monitor on a VM is just a Win 7 with painful experience!” If you are a developer and you want your machine to respond as per your original hardware then do a clean install or use a VHD!.

Some interesting links:

Windows Developer Preview Guide

Metro Style App Examples

WinRT Capabilities

Note: Please read the disclaimer on my page before you get started.

/*Nish*/

Internet Explorer 8 ViewSouce Viewer

When you hit the “View Source” command in IE, it opens in a refreshing viewer. I mentioned viewer because you are not allowed to edit :).  Previous version used the notepad as an editor. If you still want to use the notepad as the default editor then press F12 to open developer tools Click File-> Customize Internet Explorer View Source –> select – Notepad. And one more thing to be mentioned – Developer tools Fantastic.

IE8ViewSource

Here is the developer tool screenshot:

image

Check out the Menu Items to know what you can do with this handy tool bundled with IE8.

 

Cheers!

Windows Azure Commercial Pricing Announced

Today Microsoft officially announced the business and partner model for the Windows Azure platform including service level agreements and support programs.

And here is the link.  Also at here.

This part of the blog is really interesting:

“Windows Azure compute hours are charged only for when your application is deployed so while developing and testing your application you may want to remove the compute instances that are not being used to minimize compute hour billing”

Cheers!

Windows 7 on VMWare

I returned back from the tech-ed event with lot many TODOs, and the top most priority being exploring Windows 7. The very first thing to do was to Download Windows 7 RC and decide on the installation. Currently my machine(Toshiba m70 Laptop with Intel Centrino 1.7Ghz, 1.2Gb of Ram, Intel 915 mobile graphics and 60Gb HDD) runs a Windows XP which was pre-installed by the vendor. I never upgraded to Windows Vista, though lot many times I tried convincing myself for. After reading couple of news, articles, blogs on the problems with Vista it was too risky for me to take a call. I decided to stick to XP, as I was very comfortable and a need for an upgrade was never there. But VJ and Vic’s session on Windows 7 was an eye opener for me, and I still cant forget the statement on running Windows 7 on a 700 Mhz cpu. I thought I should really give this a try, and see what worst is kept for me, with the marriage of my old grandpa machine and the beautiful princess Windows 7. 🙂 After a series of permutation and combination in my brain (the math on risk vs beauty) I decided not to try and Install as a parallel boot, rather go with another new concept which is installing it virtually. I downloaded the VMware WorkStation, and installed it on my machine to test drive the princess in a far more secured(from the grandpa) platform. I really doubted whether VM could detect the Windows 7 and to my surprise it detected as Windows Vista. I thought to go with it and see what happens, after all it is the Vista which is underneath.

Here are the few steps which may be helpful to you guys if you want to go with VMWare.

Win-7-Installation Click on the File-> New Virtual Machine to get this screen and select Typical. Click Next2 

Select the Iso image(Win 7 image file) and you can see that – “Windows Vista Detected”. Now Click next

 3 4  4_15

Provide the Windows Key which you would have generated before the Windows Download. Also provide the disk space as per your requriement in the following forms. Inthe virtual machine name provide windows 7 or so. Follow the rest of the instructions and click finish.

 

You are done from the VMware side, now it will boot your Windows 7 setups, follow the instructions until complete. And that is it! So finally i had the Windows 7 in my laptop.

A simple note: Aero Expereince was disabled for me, since I did not have the graphic driver with WDDM support, and also VMware had defaulted my graphic driver to a VMware SVGA II. So guys if this feature is a must for you, then have a check on your graphic driver. If not just be happy with the basic display and trust me it is really smooth and fast.

My experience so far is really cool, I think this will be the next long lasting OS from MS after Windows XP.

More insights coming soon 🙂

Cheers!