On October 1st I was awarded the Microsoft MVP for Silverlight.  I am very honored and excited about this.  The MVP program, taken from Tim Heuer’s post, “ is a recognition program that is in place to recognize and reward those individuals who have been identified by individuals (peers, Microsoft staff, etc.) as experts in their technology field and global contributors to the technology”

The other talented group of guys in this round of Silverlight MVP’s are (for the complete list of Silverlight MVP’s follow this link):

• Jeff Paries
• Ambrose Little
• Robby Ingebretsen
• Rick Barraza
• Bryant Likes 
• Davide Zordan
• Huijun Li

Talking about and working with Silverlight has been a dream come true.  It enables me to pursue my passion of creating experiences and not applications (more to come on that). 

There have been many people who have helped me in the MVP process; namely Glen Gordon, Jesse Liberty, Tim Heuer, John Papa, and Justin Angel.  Thank you, and I look forward to the upcoming year.

The root of the my problem is the lack of support for embedding Silverlight into Windows Live Writer (WLW).  It’s possible, with WordPress, to embed Silverlight through the web interface, but WLW’s features outweigh what the web dashboard can do (namely pasting in screen shots without having to save them to the file system and then upload).

After a little digging tonight, I came across this post by Erno de Weerd.  It details how to embed Silverlight apps into Windows Live Writer.  FWIW, this method uses Tim Heuer’s Silverlight WordPress Plugin.

Without further ado…drum roll…here’s the test:

Finally, completely unSilverlight related, I always reference Grinds his Gears. It’s such a great line, you can complain without complaining.

Out of the box, styling a Tooltip in Blend is a manual process.  The below screenshots/descriptions show how to do this.

1. First, add a Tooltip; do this in the Xaml view to look like the below Xaml.
2. Next, click, in Xaml, on the <ToolTip tag.  This will change the breadcrumb at the top of the Artboard to show [ToolTip].  Click on the breadcrumb and select Edit Template > Edit a Copy.

   

3. After creating the Template, there is a chance your Artboard will look like the below image.  You’ll notice that you’re in the context of editing the ToolTip template without visuals.  If you experience this, go to step 4 to see how you can edit the visuals.

   

4. To edit the ToolTip, click the Resources tab, locate the ToolTip style, right click and select Edit.  The Artboard will show the visuals for the ToolTip.  You can now edit the ToolTip like any other control.

   

Recently I had a need to create a Checked Command for a ToggleButton.  There are many sources on how to create a Command, the best one probably being Erik Mork’s video, but there wasn’t a place to grab the a Command from.  The intention of this post is to share the Checked and UnChecked Prism Commands for you to use it in your project.  (Moving forward, it might make sense to create a repository of these Commands.)

Finally, before diving in, if you just want the code and to see an example, follow these links:

• Code
• Example

Commands

Creating the Commands is straight forward.  Derive from CommandBehaviorBase and specify the type.  Then, in the constructor, register the event.  Below are both the Checked and UnChecked commands.

Extensions for Xaml

After creating the Commands you need to create Static methods to reference in Xaml.  The Static methods are named Checked and UnChecked.  They include a definition for:

• SelectedCommandBehaviorProperty
• CommandProperty
• SetCommand
• GetCommand
• OnSetCommandCallback
• GetOrCreateBehavior

In an effort to be brief I have chosen to truncate the two static methods.  To take a closer look at the code, click on the image or download the code.

Checked.cs

UnChecked.cs
 

Hooking everything up

After the Commands are created, bind them to the ToggleButton in Xaml.  In this sample application there are three main files:

• MainPage.xaml – the presentation. This contains the binding to the Commands.
• MainPage.xaml.cs – the primary function of the code-behind is to new up the MainPageModel and set the DataContext.
• MainPageModel.cs – this is the model for the MainPage. It defines the commands the Xaml binds to as well as a property for the TextBox to bind to.

Below are images of the classes mentioned above:

MainPage.xaml

Note in this Xaml, line 20 binds to the CheckedState property in the MainPageModel.  The commands are bound on line 22 and 23.  Take notice of the namespace command.  Instead of referencing Microsoft.Practices.Composite.Presentation.Commands it references ProjectName.CustomCommands.

MainPage.xaml.cs

This is the code-behind for the above UserControl.  On the Loaded, a new instance of MainPageModel is initialized and then set as the DataContext to the UserControl.  The heavy lifting is done in the MainPageModel.

MainPageModel.cs

As noted above, the MainPageModel does the heavy lifting.  The following describe what happens in this file:

• Two DelegateCommands are defined for Checked and UnChecked. (line 36 and 41)
• A Property called CheckedState is defined and fires the PropertyChanged event when updated. (lines 13 – 22)
• Two methods are defined to handle the actions on the Commands. (lines 47 – 59)

