Author: Abhi

Tutorial : Microsoft Expression Design Basics

December 8, 2011 by Abhi·2 Comments

Hey guys,

I am back with another tutorialand this time it is basics of MicrosoftExpression Design. I know that a lot of you guys would like to use Expression design and may not be able to use it as you might not know the basics. So just give 30 minutes of your your time and go along with the tutorialand you will be up with the basics of MicrosoftExpression Design.
What is Microsoft Expression Design and What it does?

Microsoft Expression Design is a powerful illustration tool that allows you to create both vector and bitmap graphics for use in projects created with the other applications in the Studio suite, including Expression Web and Expression Blend. It is only available for purchase as part of Expression Studio and not as a standalone application.

As a tightly integrated member of the Studio suite, Expression Design allows you to design custom web graphics and export them as GIFs or JPEGs for use in sites created with Expression Web. You can also use Expression Design to create custom user interface controls and export them in the native XAML format for use in interfaces created with Expression Blend.
System Requirements for installing Microsoft Expression Design

Operating System:

Microsoft Windows XP with Service Pack 2 (SP2)

Windows Vista

Minimum System:

Intel Pentium or AMD processor, 1 GHz with MMX or equivalent

512MB of RAM

150 MB available hard disk space

1024 x 768 monitor resolution with 24-bit color

Graphics processor that is DirectX 9–capable

Recommended System:

Intel Pentium or AMD processor, 2 GHz with MMX or equivalent

1 GB of RAM

600 MB available hard disk space

Microsoft DirectX 9.0–capable video card with 256 MB or more of memory—for example, ATI Radeon X300

or NVIDIA GeForce 5600 class equivalent or better.
Installing Expression design

Expression Design can only be purchased as part of the Expression Studio suite, which includes Expression Blend, Expression Web, and Expression Media. When you insert the Expression Studio installer CD, a setup guide automatically displays in your default web browser. You can use this guide to access the individual Expression Studio product installers. Use the following steps to install Expression Design onto your computer.

1. Insert the Microsoft Expression Studio CD into your drive.

: Insert the Microsoft Expression Studio CD into your drive

2. If you are using Windows XP, install .NET Framework 3.0.

3. Click the Expression Design button to access the installer and choose Save File. Navigate to the default download location on your system and double-click the installer icon.

: Click Expression Design Button

4. The Microsoft Expression Design Setup Wizard appears. Click the Next button and follow the steps provided.

: Expression Design Install Wizard

5. When the installation is complete, click Finish to exit the wizard.

Launching Expression Design

1. Click the start button on the taskbar.

2. Point to All Programs

3. Click Microsoft Expression

4. Click Microsoft Expression Design

: LaunchingExpressionDesign

5. In the window that appears, enter your product key and click Continue.

Identifying Expression Design Interface Items

IdentifyingExpressionDesignInterfaceItems

Opening a Document

Anytime you want to create artwork in Expression Design, you must do so within the confines of a document page. However, before you begin creating new documents, it helps to understand how to open pre-existing ones. Expression Design actually ships with some documents that are accessible through the Samples folder, which is installed along with the application. To access the Samples folder, navigate to the drive where you installed Expression Design; open the Program Files/Microsoft Expression/Design folder.

Choose the Open Command

1. Under the File menu, choose Open.

Open File in Expression Design

2. In the Open File dialog box that appears, navigate to the file you’d like to open.

3. Select the filename and click Open. The document automatically appears in the work area of the interface.

Expression Design Filename Open

Note – you can also preview the document in Expression Design by checking the check box located in the lower left corner of the dialog box.

Opening Multiple Documents at Once

With Expression Design, you can also open multiple documents at once. This can be useful when working with multiple web graphics or interface items that are intended for use in much larger Expression Web or Expression Blend projects.

Select Multiple Files

1. Under the File menu, choose Open.

2. In the Open File dialog box that appears, navigate to the folder containing the files you’d like to open.

3. Shift+click to select adjacent filenames, or Ctrl+click to select nonadjacent files.

SelectMultipleFilesExpressionDesign

4. Click Open. The documents automatically appear stacked in the work area of the interface.

5. Each document’s name is displayed in a separate tab in the Flip bar. Click a tab to bring the corresponding document to the front.

FlipBarExpressionDesign

Viewing Active Files

