Please don’t forget that we also offer content through the official Expression Community site!

Best,
The Expression IQ Team

1. Animation behaviors
2. Data behaviors
3. Navigation behaviors
4. Triggers
5. Visual state behaviors
6. Conditional behaviors.

A lot of these built-in behaviors do not require any additional work to function and are very simple to use. Some however, require additional work like creating and modifying conditions in the Properties panel, and this can be a requirement in cases where you’re using conditional behaviors to link an action to an event when a comparison evaluates to true.

Behaviors are located in the Assets panel under the Behaviors category. For instance the following behaviors are exposed in a Windows Phone project:

Let’s create a simple demo app that uses one of the built-in behaviors.

• Start Expression Blend (Start –>All Programs–>Microsoft Expression–>Microsoft Expression Blend 4).
• Create a new project (File–>New Project, or from the Welcome screen, click New Project).
• On the New Project dialog box under Project Types, click to select WPF as the project type then select WPF Application.
• Under Name, give the project a name, for instance “MoveAround”
• Next choose a Location or go with the default, also select C# as the development language.
• Click OK to create the project.
• From the Tools panel, double click the Rectangle control to insert it onto the artboard.
• From the Tools panel, double click the TextBlock control to insert it onto the artboard.

                Note: You can style the two elements whichever way you like!

• On the Assets panel, click Behaviors, then click and drag the MouseDragElementBehavior to the rectangle control you just added above. Repeat the same step for the TextBlock control.

Note: You can drag and drop the MouseDragElementBehavior on the two controls either directly on the artboard or by using the Object and Timeline panel.

Note: It’s important to point out that the MouseDragElementBehavior doesn’t work for controls that handle MouseClick events (for example: Button, Textbox, and ListBox controls etc.); however, you can still add this functionality by making that control a child of a control that can be dragged.

• On the Project menu, click Build Project.

 Note: You can also use keyboard shortcut Ctrl+Shift+B to build the project.

• On the Project menu, click Run Project or use keyboard shortcuts: F5, Ctrl+F5.
• On your running app, click and drag the elements around.

Conclusion

As you can see with just a few steps and without writing any code you’re able to drag elements in your app!  That’s it for now, and I hope someone will find this short tutorial helpful!

You can download the sample files for the Fuel Tracker application to use as you follow along with the procedures in this series.

This series is based on “Developing a Windows Phone Application from Start to Finish,” a tutorial for creating a Windows Phone app using Visual Studio 2010 Express for Windows Phone.

Where appropriate, links to related resources from the Windows Phone Design Guide will be available to give you more information about certification requirements, design tips, and best practice guideline.

Defining your application

You have an idea for a Windows Phone app? Great! Now, where to begin?

While it may be a cliché, the best place to start is at the beginning.

Think about your app idea, and what you want people to be able to accomplish using your app. Think about the tasks that your user will need to be able complete in order to successfully use your app.

Brainstorming is a great way to get started. Lists, sticky notes, sketches on paper or on a whiteboard, are all great ways to begin. After you have created the list, you can start prioritizing and grouping the tasks so you have a better idea of what is essential to your app, and which tasks are related to one another.

After you have a solid idea of the types of tasks you’ll need to include and how they might relate to one another, you can start to outline some simple navigation that describes how a user might move from one task to the next.

After you have a good idea of how you think users might be able to navigate your app, you can design the visual details of the app so your app is as nice to look at as it is to use.

The following sections will describe the process of defining the idea for a fuel tracking application.

Making the list

When thinking about an app that tracks fuel consumption and mileage, there are a variety of tasks that you might want to include. For example:

• Enter fill-up information
• Calculate miles per gallon (MPG)
• Include support for multiple vehicles
• Track gas station locations
• Track price per gallon (PPG)
• Support both imperial and metric units of measure
• Enter detailed car information (make, model, year, etc.)
• Map of nearby gas stations
• View fill-up history

While there may be additional tasks that may come to mind, this list accounts for most of the tasks the average user will want to be able to accomplish with a fuel tracking app.

Prioritizing the list