The final product

Code | Example

Now that I’m all done ranting to the converted, let’s talk about Silverlight.  From my past experience there are two ways to handle versioning:

1. Create an abstracted file that contains your version number, or
2. Use the Assembly version.

Both have their pros and cons.  Option 1 gives you greater control of the version number, however the manual process is tedious.  Option 2 enables you to use the Assemblies version, however it provides less control over the version number.  Lately I’ve been going with option 2 because it takes one more step out of my deployment process.

To get the version from the Assembly

Doing this is fairly easy once you have the correct block of code.  The below block of code shows how to get the version from the Assembly in the MainPage_Loaded method.  Do not forget to include the System.Reflection reference.

Given the above block of code, the next question is, where is this assembly version defined?  In short, the AssemblyInfo.cs file, which is located in the Properties folder.

At the bottom of the AssemblyInfo.cs file, you’ll see the version info.  The directions are in the comments on how to change this.  I’ve customized my version to be 0.611.*.

1. Design a LineRider map,
2. Visualize data in Silverlight,
3. or Create a new preloader for Silverlight.

For some time I’ve been wanting a new default preloader for Silverlight.  The loader is the first impression users have of both Silverlight and your application.  Currently the preloader doesn’t have any branding and contains a simple animation and type.  You’ve seen it a thousand times, but in case you haven’t, this is what is the current loader looks like:

So, Tim’s contest was the motivation I needed to put my pen to paper (or pixels to screen) and create a new preloader.  Here are a couple ideas:

• Type – This preloader is solely inspired by a strong use of type.  It is clean, simple, and to the point.  The type being used is Georgia, a web safe typeface,
   
• Branded bar – This preloader focuses on branding.  The bar is very simple, almost too simple.  Out of all three this is my least favorite, however it was the first one created.  Got the juices flowing.
  
• Strong bar – The idea behind this loader is the background color of the loader changes based on the background color of your application.
  [THIS IS A WORK IN PROGRESS.  I want to get something up before the contest is over.]
  

Links

The application with the three preloaders – http://85turns.com/silverlight/Preloader.html

Tim Heuer’s contest page – http://timheuer.com/blog/archive/2009/02/17/write-silverlight-code-and-win-a-pass-to-mix.aspx

There is another user of your source code.  Someone will try to read your code in a few month’s’ time to make some changes.  We easily forget that extra user of the code, yet that user is actually the most important.  Who cares if the computer takes a few more cycles to compile something?  It does matter if it takes a programmer a week to make a change that would have taken only an hour if she had understood your code.

When it comes to XAML, there aren’t too many opinions/articles talking about best practices (compared to other languages/markup).  In fact, the definitive guide for XAML guidelines is Jaime Rodriguez’s (site) best practice web cast series and the resulting whitepaper (pdf).

XAML practices series, part1

XAML practices series, part2

XAML practices series, part3

Jaime’s whitepaper is a must read for anyone in the Silverlight space. 

Since my blog is less formal than a whitepaper, I’m able to give a stronger opinion on what I think are the best practices for XAML.  So, without further ado here are my thoughts on XAML:

Formatting

First and foremost, I think formatting is the number one concern. 

• Attributes should be on a separate line,
• x:Name should come first,
• and related attributes (such as HorizontalAlignment and VerticalAlignment) should be grouped.

Take the below code blocks, Figure-1 and Figure-2, show the difference between having all the attributes on the same line versus on different lines.  In my opinion, Figure-2 is much easier to digest than Figure-1.  By having the x:Name first, you can quickly identify what the element is.  Once you find the object you are looking for, you can then quickly identify related objects since they are grouped together (such as RadiusX and RadiusY, Width and Height, and HorizontalAlignment and VerticalAlignment).

The biggest complaint about Figure-2 is “wasted space”.  The code inflates from 8 lines to 30; however, to Martin Fowler’s point, it’s not about you or the computer, it’s about other people being able to read and quickly assimilate to your code.

Figure-1
 

Figure-2

Naming conventions

Name everything

Try to specify an x:Name attribute for every element in XAML.  If nothing else, this will make you think if you really need the object.  For example, at times it’s tempting to embed a panel within a panel to achieve a specific layout.  In many instances I have caught myself doing this, mainly out of laziness.  After refactoring I find that if I tweaked a margin or used a different kind of panel, there would have been no need for the extra panel.  Forcing an x:Name on an object really makes you think of the purpose of that element.

Describe elements

Instead of pre or post-fixing element names, give them a descriptive name.  Instead of:

• btnSubmit use SubmitButton,
• grdContent use ContentPanel,
• stkPnlNav use NavigationPanel.