When you have multiple documents open, there are several different ways to control which one is currently being displayed. Expression Design contains a Flip bar at the top of the document window that displays the names of as many open documents as it can fit. By clicking the document name, you can bring it to the front of the stack. All open documents (including those not shown in the Flip bar) can be accessed via the active files list located under the Window menu, or via the Active Files menu to the far right of the Flip bar.

Choose the Document Name from the Window Menu

1. You can view a numbered list of open documents under the Window menu. The current document has a check mark displayed next to its name.

2. Select the name of the document you’d like to view.

ChooseDocumentNameFromWindowsMenu

Click the Document Name in the Flip Bar

1. Each document’s name is displayed in a separate tab in the Flip bar. Click a tab to bring the corresponding document to the front of the stack.

ExpressionDesignDocumentFlipBar

Note – Press Ctrl+Tab to view the next open document displayed in the Flip bar. Press Ctrl+Shift+Tab to view the previous document.

Choose from the Flip Bar Active Files Menu

1. The Flip bar can only display a limited number of document tabs. If you know a document is open but do not see its name listed in the Flip bar, you can access it from the Active Files menu. To access the menu, click the down arrow in the upper right of the document window, on the far right of the Flip bar. The current document has a check mark displayed next to its name.

Choose from the Flip Bar Active Files Menu

2. Select the name of the document you’d like to view.

Select the name of the document

Hovering over a document name in the Flip bar reveals the current file location. When you hover over any document tab in the Flip bar, a tooltip appears to display where the file is currently stored on your system.

Creating a New Document

To create graphics in Expression Design, you must first create a document. Every document contains a frame, also referred to as the “artboard,” which determines the visible output area for your artwork. You can control the size of the document frame by entering specific width and height dimensions in the New Document dialog box. After the document is created, a black outline is displayed to indicate the position of the artboard. All the artwork that you intend to export or print should be placed within this area.

Choose the New Document Command

1. Under the File menu, choose New.

choose New

2. In the New Document dialog box that appears, choose a preset document size from the Presets list, or enter specific width and height values in the fields provided. Choose the preferred measurement units from the list provided. This also determines what units will appear in the document rulers.

3. If necesssary, change the resolution value from the default setting (96 ppi, which is the standard for onscreen display). Web graphics are generally saved at 72 ppi, and print graphics at a minimum of 220 ppi.

4. It is not necessary to name the file when setting it up in the New Document dialog box, but the option is there if you’d like to. You can always name the file later when saving it.

5. Click OK to create the new document.

Presets

Saving a Document

As you work in Expression Design, you should periodically save your documents. Doing so allows you to preserve the work you’ve done and return to it later, even after you’ve closed the file. There’s nothing worse than losing hours of hard work due to a power surge or unexpected system shutdown. Therefore, in addition to saving, you might also want to consider investing in a battery backup for your workstation.

Choose the Save Command

1. Under the File menu, choose Save.

The Save command is only available when updating pre-existing documents—not when saving for the first time, which requires the use of Save As.
You should also use Save As to avoid overwriting an original document that you’ve applied changes to. Doing so creates a copy of the document and allows you to change its name and system location.

Save Command

Choose the Save As Command

1. Under the File menu, choose Save As.

2. Enter a name for the document in the File Name field of the Save As dialog box.

3. Choose a system location and click Save.

Save As Command

Setting Ruler Units

In addition to the artboard, every document also contains a set of rulers: one horizontal (top) and one vertical (left). Expression Design lets you decide which set of measurement units you’d like to display in the rulers. The Units and Grids Options include points, inches, millimeters, centimeters, picas, and pixels. Note that both rulers are always visible (there is no option to hide them), and that they both display the same measurement units.

Changing Document Ruler Unit Options

1. Under the Edit menu, point to Options and choose Units and Grids from the fly-out menu.

Edit menu

2. In the Options dialog box that appears, choose the preferred measurement units from the Document Units list.

3. Click OK to update the document rulers.

DocumentRulers

Setting Ruler Origin

The ruler point of origin, also referred to as the “zero point,” is the location along the edge of the artboard where zero is positioned in the rulers. In Expression Design, you can choose to place the zero point for both rulers in the upper left corner of the artboard or place it in the upper left for the horizontal ruler and in the bottom left for the vertical ruler.

