Saturday, September 18, 2010

Windows Phone 7 Developer Tools RTM Problem

I couldn’t get Windows Phone 7 Tools RTM to work, whenever i try to deploy the application i receive the following error

“Connection failed because of invalid command-line arguments.”

this long thread which comes on the top of the search results has the solution buried among all the replies

http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/fde4c415-44c5-4837-b1cd-e09727a75b92/

the problem was that the Virtual Machine Manager (VMM) service used by the Windows Phone Emulator was not running. you can query the status of the VMM service from command window by typing the command “sc query vmm”, if the service is stopped, start it by the following command (run the command window as administrator) “sc start vmm”.

Thanks god :), this version of the emulator is faster than the previous ones.

Here is a screenshot of a default Windows Phone Panorama Application

1

Wednesday, September 08, 2010

Silverlight 4.0 Tutorial (8 of N): Fluid Layouts

Read Previous Posts: Part1, Part2, Part3, Part4, Part5, Part6, Part7

In our last post we implemented visual states for our application, you may have noticed in the States tab in Blend the Default Transition section

Default Transition

the default transition is applied when moving from any state to any other state.

- You can create transitions between any pair of states, for each transition you specify how long it will take (transition duration) and the easing function to be used.

State Transitions

the easing function makes the animations look real, so instead of the linear interpolations of the values that change between states you can choose the appropriate easing function to interpolate the values, there are many easing functions in Blend (quadratics, cubic, bounce, elastic, etc.) and you can even code your own easing function.

Easing Functions

- You can see a preview of the state transitions by turning on the transition preview (click on the icon highlighted in the below image)

Transition Preview

by turning on the transition preview whenever you change the selected state in the states tab the corresponding transition will be played.

- We can employ these transitions in our application, but the problem is that the properties we change in the different states (Visibility, RowSpan) are discrete properties that cannot be smoothly interpolated. the solution Microsoft offers for this is Fluid Layout, what is Fluid Layout? according to The Expression team blog ” an engine that would take a layout snapshot before the state change, take another layout snapshot after the state change, and create a smooth morph between the start and end positions, employing the duration and EasingFunction of the user’s choosing.”

Fluid Layout

You can turn on the Fluid Layout by clicking the icon highlighted in the image above.

- Let’s use this new feature in our application, we will turn the fluid layout on, and change the default transition to use BackInOut easing function with duration one second

BackInOut Easing Function

- If you turn the transition preview on, you can see the transition effect immediately while you change the selected state in the States tab.

- Run the application to see the transition in action.

8

See you in the next post.

Download the source code from here.

Sunday, September 05, 2010

Upcoming Microsoft Middle East Events

Microsoft Open Door Event:

- Riyadh: November 2-3

- Jeddah: November 7

(more information here)

TechEd Middle East 2011: Dubai March 8 – 10 (more info here)

Saturday, September 04, 2010

Silverlight 4.0 Tutorial (7 of N): Visual States

Read Previous Posts: Part1, Part2, Part3, Part4, Part5, Part6

Continuing our registration booth application, i did some changes to the application UI, here’s how the application look like right now

Final Application UI

- As you can see i removed the navigation features in the application, we will keep it as a one simple xaml page, i also changed some colors (excuse my poor color picking skills).

- After looking at the UI i think that the agenda is not taking enough space, the lower DataForm is taking more space while this DataForm is needed only when someone wants to register, the focus of the default UI should be the agenda and the registered attendees, so we need to make the DataForm invisible and show it on demand, this is pretty easy to do, first i will add a button to view/hide the DataForm.

- I will add a new column to the LayoutRoot grid and put the button inside this column, i will also add a simple rotate transform for this button

Rotate Transform

- The button should look like this

15

- First we need to hide the lower DataForm and expand the agenda to span two rows, then in the button event handler we need to show the DataForm and change the agenda back to span one row only. we can write the code immediately in the button click event handler or we can make use of Visual States (more details on States here), apparently our form has two states the first state (the default one) is when we are showing the attendees list and the event agenda; the second state is when we are showing the attendees list, event agenda and the DataForm.

- In Blend you can easily create these two states, in one of the tool windows in Blend (the one that has the projects tab) you will find a tab called States

Visual States

- The states tab is empty because we don’t have states yet, to add state you can click the small icon (surrounded by red rectangle in the image above) the tooltip on the icon says “Add state group”, a state groups is just a way to group states together. so we will click this icon to add a new state group

New VisualStateGroup

- As you can see in the image above, the new state group is called VisualStateGroup you can change the name if you want to; We will add two states in this group (by clicking on the icon surrounded by red rectangle), we will name them Default and Register.

Two States

- Starting with the Default state, in this state the DataForm should be hidden and the agenda should span two rows, to do this all you need is to select the Default state and do the necessary changes in the UI, whatever you change in the UI is saved in this state, as you can see at the top of the designer window a message saying that state recording is on

state recording is on

- So select the Default state and change the Visibility of the stack panel that contains the DataForm and the colored rectangle (rectAttendeeDataFormContainer) to collapsed, and for the agenda items control change its RowSpan property to 2

- Select the Register state and change the Visibility of the stack panel that contains the DataForm and the colored rectangle (rectAttendeeDataFormContainer) to visible, and for the agenda items control change its RowSpan property to 1, for the register button change its visibility to collapsed.

- Now we need to start the application in the Default state, to do this add the following line of code in the constructor of the page

  1. public Home()
  2.         {
  3.             InitializeComponent();
  4.             VisualStateManager.GoToState(this, "Default", false);
  5.         }

We use the VisualStateManager (the component responsible for managing the different states) to go to the Default state

- On clicking the button we will go to the Register state, we can do this by calling the VisualStateManger.GoToState method in the button event handler; another way of doing this if you do not want to write code is to use Blend behaviors, under the Assets tab select Behaviors, you will find a behavior called GoToStateAction

Behaviors

- Drag and drop this behavior on the button, go to the properties of the behavior you will see that this behavior action will be triggered by the button click event; you have to choose the Register state from the dropdown list

GoToStateAction behavior properties

- Run the application, initially the DataForm is hidden because we are in the Default state, click on the Register button to go to the Register state, the DataForm will be shown

- After the user registers a new attendee we should go back to the default state, we can do this by using the GoToStateAction behavior we used earlier, drag and drop this behavior over the DataForm, change the properties of the behavior by setting the EventName to EditEnded and the StateName to Default

image

- Try the application again, click the Register button, the application will go the Register state. enter the necessary information and click Ok, the application will go back to the Default state.

That’s it for this post, we will continue in the next one.

Download the source code from here