Programmers like using the pre-fix because you can quickly see all of the same type when using intellisense, and you can easily identify the type of an element.  Admittedly, I come from this camp; however it’s time to change.  A couple reasons for the change: 1.) designers will increasing be  working in Blend and they are not going to be geeks like most of us and pre-fix with the type 2.)descriptive names are much easier to read and understand the cryptic typed names (think stkPnl=StackPanel or me=MediaElement).

Lastly, give all panels the same post-fix because you never know if you will have to change the type of a panel.  I assure you, it’s an enormous pain, and large risk, to change the x:Name in a project.  For example imagine having to change “BufferGrid” to “BufferCanvas” to “BufferStackPanel”.  Not only do you have to change the XAML, you have to ensure all instances in the code are changed too.  Better to go with the generic “BufferPanel” and be done with it.

Disclaimer

Best practices should be followed to the T; however, there are times when we’re in a crunch and the guidelines fall the way side.  Best practices are designed to eliminate maintenance time and promote consistency.  I am certainly guilty of not following the above guidelines, however it’s my goal to follow these consistently as possible.

Until Silverlight has native mic and webcam support, this will have to do.  Here’s the demo (click the image).

Thanks to my PHP buddy, Robert Swarthout, for telling me about this.

Silverlight’s first VOIP application

This TringMe prototype is not the first time VOIP has been done through a Silverlight interface.  Cynergy used Skype com objects to accomplish this.  Check out Mike Wolf’s post for more deatails; very cool stuff.  (My favorite quote from Mike is: “Just because one platform doesn’t have feature A, you don’t have to drop it entirely.”)

http://www.hsn.tv

Talking with my boy Ryan made me start thinking about trying new things in Silverlight…3D.  Here is an example of images in Z space.  I am working on getting a camera object implemented so you can zoom in and out on the objects.

• Scrubbing the video
• wiring up volume,
• and muting.

In future versions I will show how to display a buffer message, skin the controls, and how to work with media that’s not embedded in the xap.

1. Scrubbing
   • Add a MouseLeftButtonDown and MouseLeftButtonUp events for the slider in the constructor.
     
     
   • Add a property to lock the scrubber while the mouse button is down.
     
   • In the MouseLeftButtonDown event, set the scrubber lock to true.
     
   • In the MouseLeftButtonUp event, release the lock on the scrubber and update the position of the video.
     
   • Finally in the Tick event of the timer, prevent updating the position of the slider while the scrubber is locked.
     
2. Volume
   • XAML. It important to set the Min to 0 and the Max to 1. The MediaElements volume ranges from 0 to 1.
     
   • Register the ValueChanged event in the constructor for the slider.
     
   • Set the video’s volume to the value in the ValueChanged event.
     
   • Set the initial position of the slider to the video’s volume. You can either do this in the CurrentStateChanged event or the MediaOpened event of the MediaElement.
     
3. Mute button
   • XAML, add a ToggleButton
     
   • Register the Checked and UnChecked events in the constuctor for the mute button.
     
     
   • Add a variable to store the previous volume.
     
     
   • Checked event
     
     
   • UnChecked event
     
4. Resulting player
   

Files:
Instead of the whole project (because the video is embedded in the project), here are the two important pieces of this project

XAML

C#

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

1. Create a Silverlight application
2. Add a video to the project. This is for testing purposes only. Later in part 2 we will use a streaming video.
3. Add a MediaElement and a Toggle button for Play/Pause of the video.XAML
   

   C#
   

4. Add a Slider to show the position of the video. To show the progress of the video on the slider, we will need to create a DispatcherTimer. On the Tick event we will update the value of the slider. In this example I have set the value of the Tick to 50 milliseconds. There is minor jumping; if you want to get seamless indicator movment try going under 41 milliseconds. We also need to Start and Stop the timer. I am doing this on CurrentStateChanged event of the MediaElement.XAML
   

   C#
   

5. Add a TextBlock to show the exact position of the video. To update the text, I am adding this to the Tick event of the timer.XAML
   

   C#
   

6. Screen shot of the player at the end of Part 1
   

Links
Source (11Mb because of the WMV)
Part 2 of how to Create a video player in Silverlight 2

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

A couple notes: the presentation is saved as a pptx, so e-mail or leave me a comment if you would like a ppt. As for the code, make sure you change the port the xml file is coming from. This will be in the Page.xaml.cs

Presentation (zip)
Code (zip)

References

Silverlight 1.0 gallery
http://silverlight.net/community/gallerydetail.aspx?cat=3&sort=2

Microsoft Developer reference poster
http://brad_abrams.members.winisp.net/Projects/Mix08SL2Poster/Silverlight2PosterMIX08.png

XAML overview
http://msdn2.microsoft.com/en-us/library/ms752059.aspx

Silverlight 2 controls:
http://silverlight.net/Samples/2b1/SilverlightControls/run/default.html