Changing the Ruler Origin Option

1. Under the Edit menu, point to Options and choose Units and Grids.

2. In the Options dialog box that appears, uncheck Ruler Origin Is Always Top Left of Artboard. This changes the ruler origin for the vertical ruler from the upper left to the bottom left.

Ruler Origin

Changing Document Size

Anytime you need to change the overall size and/or resolution value of your artwork (for example, to resize a print graphic for use on the web), you can do so by using the controls available in the Document Size dialog box. Remember that any adjustments made using this method affect everything in the document, including the artboard and all your artwork.

Use the Document Size Dialog Box

1. Under the File menu, choose Document Size.

Document Size.

2. Enter new width and height values in the fields provided. Check Constrain Proportions to resize the document proportionally. If necessary, you can select a different measurement unit from the list provided. Doing so also changes the units that are displayed in the rulers after the dialog box is closed.

3. If necesssary, change the resolution value from its current setting. Web graphics are generally saved at 72 ppi, and print graphics at a minimum of 220 ppi.

4. Click OK to change the document size.

Changing the Artboard Size

If you’d like to resize the artboard without resizing your artwork, you can do so using the controls available in the Artboard Size dialog box. This allows you to extend your canvas and increase the output area or reduce it to crop away portions of your art.

Use the Artboard Size Dialog Box

1. Under the File menu, choose Artboard Size.

2. Enter new width and height values in the fields provided. If necessary, you can select a different measurement unit from the list provided. Doing so also changes the units displayed in the document rulers after the dialog box is closed.

3. Click any of the arrows in the Anchor grid to control which sides of the artboard will be added to or subtracted from. To add or subtract evenly from the center, leave the anchor point at its default setting.

4. Click OK to change the artboard size.

artboard size

Viewing Artwork in Wireframe Mode

By default, Expression Design displays all documents in Preview mode, which reveals all applied attributes, such as fill colors, stroke colors, and effects. However, if you’d like to view the paths that make up the artwork without any attributes applied, you can do so by switching the Display Quality setting to Wireframe mode. This is a great way to take a look at what’s going on “under the hood” of your artwork. Switching to Wireframe mode can also make it easier to locate specific paths that you’d like to select and edit, especially when working with detailed pieces of art.

Change the Display Quality Setting

1. Under the View menu, choose Wireframe from the Display Quality submenu. Expression Design displays the paths that make up the artwork without showing any applied fill and stroke colors or effects.

Display Quality Setting

Tutorial : Creating Silverlight / XNA applications on Windows Phone 7 / Emulator (Basic concept)

November 18, 2011 by Abhi·Comments Off

Lets learn about creating Windows Phone Projects

Visual Studio 2010

Visual Studio is an “Integrated Development Environment” for creating programs

Edit program source
Add and manage program resources
Build, deploy and debug an application
It can be used for multiple platforms and languages and can also be customized by plug-ins for the different target platforms

Windows Phone on Visual Studio

Create the Windows Phone Solution
Edit the program source files
Add and manage program resources
Build and run the solution
Debug the solution on emulator or device
Manage the properties of deployment in marketplace.

Visual Studio Project and Solutions

A .NET Program is made up of assemblies
- An assembly is a library file(.dll) or an executable (.exe) and it contains compiled code and resources (e.g. images and sounds) along with a manifest.
- The .exe file also contains an entry point (Main)
A Visual Studio solution project describes the content of a single assembly
A Visual Studio solution is made up of number of projects and at least one of them has an entry point where a program can start
A Visual Studio Solution is an XML file that contains reference to the project file that make up solution.
Each project contains resources and code which contains single project can be shared amongst multiple solutions also a library assembly can be used in the library.

Templates

New projects and solutions are created from templates installed in Visual Studio
Additional templates can be installed so that the tool can be used to target different platforms
These templates give you the basic structure of the type of program you are trying to make and also add the relevant references and saves you a lot of effort.

Making a Silverlight Application

Silverlight apps are generally line of business apps which are used to do business with and there is a template that helps us create a Windows Phone Silverlight application.
Very easy to create rich user interface.
This creates the initial page for our application and configures Visual Studio to target the Windows Phone platform.
If we want to create additional pages and add resources to the solution we can do this using Visual Studio.

