Earlier this month, I blogged about a Silverlight 2 Scroller control that I had labored over for the better part of a weekend.  The entire time I was working on this Scroller, I had this small, dirty feeling that what I had created was somehow way more than what I needed to accomplish my end goal.  But, time was short, it got the job done and I figured that I could always revisit it at some point.  

Fast forward a few days as I was reading Shawn Wildermuth's blog and I come across his post on the Silverlight ItemsControl and realized what that dirty feeling was all about.  I was exactly the guy he was talking about that was trying to bastardize the Silverlight ListBox into something else...namely the ItemsControl.  So, I revisited the Scroller and was able to remove about 50% or more of the code and still achieve my goal.  No custom ListBox, etc. 

I think it's part of most any process, really.  As you work on making something better you tend to keep adding and adding more code until you reach a saturation point where you need to step back and just start removing things. 

It made me think of so many guitarists in the 80's that just kept adding and adding notes and playing faster and faster until the music just became guitar masturbation instead of anything musical.  (These guys wouldn't have known a whole note if it hit them in the face). On the other hand, you take someone like David Gilmour that can play one note and absolutely convey way more than the shred monsters could ever muster.  It's all part of the learning process.  There's a curve graphed somewhere (I'm sure) that shows the guitarist's ascension to knowing when NOT to play.

So, who is Yngwie Malmsteen and what does he have to do with this post?  You can find out more than you ever wanted to know about Yngwie here.  Yngwie was the poster boy for never quite knowing when to stop adding notes and he flashed before my eyes when I looked back and my original Scroller code.  Anyway, thanks Shawn for saving me from that fate. 

The updated code is here.  Here is the live demo.

I'll leave the original code here in case you want to get it and make fun of me. 

Just a quick note that will hopefully save someone the pain that I just went through chasing yet another exception in Silverlight with nothing to go on from Visual Studio.  (I really hope that there is some better feedback coming on Silverlight applications when you hit a runtime error in the future).  Anyway, I was digging in my App.xaml today to do a bit of much-needed clean up and then started getting System.ExecutionEngineException being thrown at runtime.  I was just about to the point of pulling out WinDbg (see this post on that) and I decided that maybe Blend could help me out.  After all, it really does owe me one for all the times it wouldn't load my xaml without telling me why.

So, I opened the project in Blend and sure enough, it gave me the old "Invalid XAML" message that I was expecting when I attempted to open my app.xaml.  However, it also gave me a bunch of errors about not finding properties from one of my styles.  I took a wild shot and clicked the View XAML Code link that Blend offered.  It placed me on a style that I had added earlier and I immediately noticed that I had left off the TargetType attribute.  Adding this cured the problem. 

And for those that just scan for the code...

Bad:

        <Style x:Key="MyButtonStyle">
            <Setter Property="FontSize" Value="10" />
        </Style>

Good:

        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="10" />
        </Style>

Last week I had opportunity to really dive into some fun with a Silverlight 2 ListBox.  It all started with a requirement for a simple Scroller control.  You know, the simple left-to-right scrollers that you see in many applications?  I've seen them in several places, yet when I searched around for a Silverlight version that met my criteria I came up empty.  I have seen many great Image Carousel controls around, but overall the majority of them were not quite "calm enough" for a typical Line of Business application and I wasn't really intending on using images only.  There were some really great "pieces" that I found as I attempted to assemble this control and now that I have a functional version, I thought I'd share it with the community.       

The first challenge here was that I needed to have two horizontal rows of items in the Scroller.  Thanks to a post over at The Problem Solver and the WrapPanel from the Silverlight Toolkit, I was able to pull this off pretty easily.  So, I went to work on a custom template for a ScrollBar.  My initial thought here was that I'd stretch the ScrollBar to the Height of the ListBox, delete the Thumb, make the Background Transparent, and delete the Large Increase/Decrease controls.  This worked great, but the scrolling was what you would typically get when clicking the Small Increase/Decrease portions of a ScrollBar (i.e. the little arrows).  What we really needed was for each click to move to the next/previous column of items. 

At this point, I decided to lose the custom template for the ScrollBar and just go with a pair of RepeatButtons for the Previous/Next buttons so that I could have a little more control over things.  As I didn't want to see the ScrollBar, I had to hide it by setting the HorizontalScrollBarVisibility and the VerticalScrollBarVisibility to Hidden in the ControlTemplate of the ListBox. 

The ScrollViewer (that is part of our ListBox) is what we want to manipulate to give this per-item scroll experience to the user.  There are a couple of important properties of the ScrollViewer that we care about.  First, the ScrollableWidth which represents the width of the area that can be scrolled.  You can envision this as placing all of the columns end-to-end (including those that are scrolled out of sight) and getting the total width.  Secondly, the HorizontalOffset which is simply the indicator of the current scroll position (relative to the entire ScrollableWidth).  Using these two properties and the ItemWidth, we can compute how far to move the ScrollViewer for each click of our Previous/Next buttons. 

Since I needed direct access to the ScrollViewer in my ListBox and its not readily available from the default ListBox, I decided to create a custom control with a ScrollHost property.  I saw this little trick used in the ItemContainerGenerator class of the Silverlight Toolkit (which has some really great utility code along with the awesome controls....well worth your time to investigate that).  Also, since I was using a WrapPanel as my ItemsPanelTemplate and I needed the ItemWidth for my calculations and since WrapPanel just happens to have an ItemWidth property, I decided to expose that as a property as well.  I overrode the PrepareContainerForItemOverride() method in my custom ScrollerListBox in order to set these properties.  This worked pretty well and with a little math and a call to ScrollViewer.ScrollToHorizontalOffset(), I was able to create the scrolling behavior that I needed. 

But....wouldn't it be cool if the scrolling was animated?  ...it is Silverlight after all and every demo that I've ever seen at a conference with Silverlight has animation.  This proved to be a little more difficult as you can't directly animate HorizontalOffset.  While searching for a way to solve that, I came across a really great solution on Rob's Usability Development blog for creating an AnimationHelperControl to give you something to animate.  His post also made use of his excellent AnimateTo extension methods that he describes in another post.

As I didn't want to hard code the amount of time it took to animate the scroll, I added a ScrollTime Dependency Property to the ScrollerControl and was able to set that declaratively in my Page.Xaml.  

I think the final result gives a nice subtle use of animation that doesn't distract the user from their data.  (As an aside...for a REALLY nice usage of animation in a Silverlight application, check out the one that Billy Hollis shows in this video on dnrTV).

My demo uses employees that I've generated in a TestData class and then binds the various fields to the ItemTemplate of my ListBox using standard Silverlight DataBinding.  I was a bit too lazy to create a separate image for each of my employees, so I used the same image for each.  These images could just as easily be streamed from the database, but that's a different post.

Here is the live demo.

Here is the project source.

I have a few more ideas for the ScrollerControl such as the ability to drag between the items (sort of like the iPhone).  Anyway, I'll post those as I implement them. 

Recently, I was attempting to create my own popup dialog. I had specific requirements in mind for this dialog, including: 

1. I wanted to animate the Width/Height from 0x0 to the ActualWidth/ActualHeight
2. I wanted to animate the Opacity from 0 to 1
3. I wanted to animate the Top/Left properties from the point of mouse click (an icon in my case) to the center of the screen and back to the original point of mouse click when the user closed the dialog

All of these are fairly easy to accomplish using a Storyboard with an x:Name specified.  In the case of my requirement #3 above, I merely needed to set the From value of my animation and call the Begin() method, like so (for purposes of illustration, I'll confine this to the Canvas.Left property only...you can apply the same logic to the Canvas.Top property and it's all in the accompanying project):

<Storyboard x:Name="MoveDialogStoryboard">
  <DoubleAnimation
       x:Name="theDialogAnimation"
       Storyboard.TargetName="theDialog" 
       Storyboard.TargetProperty="(Canvas.Left)"
      To="0" Duration="0:0:0.5" />
  </Storyboard>

theDialogAnimation.From = 800;   // this value would actually come from getting the mouse position via GetPosition()
(MoveDialogStoryboard as Storyboard).Begin();

This all works as you would expect.  However, I really liked the idea of isolating all of my dialog states into one place and the Visual State Manager sounded like the perfect solution...that is, until I tried to set the FROM value programmatically and got hit with a NullReferenceException every time I tried to reference my named Animation. 

I tried several things and ended up posting my issue to the Silverlightforum where Shawn Wildermuth was kind enough to offer a solution.  Shawn's solution was to simply set the property to the value before calling GoToState() in my code.  This made perfect sense and I ran off to give it a try.  It worked...once.  My animation would fire once but then appear to be swallowed or ignored on subsequent clicks.  After further investigation, this turned out to be an artifact of the fact that I was never setting my VisualState back to the original state...something you don't have to do when using a Storyboard outside of the Visual State Manager.  So, that fixed that issue and Shawn's solution worked.  However, I didn't really see any way using this solution to animate back to the original point of mouse click.   

Either way, it didn't really satisfy my initial curiosity for WHY I couldn't programmatically set the FROM value when my animation was inside a Visual State Manager, so I pressed on.  Thanks to a couple of blog posts (here and here) and some pretty ugly LINQ, I was finally able to programmatically set the FROM value and have it animate my dialog from the original point of mouse click with a Storyboard inside of a VisualState like so: 

public void ShowDialog(Point startingPosition)
{
     Storyboard storyboard = Utils.FindStoryboard(LayoutRoot, "DialogStates", "Open");
     (storyboard.Children[0] as DoubleAnimation).From = startingPosition.X;
     (storyboard.Children[1] as DoubleAnimation).From = startingPosition.Y;
     VisualStateManager.GoToState(this, "Open", true);
}

// This is the definition of the extension method FindStoryboard() shown above (which is where the real work happens)
public static Storyboard FindStoryboard(this FrameworkElement parent, string groupName, string stateName)
{
     VisualState visualState = VisualStateManager.GetVisualStateGroups(parent)
         .Cast<VisualStateGroup>().Where(group => group.Name == groupName)
         .SingleOrDefault()
         .States.Cast<VisualState>()
         .Where(state => state.Name == stateName)
         .SingleOrDefault();

     if (visualState != null)
         return visualState.Storyboard;    

     return null;    
}

All of that being said, I didn't end up going this route nor do I recommend it.  It's way too brittle and just plain ugly in my opinion.  In the end, I chose to create my Open and Closed Storyboard animations for my popup dialog as standard Resource Storyboards where I don't have to reset the State before calling and I don't have to jump through hoops to set the value and, most importantly, I can set a name for the Animation and directly set the property value.  For the actual "modes" of my dialog (assuming there are multiple views for the dialog), I used the VSM to represent things like EntryView, EditView, etc.  I think this offers a much cleaner solution.

I've put together a quick demo to illustrate both calling the Storyboard directly and using a Storyboard in a VSM.  The live version is here and the project source is available here. 

This past weekend a few of us Wintellectuals made the trek Atlanta to Murfreesboro TN to present at the annual devLink conference.  I really can't say enough about the level of professionalism and obvious preparation that went into devLink.  John Kellar, Tommy Norman, and Leanna Baker and the entire team that made it happen are well deserving of accolades for their accomplishment.  The conference was held on the campus of Middle Tennessee State University which was also perfectly suited for the task.  All of the rooms were nice, large, and well-equipped (even though said equipment was apparently timed to shut off exactly at the 1-1/2 presentation mark).  As a vegetarian, I can't say too much for the food, but that's pretty much on par with any gathering...I've learned to carry plenty or protein bars over the years.  Bottom line, for $50 this absolutely has to be best value for your buck in training (other than Wintellect's DevScovery, of course *smile*). 

While my colleagues, Steve Porter and Keith Rome, offered four really great talks on Silverlight topics, I was there to present on all the new things available with Cascading Style Sheets (sarcasm off).  Actually, my CSS talk went really well and I received lots of good feedback which I'll continue to roll into that presentation.  All sarcasm aside, most web developers (especially those in Enterprise positions) are stuck with CSS for the foreseeable future and this presentation really aims to go through the major areas where I see developers struggling and try and cast some light on how all those pieces play together.  Thanks to all that made it to the talk (standing room only!) and for the emails that I've received since.

I've updated the slides and code with this past weekend's revisions and you can get it here:

CSS Deep Dive for the ASP.NET Developer

I believe that the other presentations will be posted on the devLink website, so keep an eye out for them.  There were a lot of good ones!

We saw it when the world first discovered Flash and I'm sure we've got a lot of it left to live through with Silverlight, so this is pretty timely advice from the "Godfather of Web Usability" himself, Jakob Nielsen.  This should be required for every web developer.  There are some great links within the post as well, so be sure to click around.

Top-10 Application-Design Mistakes

Thanks everyone for the comments and tips offered after I gave this presentation at Alabama Code Camp, as well as, at the Atlanta Cutting Edge .NET group last week.  I received several "so that's how it works" comments and that was exactly the point of this talk.

Here is the abstract of the presentation:

This will be a thorough discussion of all that is CSS.  Whether you know it as the necessary evil or the great enabler (that just hasn’t quite clicked for you yet), you should walk away with something valuable from this discussion.  I will begin with the basic box model and travel all the way to the holiest of grails (the no tables here, two and threecolumn ASP.NET Master Page layout…yours to take home for free!).  Along the way, we’ll touch on some CSS Best Practices and gotchas in ASP.NET and take a look at the new CSS tools in Visual Studio 2008 (Orcas).

Get the download  here .

Note:  The solution file provided is from Visual Studio 2008 (Orcas) Beta 2.  There is nothing .NET 3.5 specific (as most of it is HTML anyway).   

Update 04/01/08:  Updated the download to compile under Visual Studio 2008 RTM

Finally able to grab a minute to post my code and slides from the Introduction to Generics presentation that I did this past weekend at the Alabama Code Camp at the University of Alabama. 

This is the abstract from the presentation:

With the release of the 2.0 version of the .NET Framework, Generics became first class citizens

in the Common Language Runtime.  Yet, many still shy away from using them because of perceived difficulty or other misconceptions.   This presentation will seek to dispel a few of these myths and offer a gentle introduction into using Generics on a daily basis.  Along the way, I’ll also demonstrate language enhancements in the .NET 3.5 runtime that lend themselves nicely to working with Generics. 

Get the download here.  

Note:  The code is compiled on Visual Studio 2008 (Orcas) Beta 2.  The only project in the solution that uses .NET 3.5 specific code is the Collections project.  This uses C# 3.5 Automatic Properties and Property Initializers. 

I just returned from speaking at the Alabama Code Camp 5.0 in Birmingham.  One of my presentations was Deep Dive CSS for the ASP.NET Developer and I had hoped to spend some time on the tools in Orcas for working with Cascading Style Sheets.  Unfortunately, I did not get a chance to do that due to the time constraints, so I wanted to post some of my better links on that subject...

How to: Use the Apply Styles and Manage Styles Windows
http://msdn2.microsoft.com/en-us/library/bb398979(VS.90).aspx

            How to: Use the CSS Properties Window
            http://msdn2.microsoft.com/en-us/library/bb398902(VS.90).aspx

How to: Use the Direct Style Application Toolbar
http://msdn2.microsoft.com/en-us/library/bb398977(VS.90).aspx