Exercise 2: Using Expression Blend to Design the UX of your Windows Phone Application
In the same way that you use Expression Blend to design Rich Internet Applications for the desktop browser, you can also design creative and unique Silverlight-based applications on a Windows Phone. Expression Blend for Windows Phone allows you to create XAML-based interfaces for Windows Phone applications, whose behaviors can then be implemented by developers in Visual Studio.
Task 1 – Creating a Custom Button in Expression Blend
In general, Silverlight controls separate their logic from their visual appearance using templates. A ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of most controls by modifying their default ControlTemplate settings. This allows you to change the appearance of the control without changing its functionality. For example, you can make the buttons in your application round rather than the default square shape, but the button will still raise the Click event.
In this task, you open the Visual Studio project that you created in the previous exercise in Expression Blend and replace the ControlTemplate of the button to alter its look and feel. Because you create a ControlTemplate in XAML, you can change a control's appearance without writing any code.
Changing the look and feel of controls
Task 2 – Adding Visual States to the Custom Control
In this task, you will update the control template to add different visual states that allow the button to show an outline when it is focused, and to shift its position on the page to indicate when it is pressed.
Task 3 – Creating an Animation for the Banner Text
Animations are based on key frames that define the start and end points of a smooth visual transition. To create an animation in Expression Blend, you create a storyboard, and in the storyboard, you set key frames on a timeline to mark property changes. For example, you could set a key frame at the 0-second mark to record the position of a rectangle on the left side of the artboard, and then set a key frame at the 1-second mark to record the position of the same rectangle on the right side of the artboard. The resulting animation would be based on the transformation that occurs on the X and Y properties of the rectangle over one second. When you run an animation storyboard, Expression Blend interpolates the property changes over the designated time period and displays the results in your application. You can animate any property that belongs to an object on the artboard in this manner, even non-visual properties.
In this task, you will create a storyboard in Expression Blend to animate the text in the banner whenever the button is pressed.
Task 4 – Verifying the Application
In this task, you run the application in the Windows Phone Emulator from Expression Blend to see the result of your changes to the user interface.