While the list of tasks may be a useful place to begin, it is worth revisiting the list and determining what the priorities are for the app that you want to create. You may not want to eliminate any of the tasks. However, you may want to consider which tasks are the highest priority tasks, and use those tasks as the foundation of the first version of your app. Additional tasks that are not
essential, but “nice to have” can be given a lower priority and then implemented as enhancements to your existing app at a later date.

For example, if you were to assign values of 1 through 3 (1 being the most important, 3 being the least important) to the tasks in the list, you might find that some of the tasks are absolutely essential, and that other tasks can wait for future versions of your application.

After assigning values to the task list above, you might have a list that looks more like this:

• Priority 1
  • Enter fill-up information
  • Enter car information
  • View fill-up history
  • View MPG report
• Priority 2
  • Enter information for multiple cars
  • Track gas station locations
  • View a map of gas station locations
• Priority 3
  • Switch from imperial to metric
  • View PPG report

Grouping the tasks and defining the pages

Now that you’ve prioritized the tasks, you can consider the details for each task. Those details will help you group the tasks and define the pages that will help complete those tasks.

For example, “enter fill-up information” is a high priority task. What information is included in “fill-up information”? Typically, fill-up information includes the date of the fill up, the odometer reading, the number of gallons purchased, and the price per gallon.

Similarly, think about what information is included in “car information.” You will want to include the make, the model, and the year. In addition, you may want to add the ability to include a photograph of the car.

In addition to the technical aspects cited above, you might have realized that fill-up, fill-up history, and summary are all interrelated pieces of information, and might be appropriately grouped on one page. It is worth noting that is a lot of information for a very small screen, an issue we will return to in the next section.

You might have also noticed that many of the other pages are only needed rarely, and for very specific circumstances. For example, you might only add a photo once, so the photo chooser page really doesn’t need navigation to all of the other pages. Similarly, you might review the car information very rarely, and again you probably don’t need navigation to all of the other pages.

Taking all of this into consideration, a final list of high priority app pages and the associated information might look like this:

• Main   Information about the most recent fill-up, a history of previous
  fill-ups and snapshot summarizing the overall MPG statistics for the car.
• About   More information about the app, including copyright and author(s).
• Fill-up   Input for current fill-up, including date, gallons, price, and
  odometer reading.
• Car details   More information about the car, including make, model, year, and
  photo.
• Photo chooser   A page for selecting the photo that you want to use.

Navigation models and navigation flow

Now that you have more details about the five individual pages and what kind of information each page will contain, it’s time to start thinking about navigation models and how to navigate between the pages. You do this by creating a navigation prototype.

While you might want to think about how the pages might look, you do not need specific visual design information or controls at this point. Your focus is to create a navigation model that is maximizes the ease of use.

The following steps describe one way to create a prototype.

1. Create sketches that represent the pages of your application. You can use
   stick notes, drawings on a white board, pieces of paper, or other quick and easy
   tools. If you have Microsoft Expression Blend + SketchFlow, you can use
   SketchFlow to create the sketches.
   Note: Part 2 of this series will show you how to create your prototype using
   SketchFlow.
2. Using your tool of choice, add models of navigation aids, such as hyperlinks,
   buttons or Application Bar buttons, to your sketches. Again, you can draw these
   aids, or use sticky notes to represent the controls.
3. You can begin to test the navigation through your pages by thinking through
   how these aids might facilitate navigation, and what, if any, additional
   navigation aids might be helpful or where information from two pages might be
   made available on one page to minimize clicks.

In beginning the process of designing the navigation flow, you might think that
you want to include links on every page to every other page of your app.
However, when you get to the real-time testing of this navigation model for the
app, you are likely to encounter the following issues:

• When you navigate to a Windows Phone page by clicking a navigation button (as
  opposed to the Back button), a new instance of the page is created, even if you
  have previously visited that page. Although this isn’t an issue for read-only
  pages that only convey information, it is a problem for data-entry pages,
  because if a user navigates away from a page, and then returns to it, any
  partially-entered data will be gone when the user returns.
• When you navigate to a page and then press the Back button, you may expect to
  go to the previous page. However, clicking the Back button from the main page of
  the app should, by design, close the application. This may become awkward if the
  user can navigate directly to the main page from any other page, including the
  photo chooser.
  Tip: Information regarding Back button certification requirements for Windows
  Phone app is available in Section 5.2 in the Technical Certification
  Requirements.

