MVVM and Validation at MIX11

I’m happy to announce that yesterday I had a presentation at MIX’11. I was talking about effective validation techniques with MVVM in Silverlight 4.0. In the session we discussed the different aspects of validation like designing the user experience and the architecture. The video of the session is now available for streaming on Channel9.

Also, I made a promise that I would post the demo code. Which I’m doing right now. So if you want to take a look at the ideas I implemented for the demo, I encourage you to do so.

However please note that this is only demo code… It is NOT tested and I advise you not to use it in production environment. It’s supposed to demonstrate a couple of ideas.

However if you are interested in having a fully functioning and tested version please just say so and I’ll release a somewhat updated and tested (in-production used) codebase.

Here is the demo code:

Mix11 Demo Source code


Binding update on TextBox.TextChanged event using Behaviors

In Silverlight 3.0 we have the UpdateSourceTrigger property for the Binding object which enables us to define when to save the data back to the underlying (data)property through the binding.

UpdateSourceTrigger has 2 mode:

  1. Default
  2. Explicit

Well, if it comes to TextBox it is really annoying that the update only occurs after the control loses focus. (The default setting for UpdateSourceTrigger is basically LostFocus) Now in WPF you have the UpdateSourceTrigger.PropertyChanged enumeration value which updates the data every time  the TextChanged event fires. Silverlight 3.0 doesn’t support this mode.

Now a workaround could be to implement a Behavior for TextBox. The code should be somehting like this:


Little explanation:

When a Behavior gets attached to the object, which in this case is limited to a TextBox, the OnAttached() method runs.

In the implementation of this method we subscribe to the TextChanged event. AssociatedObject is the textbox itself. Now when the TextChanged event fires our AssociatedObject_TextChanged eventhandler method runs. This method will get the binding defined on the TextBox’s Text property and will explicitly update the source property.

The OnDetaching() method runs if we remove the Behavior. In our case this means we have to unsubscribe from the TextChanged event.

Now lets go to Expression Blend 3.0. On the assets panel browse our new UpdateOnTextChangedBehavior and drag and drop in on the textbox. And that’s it. It’s just working.


The xaml would look like the following:


You can download the code file here in case you need it:

Hope this helps!

RIA Services Nuggets – DataPager Issues

Friday I was really brave. (or just crazy) I decided to use Entity Framework as a data source (for the first time) and tried to show the datapaging feature with .NET RIA Services. (Rule No.1: Don’t ever try a demo you’ve never tried before. :)) It has such a cool lazy loading feature. My xaml looked like this:


Then it hit me in the face. 20 items were loaded just fine but from 20 to I don’t know how many it just wouldn’t work. The data never arrived. I was quite surprised. Finally I decided to give it up since it’s probably a bug and RIA is just CTP. Then I came home and tried to reproduce the issue and I succeeded! 🙂 I had to face the fact: IT WAS NOT WORKING! Come ooooon! Such a basic thing and it’s bugy…. It made me really upset. 🙂

Then I got into it a little deeper and tried to debug the issue. I found an interesting error message:

“The method ‘Skip’ is only supported for sorted input in LINQ to Entities. The method ‘OrderBy’ must be called before the method ‘Skip’.”

Well yeah… that was it. The paging functionality is implemented with the use of Take and Skip methods. However in Entity Framework you can call these methods only on sorted collections and by deafult ObjectQueries are not sorted unless you call OrderBy() on them. So I had to modify the GetCustomer operation in my DomainService like this:


Now it’s working just fine. (SortDescriptors defined on the DomainDataSource would have been just fine as well)

But why isn’t this documented anywhere? Or did I missed something?

What’s new in Silverlight 3.0 – Navigation Framework

In the world of web we are used to passing urls to each other, so we always get the proper page without surfing through the whole website. Not to mention the search crawlers which access data (data in html pages) directly through these links. However with Flash and Silverlight this becomes a little more complicated. The navigation inside the Silverlight application is not tied to the browsers url field. You cannot reference a specific page in your silverlight application with a simple url. Or at least it would take a hell of a lot code to support it.

Well, in Silverlight 3.0 we have the Navigation Framework which pretty much solves the problem stated above.

Now let’s see…

The Navigation Framework has two main objects:

  • Page – A simple silverlight page where you can navigate to.
  • Frame – Each page will be presented inside the frame which controls the navigation process.

Let’s create a NavigationDemo sample Silverlight Application.

Demo application can be downloaded here:

Let’s create a Pages Folder and add three new Silverlight Pages (HomePage, ProductsPage, ContactPage)


Our layout in the MainPage.xaml should resemble to this:


Now we have 3 links in the upper right corner. The whole space below is occupied by the Frame. This is where our pages will be presented. Now set the HyperlinkButtons’ NavigateUri properties to navigate to the proper pages:


Add a simple TextBlock inside each page with a unique text so you know when navigation actually occurs.