Note – Windows Phone Mango is called 7.5 but the tools and the OS is called 7.1. The reason being the development team started pretty early and named the OS as 7.1 (after 7.0) but when the marketing team decided that they would call the whole package as 7.5

XNA Game Projects

Could be developed in a similar way to a Silverlight app but the starting template needs to be different.
The solution structure will be different though.

The content project contains all the elements of the game, assets, texts,etc

If you have not developed an XNA games before then i would like tell you that
- An XNA game will not be like a silverlight app in which you press a button but in an XNA game the stuff will be repeated 30 times a second.
- Its pain free and very well packaged.
- XNA is great for writing games
- Makes good use of graphics acceleration
- Can be tedious to create UI behaviors

Combining Silverlight & XNA

It is possible for the silverlight form containing XNA content to hold silverlight components and this makes it possible to overlay Silverlight UI elements on top of an XNA display.
This makes it easier to build interfaces to XNA game.
Such a project will contain at least three projects
- SilverXNA – It is the project that actually does the running
- SilverXNALib – The libraries
- SilverXNALibContent – XNA library content which will have assets, etc
- When we make a silverlight and XNA combined program then we will have a page that will take us from the silverlight to XNA. So shown in the image below we will have a single button that will navigate to the game page on clicking.
- Also this button click starts the XNA game engine.

The XNA page as shown below contains version of
Draw and Update methods that are called to run the game within the silverlight
environment.

Multiple Project Solutions

A VS 2010 solution can have
- PC version of XNA game
- XBOX version of a game
- Windows Phone Version of a game
- They can also share code libraries which are also part of solution
- Many projects can share the output from a single project.

Running Applications on Windows Phone Platform

Windows Phone Device Basics

To connect from a Windows PC to Windows Phone Device we need the Zune software. this could also

Synchronize Media
Perform Phone Updates
The download is available at http://zune.net
Before we deploy our application on Windows Phone we need to register it as a developer device. This registration is a one time process and the registered developers can register up to 3 devices (but registered students can register only one device).
Now you need to connect the phone to your PC and from the drop down as shown below we can select the Windows Phone 7 Device

The debugging method and development environment is the same for both the WP devices and Emulator.
The problems that you might face while deployment might be

If the phone is displaying lock screen deployment will fail.
Applications that use media will not work correctly if they are deployed when the Zune software is running. To solve this problem we can use “Windows Phone Desktop Pass- Through” program to connect instead of Zune. It is available with SDK.
Once the application is deployed it will be stored on the device for later use but remember at a time you can have only 10 of your own applications on the phone at any time. You can anyways send the compiled version of your application to other registered developers for them to use on their developer devices.

Emulator Basics

Emulator is available with Windows Phone SDK.
It runs as a program on the windows PC.
It has the same software as Windows Phone device but is targeted to run on Windows PC platform.
The Emulator
- Has a browser
- Will provide phone behaviors for things like placing calls and sending SMS. Also it has some entries in phonebook
- Contains emulation of windows phone camera, GPS and motion sensors
- Has the ability to capture screenshots of programs running on the phone.
- If you are developing a game then it is recommended to run it on the phone as the performance is something which is not properly tested on emulator as it running in Windows environment.
- You can use a PC mouse to touch on the screen.
- If you have a multitouch monitor then that touch can be passed to the emulator as well.
- If you want to use the PC keyboard for typing then you should use the Pause/Break key to toggle the emulator keyboard. When the Emulator keyboard is not there it will take the input from PC keyboard.
- The windows Phone Emulator
  - Does not support Zune media playback.
  - Uses only only the built in browser application.
  - Should be used for functional testing only.
  - When you hover over the emulator with a PC mouse you will see an extra set of tools.
    - These allow you to rotate the emulator into different orientations
    - There are two landscape positions but only one portrait position.

The camera can also be emulated but it can take a simple photograph and return it.
Location Emulation also works now with Mango version. The location tab is shown below and you can click the location move the emulator to that position and also place pushpins to describe a route and then replay the route as well.

Windows Phones contains an accelerometer and compass that can be emulated as well for determining the position.

Also you can take screenshots in Windows Phone and the same can be emulated as well

Program Debugging

We can add breakpoints
We can use Single Stepping
We can use the Immediate Window

Your feedback and comments are welcome.

Windows Phone 7 / Mango Background Task

November 12, 2011 by Abhi·Comments Off