To address these issues, the fuel tracker was modified to use a navigation model where only the first page contains buttons allowing navigation to other pages,
and other pages allow navigation only back to the first page.

In addition to the navigation challenges described above, there is also the problem of how to easily convey a great deal of information on the main page despite having such a small space in which to present the information.

You can use a Pivot or Panorama control for the main page, which provides easily accessible space for additional information without having to create separate pages. You navigate a Pivot control by using tabs. To navigate through a page built using a Panorama control, all you have to do is swipe the screen with your fingertip to access the additional information.

By creating a central hub (the Pivot or Panorama control) that links to additional information, you can create a wheel and spoke style navigation (a central point with navigation “spokes” out from the center). The Windows Phone User Experience Design Guidelines describe this navigation model as a central application hub.

For more information on the central application hub navigation model, see Central Application Hub with Home Page Menu (Panorama or Pivot Control) for Windows Phone on MSDN.

For more information on designing a navigation model, see Introduction to Application Structure and Navigation Models for Windows Phone on MSDN.

In this model, the main page (App hub) and the About page are reused (a single instance of the same page), while the other pages are newly created each time they are visited.

The Fill-up, Car details, and Photo chooser pages are data-entry pages. Because they are not reused, they are treated like modal dialog boxes. Users can either
tap a save button to save any changes and then navigate back to the first page, or they can tap the Back button to discard any changes and navigate back to the
main page.

Data

Now that the navigation model has been chosen, it’s time to think about the data your application will use and how to organize it.

Start by making a list of the data that is essential to your app and logically grouping it. Understanding what data you need will help you determine the controls that you will use in the application and how to pass the data from the UI to the logic portion of your application.

In Displaying Data with Data Binding and Creating Data Classes, you will learn more about how to display the data in the UI and create data classes for your application.

The following list includes some of the data required by the fuel tracker application.

• Car
  • Name
  • Photo
  • Initial odometer reading
  • Fill-up history
• Fill-up
  • Date
  • Odometer reading
  • Quantity of fuel
  • Price of the fuel

Conclusion

Now that you have a plan, you can build a functioning prototype of your plan by using Expression Blend + SketchFlow. Part 2 will show you how to use the Windows Phone templates to create an interactive SketchFlow prototype of the fuel tracker app.

Instead of building a web page from the latest technology and then piling on hacks and workarounds to get it to degrade gracefully, progressive enhancement starts by building a web page that looks good (and is fully functional) in an older browser, and then adding more advanced CSS and JavaScript bits that add value to the browsing experience.

The overall benefit of progressive enhancement is that even the user with the oldest browser has an acceptible experience and the user with a modern browser has a richer experience. An unexpected benefit is that web pages built using progressive enhancement techniques are better SEO (Serach Engine Optimization) scores.

Thinking of it from a dog-training perspective, progressive enhancement eschews negative reinforcement in favor of positive reinforcement. Rather than punishing users who don’t upgrade their browsers, reward users who do.

How does it work?

Depending on which design sites you frequent, you may have encountered any number of creative analogies to describe the progressive enhancement design philosophy: peanut M&M, hamburger, layer cake. While analogies can help us understand complex principles, analogies are always suspect. Besides, progressive enhancement is a simple enough concept that it doesn’t really need an analogy to explain it.

Here’s the basic process to build a web page that complies with progressive enhancement design principles:

• Start with the content

This may not be obvious but for mobile browsers, the way to grab your audience is with the quality of your content. Some authors will balk at this but the overall result is (hopefully) a better web experience for everyone.

• Write clean markup

You already know this part. Start with content that uses well-structured, semantic HTML. In addition to improving SEO for the page, even the most rudimentary phone and tablet browsers can still display your content.

• Add styling

Once the content is complete, it’s time to enhance the presentation, primarily through the addition of CSS styles. Even this process should be broken down into progressive enhancement steps, starting with CSS styles that work in older browsers, then more complex styles that work in modern browsers.