Let’s take a closer look:

  1. You can see that the title of the page has changed: it’s “Contacts”. This is done through setting the Page.Title property in ContactPage.xaml to the “Contacts” string.
  2. The Url shows that we are in the Pages folder, on the ContactPage.xaml. Copy the link, open a new web browser and paste the link. You can see that we are navigated directly to the ContactPage. No need to browse through the HomePage. Yay!
  3. The content of the Frame changed to the specific page’s content. In this case the ContactPage’s TextBlock is visible.
  4. Our navigation bar is unchanged since it’s placed outside the frame. The Contact Us link is selected.
  5. On the picture below you can see that the browser’s back and forward buttons are functioning and they enable navigation through the silverlight application’s pages. We also have history support inside our Silverlight app which is pretty cool.


However our link is not too friendly we could really imagine a somewhat nicer url format. Fortunately the solution is already given by the use of UriMappings. (Later we’ll see there is much more to it than providing more friendly urls.)

So let’s go to the App.xaml and create the mappings. The UriMapper is located in the System.Windows.Navigation namespace in the System.Windows.Controls.Navigation assembly.


So the mappings are created. Now we have to change the NavigateUri properties to the previously defined aliases:


One last thing that has to be done.  We have to tell the frame to use our previously defined uri mappings to resolve the urls. This can be done through setting the Frame.UriMapper property. We have to reference the static “mapper” resource:


After running the application we can see that the structure of the url has changed:


Now we have the power to manipulate the url the way we want, so let’s create a master-detail like scenario using a classic querystring. Let’s add a new Page called ProductDetailsPage. On the ProductsPage.xaml add a listbox and fill it up with Products instances:


The code-behind:


On the Page.Loaded event we load the Products and add them to the listbox.


When clicking the button we get the selected product’s ID and navigate to the ProductDetails page using the Page.NavigationService property’s Navigate() method and by appending the productID after the url. Right know this doesn’t make to much sense for our SL application but now we know what to do. We have to create a new UriMapping.


You can see that we are mapping a url that contains a querystring like parameter to the much shorter and straightforward form of url that we used above. Between the curly braces there is a placeholder called id which you can reference in the mapping. In our case this means that the querystring parameter can be specified directly after the “Products/” url fragment.

Now we have navigation to an empty page which does nothing at this moment. So let’s add some functionality to it like a stackpanel with 3 databound textblocks to create a view for the Product instance.


The code-behind:


The OnNavigatedTo method runs after we arrive to this page. Through the Page.NavigationContext property we can access the QueryString! (the mapping hides it) So we get the parameter that we passed to the current page. The rest of the code is just pure and simple data access and data binding .

So we are done. Let’s take a look at the result:


Now we can experiment with links (parameters) like these:


The details page for the various product ids are working smoothly. The Navigation Framework introduced in Silverlight 3.0 solves an important issue. By now you probably have some ideas how this will support SEO but in a next post we will take a closer look on the subject.

If you have any questions do not hesitate to leave a comment! 🙂

What’s new in Silverlight 3.0 – Overview

This is the first one of a series of posts about the new features of Silverlight 3.0. Let this overview serve as a table on contents for the upcoming posts. 🙂
I sorted the new features into four main groups:

  1. Application Framework improvements
    • Navigation Framework, Search Engine Optimization
    • UI 2 UI binding
    • Out of Browser capabilities
    • Network Monitoring API
    • Local Messaging API
    • Improved Validation Support
    • Assembly Caching
    • SaveFileDialog added
    • Web Service enhancements (Binary XML, RIA Services….)
    • Styles, CaretBrush and merged resource dictionaries
  2. Tools Support
    • Blend 3.0 + SketchFlow Release Candidate
      • Blend API (Behaviors, Actions)
      • Adobe Photoshop and Illustrator Import
      • SampleDataSource
      • Intellisense and C# code editor
      • TFS Support
  3. Graphical improvments
    • 3D support
    • Pixel Effects
    • GPU acceleration
    • Bitmap API
    • Text rendering improvements
    • Improved Animation
    • Media enhancements
      • TrueHD support
      • RAW Audio and Video bitstream API
      • H.264 / AAC and MPEG-4 support
      • Smooth Streaming (Smooth HD) – IIS Media Services

      And of course we have the Silverlight Toolkit July version which contains cool new controls. Here is a small list of some of the mature and new controls.

      • DockPanel / WrapPanel
      • ViewBox
      • DataPager
      • DataForm
      • TreeView
      • AutoCompleteBox
      • ChildWindow
      • Accordion
      • Expander
      • Calendar

      The list is pretty long. Hopefully everyone will find something precious among the new features. 🙂

      New .NET Blog

      Hi Everyone!

      I am Zoltan Arvai from Hungary. This year in March I was honored with the Microsoft MVP award which boosted me with even more motivation. I work as a trainer and a consultant for local training facilities. I’ve been writing my .NET related blog for while now but it was limited to hungarians only. So I’m really excited about this new challange since I decided to create this brand new “international” blog. In the next week you’ll probably read about Silverlight and .NET RIA Services because currently those are my main focus areas but I’m interested in a lot of areas of software development like WPF, UX, WCF, especially Data Services, ADO.NET, Architectural Patterns and Team Foundation Server.  I really hope you’ll find some interesting stuff here!