Scott Guthries first look at Silverlight 2
http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

MSDN Silverlight
http://msdn2.microsoft.com/en-us/library/cc303041.aspx

These application have pushed the limits on how we think and view data.  With Silverlight we have the opputunity join the data visualization revolution.  It’s time to get out of the mindset of writing a stored procedures and hooking them to a datagrids.  Challenge yourself and your users.

Over the next few weeks I will be working on creating a data visualization project in Silverlight, and I will use the Animation Engine I have created as the basis for motion.

Stay tuned.

XAML (see below for this code to copy)

This is a pain to access from C#.  You have to access the TranslateTransform through the Children collection using the index.  What happens if you switch the positions of the Transforms in XAML?  Your code will fail.  Here is the code to access X and Y through C# (again, see below for code to copy).

So my question: Why not add the X, Y, ScaleX, and ScaleY to the UIElement?  This would eliminate the need to go through multiple castings in C#, it would prevent index failures if you change your transforms in XAML, and it would eliminate the misuse of the Canvas.Left and Canvas.Top properties.

Code to copy:

<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform X=”0″ Y=”0″ />
<ScaleTransform ScaleX=”1″ ScaleY=”0″ />
<RotateTransform Angle=”0″ />
<SkewTransform AngleX=”0″ AngleY=”0″ />
</TransformGroup>
</Grid.RenderTransform>
</Grid>

            ((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).X;
((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).Y;

1. image.SetValue(Image.SourceProperty,value);
2. image.Source = new BitmapImage(new Uri(value, UriKind.Absolute));

For the second option you will need to include the following namespace: using System.Windows.Media.Imaging;.

Known issues:
After the animation of Width, the width property doesn’t get set.  Same with Height.

XAML

    <Canvas x:Name=”LayoutRoot” Background=”White”>
<Button Height=”20″ Width=”120″ Canvas.Left=”0″ Canvas.Top=”0″ Content=”Button” x:Name=”btnTest”/>
<Rectangle x:Name=”Fred” Height=”30″ Width=”30″ Fill=”Aquamarine” Canvas.Top=”50″/>
<Rectangle x:Name=”Wilma” Height=”30″ Width=”30″ Fill=”OrangeRed” Canvas.Top=”150″/>
</Canvas>
C#

        void Page_Loaded(object sender, RoutedEventArgs e)
{
_storyboard = new Storyboard();
_dx = new DoubleAnimation();
_dx.From = 0;
_dx.To = 250;
_dx.Duration = new Duration(new TimeSpan(0,0,3));
_dx.AutoReverse = true;
_dx.RepeatBehavior = RepeatBehavior.Forever;

            Storyboard.SetTargetName(_dx, “Fred”);
Storyboard.SetTargetProperty(_dx, “(Rectangle.Width)”);
_storyboard.Children.Add(_dx);
LayoutRoot.Resources.Add(_storyboard);
_storyboard.Begin();
}

        void btnTest_Click(object sender, RoutedEventArgs e)
{
            _storyboard.Stop();
Storyboard.SetTargetName(_dx, “Wilma”);
_storyboard.Begin();
}

Here is an example of the code to call the animation.
SLAnimator.Animate(this, rect, 100, 100, 100,1,1);
Parameters:

• Container element
• UIElement to animate
• Time of animation in milliseconds
• X of destination
• Y of destination
• ScaleX
• ScaleY

This animation API is at it’s infancy, so I will continue updating as time permits. Feel free to download the class and give me your feed back.

Enjoy!

Links:
Download the source
Working example

1. Start with a JSON object:
   var Person = {
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}
}
2. Create an entry point into Silverlight. You will need to add namespace System.Windows.Browser.
   
3. Next add C# classes to mirror the JSON object. It’s important to make sure the variables in the class are exactly how they appear in the JSON object, this is case sensitive.
   
4. Before adding the deserializing code, add references in your project for System.Runtime.Serialization, System.ServiceModel, and System.ServiceModel.Web.
   
5. Now that the proper references are made in the project, we can finally write the code that deserializes the JSON object. The class that does all the magic is System.Runtime.Serialization.Json.DataContractJsonSerializer.
   
6. Finally add some HTML and JavaScript to make this work. (To get the JSON object in a serialized form I am using the Prototype JavaScript library. That is where you’ll find the function Object.toJSON(). There are other ways to serialize a JSON object. Notably, if you are using the AJAX ASP.NET library, there is a function in there that does exactly the same thing as this call.)JavaScript
   function sendJSON(){ document.getElementById("SL").Content.Bridge.SendJSON(Object.toJSON(Person)); }
   HTML
   <input type="button" value="send JSON to SL" onclick="sendJSON()" id="btnSendJSON" />

Links
See this example in action.
Download the Source.