A key part of the HTML spec is that every browser (user agent in W3-speak) is expected to ignore markup it doesn’t understand. For example, a very old (pre-CSS 2) browser might encounter a style rule like the folliwng:

#display-box {
     border: 1px solid #303030;
     border-bottom-style: dashed;
     border-top-color: 7F7F7F;
}

Because the border property is supported in CSS 1, a single-pixel dark gray border is drawn around the element that has the ID display-box but, because the border-bottom-style and border-top-color properties are defined in CSS 2, the top and bottom border are not drawn with different styles.

Admittedly, this is a very simplified example with an obvious workaround but it does illustrate how simple it is to target enhanced styles for sepcific browsers.

• Add behaviors.

Client-side scripting should be the last feature you add to a page. jQuery, JavaScript, or other client-side scripting should enhance the user experience but not be required to view the page.

Conclusion

Remember, the objective of progressive enhancement is to make your content available to a wider range of browsers. Mobile browsing is growing at an impressive rate and old/legacy browsers are still in abundance; your goal should be to provide as many people as possible with a good browsing experience.

Another issue to point out from the beginning is that there are many types of animations, and you can literally use them almost anywhere, including in styles and control templates. Also animations don’t have to be visuals; you can animate objects that are not part of the UI as long as they meet certain criteria. This is where Expression Blend comes into play! Expression Blend makes the process of figuring out the “what use” or “when to use what” simple and easy!

Create a basic animation project

Let’s create a simple basic animation in Expression Blend and then look behind the covers to see what Blend figured out for us!

1. Start Expression Blend (Start –>All Programs–>Microsoft Expression–>Microsoft Expression
   Blend 4).
2. Create a new project (File–>New Project, or from the Welcome screen, click New Project).
3. On the New Project dialog box under Project Types, click select WPF as the project type then click WPF Application.
4. Under Name, give the project a name, for instance “SimpleAnimation”
5. Next choose a Location or go with the default, and also select C# as the development language.
6. Click OK to create the project.
7. Add an ellipse with no Fill.

Tip: use the Properties Inspector to remove the Fill.

8. With the ellipse object still selected convert the ellipse to a Path. Right click the ellipse object, then select Path, and click Convert to Path:

9. Next convert the path you just created to look like a winding road. (On the Tools panel click to select the Direct
Selection tool, then use the Direct Selection tool to adjust points on the path).

Tip: use the User Guide, there are several topics that describe how to use this tool in detail. You can also use a Pen tool instead of a Direct Selection tool to create your winding road.

You should have something like the following or better:):

10. Switch to the Animation workspace and add another ellipse to the project (On the Window menu –>Workspaces–>Animation).

Tip: you can use the keyboard shortcut F6 to switch between Animation and Design workspaces.

11. Using the Object and Timeline panel to rename the path object to “Road”.

12. Add an ellipse that is 50×50 pixels and position it anywhere next to the path object.

Tip: use the Layout section of the Properties panel to set precise values.

13. Add a radial gradient fill to the ellipse; also change the color of the stroke to whatever you like.

Tip: use the Brushes panel in the Properties Inspector. Mine looks like this:

14. Rename the ellipse to “wheel”.

15. Change the stroke size of the path object (“road”) to 10.

Tip: use the Appearance panel in the Properties Inspector.

16. Select both objects (“Road and Wheel”) and convert them to motion path (On the Object
menu–>Path–>onvert to Motion Path). The moment you do this, notice a few important  things that just happened; Timeline recording is immediately turned on, a default Storyboard1 is automatically created for the “wheel” object that we want to animate, and a RenderTransform with a Duration is applied to the “wheel” element:

16. Adjust keyframeplaytime as you like, you can make it slow or faster.

Tip: you can easily adjust a keyframe playhead position by dragging it with your mouse:

17. Save the project (On the File menu–>Save), or use keyboard shortcut Ctrl+S.

18. Build the project (On the Project menu–>Build Project), or use keyboard
shortcut Ctrl+Shift+B.

19. Run the project (On the Project menu–>Run Project,) or use keyboard shortcuts
F5, or Ctrl+F5.

Did you notice that the storyboard automatically starts when you run the project? This is because a Trigger was automatically added when Storyboard1 was created:

20. Stop running the project and switch to the XAML code editor. Take a look at the resources section:

Conclusion

There is a lot of interesting things going on here that we didn’t have to figure out that Expression Blend already figured
out for us! As you can see DoubleAnimationUsingPath  class is being used. This is a From/To/By or Basic Animation type, and typically if you want to animate a property that takes a Double, such as the width property of an element, you use an animation that produces Double values. Path animations enable you to use a geometric path in order to produce animated values.

That’s it for now, I hope someone will find this short tutorial useful!

Create a new Windows Phone project

A Windows Phone project in Expression Blend functions just like other Expression Blend projects.

Expression Blend supports the several Windows Phone project types. For this example, we’ll use the Windows Phone application to create a standard Windows Phone application.

1. 1. On the File menu, click New Project.
2. In the New Project dialog box, under Project types, click Windows Phone.
3. In the list on the right side of the dialog box, select Windows Phone application.
4. In the Name box, type a name for the project. For this example, type miniBrowser.
5. In the Location box, browse to the folder where you want to store the project.
6. In the Language box, choose the language that you want to use. For this example, we’ll use C#.
7. In the Version box, select the Windows Phone version that you want to target.
   Important: Version 7.1 is only available when you install the Windows Phone Developer Tools 7.1. This example also works with Windows Phone version 7.0.
8. Click OK.
   

A new Windows Phone project with the Windows Phone template applied opens on the artboard.

Customize the TitlePanel

The TitlePanel contains the default text at the very top of a Windows Phone page.

• In the Objects and Timeline panel, do the following:

• Expand the TitlePanel.
  
• Select the ApplicationTitle text box. In the Properties panel, on the Common Properties category, locate the Text box, and type MY FIRST APPLICATION.
• Select the PageTitle text box. In the Properties panel, on the Common Properties category, locate the Text box, and type mini browser.
  .

Add a TextBox

The next step is to add a TextBox to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the TextBox control by typing TextBox in the Search box.
2. Double-click the TextBox to add it to the artboard.
   
   Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Modify the TextBox properties

Modify the TextBox by doing the following in the Properties panel:

1. In the Name text box, type TextBox.
   
2. In the Layout category, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Stretch .
   • Set VerticalAlignment to Top .
     
3. In the Common Properties category, do the following:
   • In the Text box, type http://www.xbox.com.
   • In the InputScope drop-down list, select Url. This will limit the text input for the address bar to URL formatted strings.
     

Add a Button

The next step is to add a Button to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the Button control by typing Button in the Search box.
2. Double-click the Button to add it to the artboard.

Modify the Button properties

Modify the Button by doing the following in the Properties panel:

1. In the Name text box, type Button.
   
2. In the Layoutcategory, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Right .
   • Set VerticalAlignment to Top .
     
3. In the Common Properties category, in the Content box, type Go.
   
4. Adjust the TextBox width by using the on-object handle on the right side of the TextBox and dragging it to the right so that it no longer obscures the Button.

Add a WebBrowser

The next step is to add a WebBrowser control to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the WebBrowser control by typing WebBrowser in the Search box.
2. Double-click the WebBrowser control to add it to the artboard.
   

Modify the WebBrowser properties

Modify the WebBrowser by doing the following in the Properties panel:

1. In the Name text box, type WebBrowser.
   
2. In the Layoutcategory, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Stretch .
   • Set VerticalAlignment to Stretch .
     Tip: To reset the Layout properties to their default settings, in the Objects and Timeline panel or on the artboard, click the WebBrowser element. In the Layout category, to the right of the property, click Advanced Options, and then click Reset.
     
3. In the Common Properties category, select IsScriptEnabled.
   
4. Adjust the WebBrowser height by using the on-object handle on the top of the WebBrowser and dragging it to so that it no longer overlaps with TextBox and Button.

Modify the SupportedOrientation properties

• With the PhoneApplicationPage selected in the Objects and Timeline panel, in the SupportedOrientation drop-down list in the Properties panel, select PortraitOrLandscape.
  

Add code

This step will add the code to implement the Go button.