So the topics we are going to cover in this post are:

Windows Phone Task Management
Multi-Tasking with Background Agents
Creating tasks in Visual Studio
File Transfer Tasks
Background Notifications
Background Music Playback Tasks

Prerequisites

Must have .Net and Silverlight development experience
Must have developed a windows phone apps.

Lets start

Windows Phone Task management

Forground Tasks

Normally a windows phone application runs in the foreground and interacts with the screen and user of the phone
There is only one foreground application active at a time though other may be running but are not active. This ensures better battery life for the user.

Background Tasks

A Windows Phone application can have only one background agent which can perform perodic tasks or resource intensive tasks or both.
The Agent can run when the application is not in the foreground.
The background tasks have limitations to what it can do and processor and other phone facilities. The logical reason that microsoft architect give is that if a background tasks goes out of control or does what it is not intended to do somehow it should not affect the battery life of the phone and the user user experience as well.
A background task can be used used to conatc the datbase and get the updates every half an hour or play music from a server online.

Background Agent Health Warning

There can only be limited number of background agents running at a point of time and this controlled by the oprating system.
A background agent will be started only when the operating system can give the agent processor resource.
If the phone goes to power saver mode then the background agents may stop running.
Also at any point of time the user can see the background tasks running and can manage them and choose to disable them.
So dont put any critical logic in background agent as it may not run. Its like icing on cake.

Multitasking with background agent

Agents and Tasks

The Agent is the container that is manged by the operating system and agent is the code that will run.
There are two kinds of tasks

Perodic

Will run every now and then (typicallyevery 30 minutes or so).
Intended to perform a task that runs regulary and complts quickly
Phone will have of limit on how many of them can be running.
Good for location tracking tracking and polling background services.

Resource intensive

Will run when the phone is in a postion to let them. This means it will run when

The phone is connected to mains
The phone is connected to Wi Fi
The phone is not being used (lock screen is displayed)

So if you rellay need this to run you need to made some recomendations to the user so that this resource intensive task runs successfully.
A Resource intensive agent can run upto 10 minutes.
Good for synchronization with host service, unpacking / preparing services, compressing database.

Dual Purpose Agents

An application can run both periodic and resource intensive tasks.
Can be achived though single background agent class.
When the agent start it can determine in which context it is running and behave appropriatly.

Creating tasks in visual studio

Creating an application

Lets Create a captians log application which will be a simple logging application.

Users can type log entries which are timestamped and stored in an isolated storage.
The tracking feature will be added using background agent.
The start tracking button click will fire up the background agent will be track the location of the captain and add it to the log. So the agent will update the position even when the program is not active.

Create a Windows Phone application solution and develop the foreground tasks and applications.
Add a new project to the application solution which is Windows Phone Scheduled task (VS Template). This will contain code will run when the agent is active.

Here is the solution file for the captians log which has got two projects:

Captians Log – The Windows Phone Silverlight Project which is the main application.
LocationTaskAgent – The background agent to perform the tracking.

Solutions may contain differnt projects and when the soltion is build all the assembly file outputs will be combined and sent to the phone.

Before this works we need to refernce the LocationTaskAgent Project in Captains Log

And when we do this the application manifest file adds a little bit of text to hold the description of the background agent and this is how the background agent is bound to the application. Here is the text added to the application manifest file.

So below is the code that will run when the agent wakes up so we need fill this OnInvoke method with our code that the agent will run. At the end to this code we need to call the method notify complete whcih will will notify the runtime system that it is done.

The Captains log datafile is shared between the application and agent and the first thing that the agent will do is load this datafile from the isolated storage.

Now we make use of GPS traking to find out the current loaction. So we make GeoCoordinateWatcher and start it and use it to get the location. Now before you start thinking about the performance hit this does i would like to tell you that there is a special version of this class provided for Background Agents which uses cached location data which is stored every 15 minutes.

And then agent just stores back this location to the application and goes to sleep.

Finally a notification is displayed to the user on which the user can click and go to the main application.

File transfer tasks

It is possible to create a background task to transfer files to and from application’s isolated storage.
The transfer will take place when the application is not running.
An application monitor the state of downloads and display their status
Files can be transferred from http or https hosts (ftp is not suppoerted currently)
The system maintains a queue of active transfers and services each one in turn.
Applications can query the state of active transfers.

