[Updated 1/5 10:50 GMT-5]

Everything Flows, Nothing Stands Still – Plato
Nothing Endures, But Change – Diogenes

The past few days have seen quite a flurry of design activity, and I’m quite sure some folks who have been following closely have been confused. This note will clarify, and also discuss design decisions made to move the project forward, and why these decisions were made. I have created a new discussion on the CodePlex site and I would invite your comments and feedback there, if that is convenient for  you.

Original Goals:

• Build a HyperVideo player which would provide a better way to play our instructional (How Do I) videos and
• Annotate the process from design to completion in a series of blog posts, as a way to discuss virtually every aspect of Silverlight

OpenSource and CodePlex

We decided to move the project to CodePlex (which took a few  months to get licensed) and open the project up to community involvement.  This is a wonderful thing, and has created unanticipated opportunities.

My perspective on this project, buttressed by management expectations, is to foster as much community contribution as possible, but to take personal responsibility for every line of code in the project, to set coding standards, and so forth.

The project is being built with MEF which makes it composible and extensible. I envision 6 classifications for code created by the community

1. Code accepted into the core project (process has been detailed on the Developer Page.
2. Code accepted into the plug-in extensions within the project
3. Code that needs further work to meet coding standards but we anticipate accepting
4. Modules that have been rejected as inconsistent with the project, but which can be housed outside of the project (even on another CodePlex project)
5. Modules that a person or company develops intending to make them proprietary but to work with the project.

Key to this is that the first two represent code that will be in a release from the project, and the fifth option is open to any organization, commercial or otherwise, so long as they follow the Ms-PL license.

The Contributions and Influence of WL

As you may know, we have a commitment from WL (an e-learning startup) for 100 hours/week of developer time. They already have some code working that they are interested in adapting to this project and contributing to the core. Their stated intention is to contribute all this work into Ms-PL licensed code housed on CodePlex and also to try to build a product or products using the SLHVP as the engine.  That, as I read the Ms-PL is more than appropriate.

Two concerns comes to mind, and this was surfaced by WL itself from day 1:

1. Will they distort the project to meet their own needs in a way that either precludes a more general use or freights the code with only tangentially relevant parts and/or
2. Will they add complexity that we otherwise would not have

After working carefully with them and examining what they need and want, and what will be best for the project, I can unequivocally answer no to #1 and I can give a more nuanced answer to #2.

The short version is that they bring a more complex design, and with it they bring far greater flexibility and mission-appropriate features. Thus, yes, the project will end up more complex with their involvement, but it will not end up with unneeded or irrelevant complexity.  To be specific, all the additional complexity will be in service to features that are appropriate for the project.

Expanding the Scope

This would not work if I were to cling to an initial limited vision of the product, but it works great if we lift our vision a little higher.

I had a boss who said (paraphrasing):  “If the railroad companies had realized they were not in the rail business but the transportation business, we’d all be flying Union Pacific Airways.”

One very important aspect of my role in Microsoft is to provide “educational material” such as videos and mini-tutorials, but an arguably more important job is to explore new ways of conveying this information that greatly enhance customer satisfaction and involvement. That can be done by responding to user-suggestions and concerns (which we try hard to do) and also by exploring relatively radical new ways of conveying this information.

The Silverlight HyperVideo Platform

Over the past couple weeks the project has been re-conceptualized in somewhat broader terms, as evidenced by the new summary statement:

What this means is that the SLHVP now anticipates providing more than just video and web links, but also, over time, animation and possibly interactive elements. To accomplish this, we are working towards the following key aspects of the design; most of which should be in place by the January 20 release

• The application is a shell that loads its components via MEF
• Each component stands alone, is configured from its own xml file
• All configuration information is provided from one or more databases using WCF RIA Services
• Each component publishes its events, and each event provides information for consuming modules in a class derived from EventArgs
• Event management will be mediated by a class associated with the application; we are exploring Prism’s EventAggregator
• Each component consumes those events that are of interest to it

We have identified the following modules for the first release

• The Viewer – responsible for instantiating Frames
  • Frames are a way to display one or more control within the viewer – full design to come soon
• The Derived SMF video player – essentially the SMF player adapted to work within our architecture
  • This will be the primary way to display videos
• Frame will support a “Location Reached” event that can be triggered by (among other things) We will need to handle the following occurrences and others much like them  [updated 1/5 – please see this discussion]
  • An injected marker being reached
  • A marker being reached
  • A position (elapsed time) in the video being reached
  • A location event from within a frame being fired
• The ItemsListView that displays all the items that will be displayed in this session (this could be a single video, a series of videos, etc.)  The ItemListView will be subclassed to allow for various types of lists, including ordered lists and maps.  For V1 we will most likely have just an ordered list (display video a, b, c in that order)
• The PostiionListView – either a stand alone module/viewer or one combined with the ItemsListView that allows seeking to specific locations within an item – this would be used, for example to seek to a specific topic within a video
• The LinksView – some items (notably videos) will have a set of links that will either appear all at once or, more likely, as the topic they relate to is mentioned in the Frame.  These links will, typically, pause the current frame and cause a new frame to be created – e.g., will open a new video or a web page, or animation, etc.

The current (not yet released) code has a single xml file for creating all of these modules, but even if that is what we release on Jan 20, by early February each module will have its own configuration file. The format for these files will be well-established, and we’ve nearly finalized that already. [updated 1/5 – please see this discussion]

As the first set of code comes from WL and our other contributors I will expand upon these descriptions and update our feature and task list accordingly.

Thank you all for your ongoing support and patience as we sort this out. I anticipate a great burst of productivity over the next six weeks or so.  Please be sure to see the newly updated schedule.

This mini-tutorial is part of the Silverlight HyperVideo Project documentation.

Taking Risks

One of the great pleasures, and total terrors of documenting this open-source application is that occasionally I have to offer up some half-baked ideas that risk displaying how little I know about a particular topic, but which are necessary to generate discussion. Caveat: this is such an entry.  I could have put this into the project documentation but I saw an opportunity to widen the audience on a topic that is important to Silverlight Programmers, even if not part of Silverlight itself.

Goal

We want the modules in the Silverlight HVP to be as flexibile as possible. Towards that end we’ve adopted two strategies:

• Using the Managed Extensibility Framework (MEF) to make every module composable and extensible.
• Using XML files to provide Just In Time configuration for each module.

XML Schemas

It will greatly simplify everyone’s work if we have agreed upon schemas, at least for the configuration files we know about:

• slhvpInit.xml – initialize the application
• slhvpTOC.xml – create a table of contents for a video
• slhvpLinks.xml – establish which links will appear while a video runs and what to do when the user clicks on each

As a necessary first step, I’ve sketched out examples of slhvpTOC.xml and slhvpLinks.xml – these are not intended to be complete, but to generate discussion. They are posted here as a way to invite more folks into that discussion.

slhvpTOC.xml (draft example)

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <ConfigFile Name="TOC Configuration File"

   3:             Guid="687DA074-8F94-43a9-AC23-46DF823F8A65"

   4:             xmlns=http://slhvp.com/TOC>

   5:   <ConfigurationMetaData>

   6:     <Version>0.0.1</Version>

   7:     <Purpose Summary="Create a Table of Contents for a video" />

   8:     <![CDATA[

   9:     This configuration file is used to create the table of contents. The topics are listed as links, which cause

  10:   the video to seek forward or backward to the designated topic.

  11:     ]]>

  12:     <Module Name="slHVP Standard TOC Module version 0.1"

  13:             Guid="D3E2AC2B-FD34-40b4-BC42-308F7956C7D9" />

  14:     <CreatedDate Format="AmericanShort" Date="01/01/2001" />

  15:     <Conditions>

  16:       <Condition Name="Advanced"

  17:                  Value="True" />

  18:     </Conditions>

  19:   </ConfigurationMetaData>

  20:

  21:   <ConfigurationData>

  22:   <TOCEntries>

  23:     <TOC>

  24:       <Type> TOC </Type>

  25:       <SeekTo>

  26:         <SeekToTime>00:00:10:000</SeekToTime>

  27:       </SeekTo>

  28:       <Text> Introduction </Text>

  29:     </TOC>

  30:     <TOC>

  31:       <Type> TOC </Type>

  32:       <SeekTo>

  33:         <!-- Seek directly to an injected or existing marker -->

  34:         <SeekToMarker ID="LINQ" />

  35:       </SeekTo>

  36:       <Text> Introduction to LinQ </Text>

  37:     </TOC>

  38:     <TOC>

  39:       <Type> TOC </Type>

  40:       <SeekTo>

  41:         <SeekToTime>00:20:10:010</SeekToTime>

  42:       </SeekTo>

  43:       <Text> MVVM </Text>

  44:       <!-- Designate that this entry in toc is only idsplayed if 

  45:       the Advanced condition has been set to true -->

  46:       <Visibility Condition="Advanced" RequiredValue="True" />

  47:     </TOC>

  48:   </TOCEntries>

  49:   </ConfigurationData>

  50: </ConfigFile>

  51:

The file consists of a header (lines 2-4) and two major sections – the meta-data (lines 5-19) and the listing of the (abridged) Table of Contents entries (lines 22 – 48). Notice that the final TOC entry (lines 38-47) is visible only if the condition “Advanced” is set to true, which it is in the Conditions section int eh meta-data (lines 15-18.

slhvpLinks.xml (draft)

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <ConfigFile Name="Links Configuration File"

   3:             Guid="83ca650e-25ff-414d-adef-7aa790f9d858"

   4:             xmlns="http://slhvp.com/Links">

   5:   <ConfigurationMetaData>

   6:     <Version>0.0.1</Version>

   7:     <Purpose Summary="Link time to hyperlink to action" />

   8:     <![CDATA[

   9:     This configuration file is used to create linkage among an elapsed time in a How Do I video with

  10:     the text of a new link to display at that time and then with the action to take based on the new link being clicked.

  11:     ]]>

  12:     <Module Name="slHVP Standard Link Module version 0.1"

  13:             Guid="FB252D52-A603-4bf4-89C8-AA64E52D0343" />

  14:     <CreatedDate Format="AmericanShort" Date="01/01/2001" />

  15:     <Conditions />

  16:   </ConfigurationMetaData>

  17:

  18:   <ConfigurationData>

  19:   <Links>

  20:     <Link>

  21:       <Type> Hyperlink </Type>

  22:       <Time>

  23:         <!--Time format is hh:mm:ss:msmsms-->

  24:         <StartTime>00:00:00:000</StartTime>

  25:         <!--Undefined end time - visible to end of video-->

  26:         <EndTime>0</EndTime>

  27:       </Time>

  28:       <Text> About this video </Text>

  29:       <Action> WebPage </Action>

  30:       <URL> http://jliberty.com/aboutHyperlink.htm </URL>

  31:     </Link>

  32:     <Link>

  33:       <Type> Hyperlink </Type>

  34:       <Time>

  35:         <StartTime>00:05:11:010</StartTime>

  36:         <!--End time of 0 or missing end time both mean no end time, run to end-->

  37:       </Time>

  38:       <Text> What is Linq </Text>

  39:       <Action> Video </Action>

  40:       <URL> http://silverlight.net/learn/video#103 </URL>

  41:     </Link>

  42:     <Link>

  43:       <Type> Hyperlink </Type>

  44:       <Time>

  45:         <StartTime>00:12:00:110</StartTime>

  46:       </Time>

  47:       <Text> Linq Programming Animation </Text>

  48:       <!-- video pauses and is replaced by animation frame -->

  49:       <Action> Animation </Action>

  50:       <!--Required either a URL or a guid to a frame-->

  51:       <GUID>

  52:         E40D045A-4AC4-4ea9-8501-58F0E0407F61

  53:       </GUID>

  54:     </Link>

  55:   </Links>

  56:   </ConfigurationData>

  57: </ConfigFile>

  58:

You can see that this format is quite similar to the TOC format, and one open question is whether we need an inclusive schema.

In this file, each Link has a type, where some of the possible values are

• HyperLink (link to a URL)
• Animation (link to a frame that supports animation
• Text (link to a frame that displays non-html text)

Purpose of this posting

To reiterate, briefly, I have two goals with this posting:

1. Generate discussion about what needs to be in the configuration files and whether this is a reasonable starting point and
2. Follow through on the implications of my thinking about markers, links, etc.

Note that this topic is also under discussion here which is a great place to continue the discussion.

Design Update 

This was posted on Dec. 29 and updated on Dec. 30. The significant changes are to the Configuration and Marker Events sections

This blog post extends the  previous post in which I discussed the IMarkerEventHandler interface and how it might be implemented.

Readers and Frames

The design calls for one or more Pages each of which may have any number of UI modules. The default case is to have a TableOfContents module, a LinksDisplay module and a Reader module.

A Reader houses Frames where a Frame is a set of controls.  The Reader knows which frame to create and manages the lifetime of Frames.

A given frame has a known set of controls. For example, Frame-Type-1 might house the  HVP-extended version of the Silverlight Media Framework player (as described in this blog post) and Frame-Type-2 might display an html page and have a set of navigation controls.   (More on readers and Frames early in January)

Configuration

We anticipate using XML configuration files (delivered via WCF RIA Services and instantiated by MEF into a collection of business objects that for now I’ll call  HVPLayout. 

Marker Events

The meaning and actions to be taken by a Frame in response to hitting a marker in the video will be managed by the IMarkerEventHandler (MEH) implementing class. as described in the previous post mentioned earlier. 

One approach is to have the Marker Event Handler class  own a collection of HVPMarkerEvent business objects, each representing one association between a marker, its time, its type (link, etc.) and whatever other information the MEH class will need to raise the appropriate event.  A second approach, and one that is gaining a lot of traction, is to bring in the EventAggregator from Prism.

Supporting Legacy Videos

The Silverlight HyperVideo Player will continue to support existing videos that do not have markers nor our config files by having a default layout in which there is a reader that takes up the entire page, and that reader contains a Frame that itself contains nothing but our extension to the SMF player.

Other Technologies

We are actively looking at when using an IoC (Inversion of Control) container such as Ninject would provide services that are not otherwise available. For now, we believe MEF will provide the Container services, configuration and interaction with Unit Test that we need.

The Silverlight HVP Elevator Pitch:

The Silverlight  HyperVideo Player (HVP) will do for Silverlight How Do I Videos what Hypertext did for the Internet: it will provide simple, fast, and easy to use links to additional, supplementary or related information. 

As an example, the user might be watching a video on data binding and the term “Dependency Property” is mentioned and at the same time a link appears. If the user clicks on that link, the video is paused and an explanation of Dependency Properties is provided.

Update 11/20: We have received our MS-PL allowing me to move this project to CodePlex. I will update again with a link once it is in place.   Other updates in-line in red.

Summary of Purpose

While I have covered HyperVideo in numerous blog postings and videos in the past, this project will follow the creation and delivery of a complete application.  spinning out mini-tutorials and videos on an extremely wide range of topics.

The project will be designed, developed and delivered in collaboration with many others, both inside of Microsoft and out. 

Scope and Deliverables

This document will serve as the draft  “spec” for the first phases of development. I have intentionally under-documented the spec because of the immutable law that the likelihood of a spec being followed is inversely proportional to its size and (b) the requirements and design will evolve as the community adds ideas and refinement. 

Contributing to the Spec and to the Project

Contributions, refinements and critiques of this document are not only welcome, they are its lifeblood.  For now, I’ll ask that you respond in the comments, , as things evolve I’ll roll out a better mechanism for tracking all of the feedback.

Contributions to the project will be described by the end of the month; for now, if the comments section is insufficient, please feel free to write to me directly.

Core Functionality

The Silverlight HVP will be a modular, extensible, and robust Rich Internet Application that can deliver HyperVideo on any platform that is supported by Silverlight.  Initial requirements include:

• Present any existing Silverlight How Do I Videos as is.
  • That is, the Silverilght HVP will be backwards compatible with the existing player
  • Any existing video can be enhanced to provide a Table of Contents and/or Hyperlinks either through encoding or marker injection at which point it will be indistinguishable from videos created specifically for the Silverlight HVP
• Display a Table of Contents (TOC) for each video, with affordances for users to move from one topic to the next
  • Current plan is to separate the TOC from the links, presenting the complete Table of Contents when the video begins, but revealing the links as their context arises. 
  • For sufficiently complex Tables of Content we may want to provide the ability to collapse and expand subtopics
• Display a list of topics as they are mentioned in the video, with each topic’s name acting as a HyperVideo Link.
• Full support for Closed Captioning and all standard video controls (e.g.,, stop, pause, skip etc.)
• TOC and Hypervideo Links will be decoupled from the markers in the video so that the links can be modified without changing or re-encoding the video

Potential Features

There are literally dozens of potential additional features, some of which are key to adoption of the player in various settings; others either won’t make it into early versions of the product or will be developed by the community once the open source mechanism is in place.

[Images in this spec are for illustration purposes and are not final visualizations of the application]

Not Just An Application

A primary goal of this project is not only the end product, but the opportunity for discussing Silverlight skills in the context of a real-world application.  Building the Silverlight HyperVideo Player will force consideration of a number of interesting aspects of Silverlight and related technologies.

Some Thoughts on Implementation

There are numerous ways to add markers to video in Silverlight; in the course of developing the Silverlight HVP we will consider two.  The easier approach is to use Expression Encoder to do the initial heavy lifting.  Encoder is designed to record four pieces of information about each marker, the first two of which matter to us.

1. The elapsed time into the video at which the marker appears
2. A “value” that can have an intrinsic meaning or not as you choose (more about this below)

The other two pieces of meta-data in a marker are the thumbnail and keyframe for each marker; these are typically used to create and manage “chapters” in long videos.

Working With Markers

The Media Element (or a control derived from the Media Element) will fire an event each time a marker is encountered. The HyperVideo player will respond to that event by following the link or opening the associated video as indicated in the metadata that relates a given marker to a given action.

During development of the Silverlight HVP we will explore at least two ways of managing the metadata: storing it in a relational database and storing it in an XML file.

As an off-the-cuff example, the MetaData might be stored in an XML file that looks more or less like this:

<VidepPlayerMetaData>
   <VideoInfo>
     <Title="Data Binding" />
     <URL="http://foo.bar.com" />
   </VideoInfo>
   <Markers>
      <Marker Val="DBX09-001" Action="Play" URL="http://silverlight.net/learn/videos/v1027" />
      <Marker Val="DBX09-002" Action="Play" URL="http://silverlight.net/learn/videos/h1375" />
      <Marker Val="DBX09-003" Action="Link" URL="http://en.wikipedia.org/LCA" />
      <Marker Val="DBX09-004"  />
      <Marker Val="DBX09-005" Action="Play" URL="http://silverlight.net/learn/videos/v1288" />
   </Markers>
</VidepPlayerMetaData>

Encoder can create a working player to get us started.

At its heart, the player is a control or a set of controls that can be skinned to change its appearance and can be subclassed to change its behavior. Doing so demonstrates best practices, and significantly simplifies the development effort.

The UI Sketch

Of course, the player created by Encoder is just the starting point it will serve as an essential component within a larger application.  The UI design at this point is only a first approximation, subject to significant change, but the rough sketch is enough for me to get started on development.

“You start coding, I’ll go find out what they want.”

The sketch calls for four windows and a menu.

• The primary player (top center)
• The Table of Contents (top left)
• The Links window (top right)
• The linked-to (target) window (bottom)

Each window will  be resizable, movable, and dockable.

Deliverables and Due Dates:

It is tempting to say that too little is known to create a set of milestones and delivery dates; but projects with no dates have a known finish time: never. 

Been there, done that, still have the scars. 

Far better to stake yourself to a timetable, then be held accountable; if not to hitting the dates, then to explaining  what has changed that justifies a change.

Thus, after many seconds of careful consideration, here is the timeline for the first iteration of this project.

Task	Due
This overview spec completed & published	11/15
Proof of concept deployed  on SilverlightGeek.me	1/1
Delivery of final UI Assets	1/21
First Release	Mix10

My plans of course go well beyond Mix, but this is, I hope,  a good start.  I welcome and urge you to join me in an open technical discussion of any and all of this project.

The fine print:

• Project Turing, and the feedback it engendered, served as a great testing ground for building this kind of application. It was not intended that Turing would be completed, and I’ll suspend it indefinitely.  It is my intent that this project will roll out as an application.
• I believe this project has tremendous potential, and I’m committed to it, but I’ve been on enough great projects that were stopped before seeing the light of day, that I make these commitments knowing that not everything is under my control (the great delusion is I still think anything is under my control)

Turing Page [Novice: 4]  FAQ  Table of Contents

In Novice Page 3 we were about to create a form.  Here is  the form we’ll create:

Layout Is Easiest In Expression Blend

To create this form, I’ll begin by opening Expression Blend 3 and creating a new Silverlight Application,

If you’ve not reconfigured Blend it will open with numerous panels, some tabbed, some open as shown here:

A Quick Tour of Expression Blend

On the far left is the toolbar a small piece of which is shown here. Notice that some of the controls have a tiny white triangle next to them. Clicking on the triangle opens up related tools.

In the second image I’ve clicked on the triangle next to button and opened a panel with controls related to button.

Next to the toolbox are a number of tabbed panels including  Projects, Assets, States and Parts, below which is the Objects and Timeline Panel 

Note that the files in the Blend project are identical to the files in a Visual Studio project and you can and will have these files open in both applications at the same time.

In the center of the screen is the Design Surface otherwise known as the Art board. 

Also note the tiny control in the upper left corner of the Art-board that lets you switch between a grid and a canvas. Also note that surrounding the grid area (white) is a border (blue). You can use the border area to create rows and columns very quickly, as you’ll see in just a moment.

Expression Blend allows you to work in a WYSIWYG environment, but it also produces Xaml that corresponds to everything you do on the design surface. You can switch to split mode to see both the design and the Xaml.

In fact, every visible object in Silverlight is a CLR object that can be created in three ways:

1. In Code (as you’ll see much later in the book)

2. In Xaml (the markup language that we’ll be talking about quite a bit in this chapter)

3. By Drag and Drop into the design surface.

The design surface and the Xaml are two reflections of the exact same information. Dragging a control onto the design surface generates Xaml, and modifying the Xaml will be reflected on the Design surface.

The far upper right has three tabs:  the properties window where you set the properties of any object on the design surface,  Resources and  Data.

Xaml

XAML is the markup language for Silverlight. Think of it as HTML on steroids.

Xaml is an XML markup language (and thus is highly toolable; that is, it works very well with tools like Expression Blend and Visual Studio).

Xaml is highly expressive and can be used to describe not only layout (where to place controls) and standard forms-based controls (buttons, etc.) as well as graphics (ellipses, rectangles, etc.) but can also be used to declare transformations and animations of those objects, and much more.

Creating a Form for Data Input

Our goal is to create a simple form for data input, in which users will enter information about their favorite book.

We’ll build the form using the methodology of successive approximation also known by the technical term Get it working and keep it working. To tackle this, we’ll divide the work into three stages: laying out the controls, wiring up the events, and then, in subsequent chapters, connecting the data to data objects.

Layout Panels

There are quite a number of layout panels available, though the most common are

· Panel – the abstract base class for other, more specialized panels

· Canvas – Used for absolute positioning

· Stack Panel – For stacking objects on top of or next to one another

· Tab Panel – for tabbed layouts

· Docking Panel – for docking objects to the top, bottom or sides of your panel

· Grid – Probably the most frequently used panel. The grid allows you to create rows and columns and fill each “cell” with other controls.

Visual Studio and Expression Blend create a Grid panel for you by default. A grid is very much like an HTML Table, but a bit more powerful.

Creating Rows And Columns

Let’s start in the art board in Expression. To ensure that we have a grid, first hover over the small button at the top left corner. It will tell you if you are in Grid or Canvas mode; you want Grid.

You can now designate where you want your rows and columns. While hovering over the border a yellow line is drawn to show where your row will be created.

If you click, the line turns blue and the row is written to the Xaml.

The small open-lock symbol indicates that the rows are using relative spacing rather than absolute.

Looking At The Xaml Produced

To see the markup produced by drawing these lines, click on the “split” option on the small bar to the right of the art-board

Split mode can be a big help in relating the Xaml to the design.

(click on image to see larger version)

Creating The Rows and Putting In The Prompts

Looking at the image of the form at the top of this entry, you can see that you’ll need 11 rows. Go ahead and click on the left margin about 10 or 11 times, creating somewhat evenly spaced rows. Then move to the border on top, and click to create a pair of columns. 

As you add controls you can adjust the relative heights of each row (or the width of each column) to fit.

Start filling in the cells by adding the prompts for each row. Begin on the second row and reserve the first row for the title.

Adding Prompts

Click on TextBlock in the toolbox

Then drag with the mouse down to create a TextBlock in the left cell of the second row. Don’t worry about size or placement, you’ll fix that in the properties window.

With that in place, click next to it and then turn to the Properties window.  Name the TextBlock FullNamePrompt and set the alignments, margins and font size as shown here:

Once this is set, copy the control in the Objects and Timeline panel and then paste half a dozen copies,

The advantage of making these copies, and then editing each in the properties window is that you preserve the Alignments and Margins, font and font size; you then only have to set the name, text and row for each.

(A better solution is to use a style, which we’ll get to later in this series, and which you can read about now here or see a video about styles here).

Adding the Input Controls

When you’ve set all your prompts on the left side, it is time to add the input controls on the right.  The first five entry rows are TextBoxes,

[Note that entry is done with a TextBox and the prompts are TextBlocks – the two words are very similar but the controls are quite different]

Drag the first TextBox into place, and set its alignment to right and bottom), set the left margin to 5 and the other three to zero, and finally, set its with to 150 and its height to 25.

Next make four copies, and adjust their name and row for the next four data entry fields.

Date Picker

The sixth entry row, DateOfEntry) will get a DatePicker. To create one, click on the Chevron, which opens the advanced controls, and click on DatePicker,

This control has a lot of flexibility in its display; much of which can be set in the properties window,

For now, though, we’ll go with the defaults as shown.

Radio Buttons, Check Boxes and Stack Panels

The input for Level is three Radio Buttons. You can find a complete write up of using Radio Buttons here, but the key things to know are that you want all the Radio Buttons to share the same GroupName (so that they are mutually exclusive), you want one to have IsChecked clicked and, most important, you’ll want to put all the radio buttons into a stack panel. The stack panel will have its alignment set to stretch with no margins and its orientation set to horizontal.

Similarly the versions input is a pair of check boxes, and they too sit in a stack panel.

ListBox and ListBoxItems

Finally, the Tags are chosen from a ListBox (for now). To add the ListBox open the Chevron and drag the ListBox into place, and for now you can hardwire the choices by clicking on the Items collection and adding ListBoxItems.

(Click on the image to see a larger version)

Save everything. Keep Blend open, but also open this same project in Visual Studio

Take a look at the markup  in MainPage.xaml, you should find that the structure and syntax of Xaml is pretty easy to pick up when you compare the Xaml to the WYSIWYG design. 

Pretty Xaml

I find it much easier to read the Xaml if each property is on a line by itself. To accomplish that, open Tools->Options and click on the arrow next to Text Editor. Then open up Xaml and Formatting and click on General to set the rule that formatting should be done when you paste from clipboard or complete a tag and click on Spacing to set the rule that each attribute should be on a line of its own; as shown in the following composite image:

The Xaml that is produced becomes easier to handle, though it takes up a lot more room, as shown in the following small excerpt:

   1: <TextBox x:Name="Topic"

   2:          Height="25"

   3:          HorizontalAlignment="Left"

   4:          Margin="5,0,0,0"

   5:          VerticalAlignment="Bottom"

   6:          Width="150"

   7:          Grid.Column="1"

   8:          Grid.Row="7"

   9:          TextWrapping="Wrap" />

  10: <ListBox x:Name="Tags"

  11:          HorizontalAlignment="Left"

  12:          Margin="8,0,0,0"

  13:          Width="125"

  14:          Grid.Column="1"

  15:          Grid.Row="9"

  16:          BorderThickness="1,5">

  17:     <ListBoxItem  x:Name="Silverlight"

  18:                   VerticalAlignment="Bottom"

  19:                   FontFamily="Georgia"

  20:                   Content="Silverlight" />

  21:     <ListBoxItem x:Name="Expression"

  22:                  Content="Expression" />

  23:     <ListBoxItem x:Name="VisualStudio"

  24:                  Content="Visual Studio"

  25:                  IsSelected="True" />

  26:     <ListBoxItem x:Name="Blogs"

  27:                  Content="Blogs" />

  28: </ListBox>

  29: <StackPanel x:Name="ButtonsStack"

  30:             Margin="0"

  31:             Grid.Column="1"

  32:             Grid.Row="8"

  33:             Orientation="Horizontal">

  34:     <RadioButton x:Name="Level100"

  35:                  Margin="5,0,0,0"

  36:                  VerticalAlignment="Bottom"

  37:                  Content="100"

  38:                  GroupName="Levels"

  39:                  HorizontalAlignment="Left" />

  40:     <RadioButton x:Name="Level300"

  41:                  Height="17"

  42:                  Margin="5,0,0,0"

  43:                  Width="40"

  44:                  Content="300"

  45:                  d:LayoutOverrides="Height"

  46:                  HorizontalAlignment="Left"

  47:                  VerticalAlignment="Bottom"

  48:                  IsChecked="True"

  49:                  GroupName="Levels" />

  50:     <RadioButton x:Name="Level400"

  51:                  Height="17"

  52:                  HorizontalAlignment="Left"

  53:                  Margin="5,0,0,0"

  54:                  VerticalAlignment="Bottom"

  55:                  Width="40"

  56:                  Content="400"

  57:                  d:LayoutOverrides="Height"

  58:                  GroupName="Levels" />

  59: </StackPanel>

Your form is ready to go. Click Control-F5 to test it.

The Silverlight Toolkit is innovative in many ways, not least of which is that controls are released in one of four quality bands:

• Mature: ready for release
• Stable: suitable for most scenarios
• Preview: suitable for most basic usage scenarios, may have moderate number of breaking changes as the control is developed.
• Experimental: intended for evaluation purposes

The control I’ll be considering today was developed (and described here) by Ruurd Boeke and is currently in the Experimental band. You can expect that the API will change quite a bit, but that said, it is an enormously useful control right now; and thus I’ve submitted a video and this write-up.

What’s It For?

The goal of the Transitioning Content control is to make it easy to add animation when you are changing content within a control as demonstrated here. [You’ll need to click on DomainUpDown on the left (and surprisingly, not on TransitioningContent!) and Animations on top. The following cropped image illustrates where to click, but provides only a shadow of the impact

Getting There In 3 Steps

To make this crystal clear, and to show how easy it really is to use this control, we’ll build the example three times: first with a Content Control, then with a Transitioning Content Control, and finally, adding data binding and the ability to transition more complex objects.

Starting Simple

Version 0 begins with a grid with two columns. The left column contains a ContentControl and the right a button. Here is the complete Xaml:

<UserControl x:Class="tccDemo.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="300" Height="150">  <StackPanel Background="Bisque">

    <ContentControl x:Name="cc1"         Content="Click button to change."         HorizontalAlignment="Center"         Margin="20"         FontSize="18" />

    <Button x:Name="doChange"            Content="Change"            Width="80"            Height="30"            HorizontalAlignment="Center"            FontSize="14"/>    </StackPanel></UserControl>

The job of the ContentControl is to hold a single piece of content: in this case a string. The button’s job is to cause that content to change, which we do programmatically in the button’s click event handler in MasterPage.xaml.cs, shown in full:

using System;using System.Windows;using System.Windows.Controls;

namespace tccDemo{  public partial class MainPage : UserControl  {    public MainPage()    {      InitializeComponent();      doChange.Click += new RoutedEventHandler( doChange_Click );    }

    void doChange_Click( object sender, RoutedEventArgs e )    {      Random random = new Random();      cc1.Content = random.NextDouble().ToString();    }  }  // end class}    // end namespace

Each time the button is clicked, a new value is displayed.