1. With the Button selected in the Objects and Timeline panel, in the Properties panel, click Events .
2. Double-click the Click text box. MainPage.xaml.cs opens.
3. Locate the following text:// TODO: Add event handler implementation here.
4. Replace the text you just located with the following script:string site = TextBox.Text;
   WebBrowser.Navigate(new Uri(site, UriKind.Absolute));

Run the application

You are now ready to run the application by pressing F5. After the project builds, the app will open in the Windows Phone Emulator.

To view the xBox web site in the browser, click Go.

You can switch between Portrait and Landscape views by hovering over the emulator and then clicking one of the Rotate icons.

You can also type a URL directly into the text box to navigate to different web site by pressing Go.

Cropping your video

1. Depending upon what type of video you want to crop, you can either choose it from the Live Sources or the File Sources panel. If you choose from the Live Sources panel, note that you can choose both a live source and Screen Capture as a source. If the Video Device menu is inactive in the Live Sources tab, then click Add Device Source . To add a file source, click Add File Source  in the File Sources tab.
   

   The File and Live Sources panels.

    

2. At the bottom of either of the panels, click Show/Hide Advanced Properties to reveal the Crop section.
   

   The Crop window.

    

3. Select Crop to activate the crop section.
   

   Selecting Crop.

    

4. Notice the Width and Height values. By default, they display the width and height of the source video, or the width and height of the area of the screen that you will capture. If you like, you can change the dimensions of the screen capture area. Below the Video Device menu, click Configure. Then, in the Properties dialog box, type new numbers for the Width and Heightvalues. You can also change other aspects of the screen capture in this dialog box. For more information on the screen capture properties, see the Expression Encoder Help. 

   

   Clicking configure to display the screen capture Properties.

    

5. Do either of the following to change the cropped area:
   • To adjust the resolution, drag the Width and Height values or click the value to select it and type new values. If you want to retain the source aspect ratio of the footage as you crop it, make sure that Maintain aspect ratio is locked. You will need to click the lock icon to lock or unlock the aspect ratio. If you choose to maintain the aspect ratio, then the output video will be stretched to match the new resolution. If you chose not to maintain aspect ratio, then Expression Encoder will letterbox or pillarbox the cropped area, depending upon the dimension that you adjust.
   • To adjust the location of the cropped area, drag the Left and Top values or click the value to select it and type new values.
   

   Changing the crop width.

    

6.  Now, if you haven’t already done it, set the audio device or the output type, as the Preview screen instructs. Selecting an output type determines how you broadcast your project, or if you archive it as a file. If you want to preview your crop, you may want to first choose Broadcast or File Archive. If you choose File Archive, make sure that you note the default directory where the archive will be stored. There is no special provision for previewing your crop, but the following steps will guide you through creating a simple output that you can delete later, and, more importantly, allow you to see your crop settings.

   

   Selecting an Output Type.

    

7. Make sure that, in the Live Sources or File Sources window, that you click Cue on the thumbnail representing your cropped image.
   

   Clicking Cue.

8. Once you set your output type, to preview your crop, click Start.
   

   Clicking Start to begin the preview.

   Note the letterboxing in the cropped area. Also note the green line to the right of the image. This measures your audio input. If you are happy with your crop, then press Stop to end the preview and continue with building your project. You may want to make sure that you delete the file created by the preview, if you chose File Archive as your output method (that’s why I had you note the location where the file will be saved, though it should still be listed in the File Archive section). However, if you want to further refine your crop, then repeat the steps from Step 4 until you are satisfied.

That’s it. From there, you can create your broadcast, knowing now that your images are properly cropped. Consult Expression Encoder Help for more details on creating a Live Broadcast.

Thanks for reading. Happy encoding!

When you install the Windows Phone Developer Tools, the updated Expression Blend User Guide is installed as well.

Updates to the User Guide include bug fixes, enhancements to existing content, and new content that helps you create WPF, Silverlight, and Windows Phone applications.

In this tutorial, our next task is to add these states to our button using the States panel in Expression Blend.

Creating the States

1. Open the previous project you created in part 1
2. Click on the States panel, and it should be empty:

3.        Next click on the Add State Group button to add a new visual state group:

A state group is just a container for various states you want to define. After a State group has been created notice that a Base state is also created:

4.    Rename the VisualStateGroup to whatever you want.

5.    Next click on the Add State button, this automatically turns on the VisualState recording mode:

Note:

While the Storyboard recording mode typically suggests keyframing, the State Storyboard in this case is NOT intended to manually do any animation changes between states.  A state only needs to be represented as a Storyboard so that you can create in-state (or steady-state) animation; not so you can define transitions. A lot of times you really don’t need to do any work to define transitions because they’re auto-generated.

6.     Rename this visual state to “Natural”. This will be our default look for the button.

7.     Add two more visual states for the “MouseOver” and “MouseDown”.

Tip

If you want to remove a state or a state group simply click on the Delete state or Delete state group button .

8.      While in recording mode click on each default state and you will notice that the selected object on the artboard automatically reflects the defined state.

Setting Transitions

Transitions define the animation applied when a State of an object change occurs. Good transitions are used to keep your users focused on a user interface (UI) state change and object manipulations. When properly used, transitions add the illusion of interacting with real-world objects.  You typically want change between states to be gradual rather than quick and sudden.

In our case, we want to add a transition when a user mouse over the default “Natural state”, or when a user mouse over and click the (“Mouse Over”) state.

9.     The Default transition is our entry point for our transitions so let’s customize the Easing function to 200 milliseconds (0.2).

Easing functions provide acceleration, deceleration, bounce, and spring functionality into animation.

End of part II

In part III, we will wire-up everything and see how everything works. We will talk about Behaviors in Expression Blend and how to change States programmatically. I hope this helps someone, until next time, cheers for now!

I have bad news and good news. The bad news first: CSS—even CSS3—can be boring. And CSS selectors are probably one of the best examples of just how boring CSS can be. The good news is that the better you know and understand CSS selectors the easier and more productive your design work will be.

CSS3 Drop Caps

Web sites that follow a magazine layout have long been in the habit of using the :first-line and :first-letter pseudo-classes to add drop-caps and a uniquely styled first line, such as the following:

As you can see, the downside of this technique is that it applies that unique styling to every paragraph, which frankly dilutes the uniqueness of the styling. The easy workaround is to add a unique class to the first paragraph

p.first-para:first-line {
    font-weight: bold;
    font-size: 1.2em;
    font-variant: small-caps;
 }

Of course, that technique has downsides of its own, particularly in that it doesn’t give you any automation benefit. What we want is a CSS rule that will automatically format the first letter and line of each article. Having to add a unique class is no more automatic than wrapping the first letter in span tags.

Fortunately, CSS3 solves that problem.

Using the div>p:first-of-type pseudo-class automatically selects only the first p element in the div.

div>.paramag2:first-of-type {
    font-style: italic;
    color: #4F173C;
 }
 div>.paramag2:first-of-type:first-line {
    font-weight: bold;
    font-size: 1.2em;
    font-variant: small-caps;
 }
 div>.paramag2:first-of-type::first-letter {
    font-size: 2.5em;
    float : left;
    color: #20307F;
 }

From there we can add simple style declarations, plus we can uniquely style the first paragraph in the article.

CSS3 Table Shading

Another common styling task that used to require a lot of hand-coding is a long table of data.

For tables with a lot of columns, the readability options devolved to just a few choices: use border lines to delineate rows; hand-code background colors for alternating rows (or alternating groups of rows); or use JavaScript to apply background colors for alternating rows.

The new CSS3 pseudo-class :nth-child was made for situations such as this.
Adding only the following line to the CSS automatically applies background-color shading to alternate rows:

tr:nth-child (odd) {background-color: #BFEAC0;}

For  a slightly more elaborate view that hearkens back to the good old days of tractor-feed, dot-matrix printers, the following two lines automatically apply background-color shading to alternating groups of two rows:

tr:nth-child (4n-1) {background-color: #BFEAC0;}
tr:nth-child (4n) {background-color: #BFEAC0;}

I will freely admit that most of what I’ve shown here is not at all what you might call fun-filled excitement. But it’s predictable, it’s automatic, and the browser results are not unattractive.

Still to come are gradients, which are cool even without consistent browser support, and media queries, the gateway to an awesome mobile browsing experience.