Background Transfer Policies

Policies are :

Maximum upload file size is 5Mb
Maximum download file size over cellular (mobile phone) data : 20Mb
Maximum dowload file size over WiFi : 100Mb

These can be modified by settng the value of TransferPreferences on a particular File Transfer.

Background Transfer Namespace

The background transfer namespace is :

All the background transfer services are provided from the BackgroundTransfer namspace
Most instertingly you dont need to create additional projects to manage background transfers.

Create a Background Transfer

The following code creates a request and sets the source for transfer and it also sets the transfer method.

The following code sets the destination of the files transfer which is isolated storage of the application. Also it sets the preferences for the transfer. Now the transfer preferences can have multiple string so that you can set multiple properties.

The following code starts the transfer request by adding it to the list of active transfers. Also catches the exception if any and shows a message if it cannot proceed with the transfer.

The following code monitors the transfer by binding the methods to the events fired by the transfer request.

You can also kill the transfer by using the following code:

Windows phone appplication at any point of time can find out how many active transfers does have and as a rule of thumb you should always check the same whenever your application restarts because your transfers are still running when your application is not active. Below is the code that lets you do the same.

Scheduled Notifications

Windows phone app can create scheduled notifications and they are displayed when the application is running or not.
When the notification is diplayed the phone user has the option to respond to it or not. Also the notification can be liked to an application page.
The notifications can fire once or repeatedly at configurable intervals.
The notifications is maintained by phone operating system, once the application can started then it doen not have to do anything.

Sample Application

Lets make a simple timer application which will have two silverlight pages.
The user will set the time using the slider then preses the start timer button to create a notification.
When the notification will fire the 2^nd page of the application which is egg ready page will be displayed and if the user clicks on the same then user will be taken to the application.
The sceen of the application will look something like this:

The code for the creating the reminder is as below. This code will create the reminder and then adds it as a sceduled service. The value eggTime holds the lenght of the delay and this code also sets the url of the page in application.

And before you add the reminder you need to check if its already present in the memory and if the that is the case it is removed from the memory. The code for doing that is as below:

Audio Playback Agents

It is possible to create a playback that will manage an application playlist and the mechanism is the same as for other background tasks.
The audio can be streamed or stored in application’s isolated storage.

This would also work pretty much like the things shown above in the post so i am not elaborating it.

You are free to ask any questions or leave your comments here…

Earn for every search online : Join Bing Rewards

November 8, 2011 by Abhi·Comments Off

Hey guys,

Here is some exiting news. Microsoft is giving credits to search on there search engine “Bing”.

Just follow the link below and join the bing rewards program and you will earn 1 credit for every 2 searches you do on bing.

http://go.microsoft.com/?linkid=9778718&rrid=565DA31D-6BE9-4965-861E-BA11A14CDCE1

You can see more information on Microsoft website itself.

Bing Rewards

Any questions or feedback will be really appritiated.

Thanks

Abhishek

www.abhishekshukla.com

Install Windows 7 and Windows 8 from USB Drive

November 5, 2011 by Abhi·1 Comment

Do not have a DVD drive in your laptop or netbook, facing problems with DVDs getting scratched.Here is a permanent solution to have a reliable Installation source as USB or Pen drive.Also the installation would be 3X faster. The USB drive should be atleast 4 GB in Size.

We will use the DiskPart utility inbuilt in Windows operating system to prepare the usb drive as a installation source.
Open the Windows command prompt by typing cmd in Run box.
Type diskpart in the command prompt .
Type list disk command to check the status of your drive
Type select disk 1 where the “1” is actually the corresponding number of your USB drive.(It may different on your system, check the size of the disk to confirm it is the USB drive.)
Type clean.
After the USB drive is clean, type create partition primary.
Now make the partition active by typing command active
Then you need to set up the file system as Fat32 by running format fs=fat32 quick
Type assign to give the USB drive a drive letter .
Then copy all the files from the Windows 7 or Windows 8 installation DVD onto the USB drive. If you have Windows 7 or Windows 8 ISO You can actually copy all the contents after extracting the ISO.For extracting you can use Power ISO or other similiar utilities.
Now you can install the Windows 7 using the USB drive(might need to change boot options to boot from USB in your system BIOS settings) .

The installation will be atleast 3X faster than DVD.