Stuff – WPF Line of Business Using MVVM Video Tutorial

Stuff is an example application I wrote for WPF Line of Business Tour at Redmond event.  During some of the event sessions I used the code in Stuff to demonstrate topics I was teaching. 

During the event, we did not do an end-to-end examination of Stuff, that is the purpose of this blog post. 

Stuff

Stuff

In its current form, Stuff is a demo application that allows you to store information about the movies you own.  It uses the Netflix OData cloud database for movie look up, which makes adding a movie to your collection very easy.

One goal for Stuff was that a developer could take the code, open it in Visual Studio 2010 and press F5 and run the application.  I didn’t want burden developers with setting up a database, creating an account to use an on-line service or have to mess with connection strings, etc.

The Netflix OData query service made my goal achievable because it has a very low entry bar.

Stuff v2.  Shortly, I’ll modify Stuff by swapping out the remote data store layers and point it at Amazon’s web service so that I can not only look up movies but books, music and games too.  The reason I didn’t do this up front was because developers would have to go and get an Amazon account just to use and learn from the application. 

Another goal I had for Stuff was to limit referencing other assemblies or frameworks including my own.  All the code for Stuff is in the solution except the Prism EventAggregator.  I hope that trimming the code down to exactly what is being used in the application helps with the learning process.

There is a complete solution in both C# and VB.NET.

Model-View-ViewModel

You won’t see an individual video on MVVM below, because its not needed.  Instead, when appropriate I make mention of MVVM in the videos.

MVVM is a super simple pattern that describes a way to think about WPF and Silverlight applications.  When thinking in MVVM, we think in terms of a Model (our data), View (our UI) and ViewModel (traffic cop, abstraction of the View and adapter for the Model all rolled up into a single class). 

The Model, View and ViewModel typically communicate using the rich data binding stacks of WPF and Silverlight.

MVVM stands by itself and does not require an additional framework or special skills to use. 

I’ve seen developers investigating MVVM get discouraged when they see MVVM applications that take advantage of advanced features like IOC containers, service locators or MEF; in-effect lumping other programming concepts or API’s into MVVM.  If this happened to you, take a step back and get to know and understand MVVM for what it is, “a way to think about WPF and Silverlight applications.”

When writing WPF or Silverlight applications you may want to take advantage of an IOC container, service locator or MEF, but these are not required to use the MVVM pattern in your applications. 

As you gain experience in how you think about WPF and Silverlight application architecture and design patterns used to create these applications, you’ll find that the advance concepts are actually not that difficult and really do add value to your projects.

If MVVM is new to you, take it slowly, the light will come on.  For example, when you think about a Button, instead of thinking in terms of the Click event handler, you’ll think about data binding the Button’s Command property to an ICommand property on the ViewModel;  instead of thinking about addressing a control in the code-behind file by name, you’ll ask yourself, “what property do I need to expose on my ViewModel” that the UI control can data binding to.

MVVM is a very natural way to think about WPF and Silverlight applications, enjoy the learning journey and have fun.

Stuff Application Video Tutorial

Instead of writing a long blog post, I decided to tell the Stuff application’s story through a series of 14 short videos on different topics. 

I’ve tried real hard to keep each of the following videos short and focused.  The videos are all 1400 x 900.  To the get most from the videos, please read this very short blog post Karl’s Vimeo videos.

Introduction to the Stuff application

Video covers using the Stuff application and where Stuff stores your data locally.

http://www.vimeo.com/11582022

Solution and project structure

Video covers the how and why the solution and projects are structured the way they are.

http://www.vimeo.com/11582296

Introduction to OData

Video gives a short introduction to OData and querying OData sources.

http://www.vimeo.com/11583198

Abstracting the remote data store

Video explains how the Stuff application abstracts the remote data store for the purpose of allowing the concrete implementation to be easily changed in the future or for test purposes. 

http://www.vimeo.com/11453412

Business Entity Objects

Video explains the entity objects used in Stuff.  A short explanation of how I implemented searching the local Stuff data store is also provided.

http://www.vimeo.com/11584004

BusinessEntityBase and Validation

Video explains the BusinessEntityBase class and entity validation in Stuff.  Stuff uses the Data Annotations attributes to decorate class properties with validation rules.  This is a proof of concept that I wanted to try to see how far Data Annotations would take me.

http://www.vimeo.com/11585675

Service Container

Video explains the ServiceContainer (ServiceLocator) used in Stuff.  ServiceContainers provide a mechanism for resolving concrete types at run-time, design-time and test-time for the various services your application exposes.

http://www.vimeo.com/11455192

IDialogService

Video explains how simple it is to implement a dialog service that your ViewModels can consume.  The swapping out of the concrete implementation is also covered.

http://www.vimeo.com/11455208

IEventAggregatorService

Video introduces the Prism Event Aggregator and how Stuff implements an IEventAggregatorService.  Event Aggregator enables creating decoupled applications by disconnecting the initiating object (publisher) from the receiving object (subscriber).

http://www.vimeo.com/11585963

IMovieDataStoreService

Video covers the local data store used by Stuff to persist its data.  Additionally, it explains how local binary serialization and deserialization is used for loading and saving data and how to workaround a problem with binary deserialization in Expression Blend 3 and 4 that is caused by Blend not reloading its application domains between builds.

http://www.vimeo.com/11586513

VisualStateAssistant AttachedProperty

Video explains the VisualStateAssistant AttachedProperty that enables the changing of VisualStates in the UI from a ViewModel using data binding.

http://www.vimeo.com/11586881

Behaviors in Stuff

Video explains the Expression behaviors used in the Stuff application and how to wire them up.

http://www.vimeo.com/11587047

Design-time Visual Studio and Blend support

Video explains what I did to enabled a good design-time experience in the Stuff application in both Visual Studio and Expression Blend.  Video covers the design-time services and design-time data as well as some issues you need to deal with with each of the tools.

http://www.vimeo.com/11590320

Dispatcher, BackgroundWorker and WebClient

Video covers the use of the Dispatcher in the Stuff application and how I used posting to the Dispatcher to set focus to controls after UI transitions.  I also cover using the BackgroundWorker for performing background  search operations and using the WebClient to asynchronously download images.

http://www.vimeo.com/11590982

Downloads

If you have not installed Expression Blend 4, then your system will not have the Expression Blend SDK assemblies and you won’t be able to compile the solution. 

I have added a folder to the solution named, “Expression SDK Dlls.”  If you do not have Blend installed, you’ll need to update the references to the Blend SDK assemblies by removing the broken references and re-adding the reference to the dll in the above folder.

C# Source Code

VB.NET Source Code

Close

Hope you can learn just a little bit more about WPF Line of Business application programming from this example.

Have a great day,

Just a grain of sand on the worlds beaches.

63 Responses to Stuff – WPF Line of Business Using MVVM Video Tutorial

  1. Hi Karl,

    I can’t build the solution because I’m missing the following assemblies :
    Microsoft.Expression.Effects
    Microsoft.Expression.Interactions
    System.Windows.Interactivity

    I understand they are Blend components, but I don’t have Blend installed. Can I find these assemblies without installing Blend ?

  2. […] Stuff – WPF Line of Business Using MVVM Video Tutorial (Karl Shifflett) […]

  3. […] this article: Stuff – WPF Line of Business Using MVVM Video Tutorial « Karl On … Please Share This […]

  4. […] Stuff – WPF Line of Business using MVVM Video Tutorial (Karl Shifflett) […]

  5. peteohanlon says:

    Good job k-sawg. I’ll have a watch when I get a few minutes away from MEFedMVVM.

    • Hey Pete,

      Good to hear from you.

      These past weeks the training event has really consumed my life.

      I’ll have more time soon (I hope) to look at MEFedMVVM and the other work the disciples are doing.

      Cheers,

      Karl

  6. goldytech says:

    Hi Karl

    Stuff indeed is something really kewl STUFF.

    Can you please guide me what challenges that you foresee if I wish to convert this app into Silverlight app. My question is more towards the UI Side. Have you used anything that is only compataible with WPF and not SL,

    Please advice.

    • This application should not be difficut to move to SL.

      You’ll need to get the SL version of Prism and will need to look at all the code in the Simple.WPF assembly as this code is WPF specific; translated, you’ll need to update the code to work in SL.

      I was thinking about re-writing this as a SL app so I could compare the two platforms.

      Cheers,

      Karl

  7. ginganinja says:

    Great work Karl!

    You’ve made it really clear, and easy to understand, and I appreciate the bite sized bits of video.

    It’s also really useful to be able to see how you have laid out your solution file – obvious stuff some may say, but it’s often missed.

    cheers

    Dave

  8. bmsullivan says:

    Karl,

    Thanks for this example. Very helpful! I have to say, though, the sound effects for the mouse and keyboard are pretty obnoxious. (I assume those were inserted by software as you were recording the screencasts?) I appreciate the motivation to let us know when you’re typing or clicking, but those particular sound effects were more distracting than anything. Maybe you could leave those out next time? :-)

  9. cedpsfn says:

    Karl,

    I am having video problems with the videos after downloading them. I get sound but no visuals. Any suggestions?

    Thanks,
    Steve

    • Steve,

      When you say download, you mean you log into Vimeo and then click the “Download this video” link, correct?

      If you click the link, the video should start playing in Windows Media Player. Does this happen?

      If you try another computer, do you have the same issues?

      This is a first for me with Vimeo.

      Please let me know,

      Karl

  10. cedpsfn says:

    The video was playing and I was able to save the video. When I opened it in IE it would not display. The audio was fine. It turns out my corporation disabled certain functionality of IE. I have it working now. Sorry for the trouble. Steve

  11. wazzzuup says:

    Hello, Karl. I have a question about querying webservice with LINQ.
    first you declare catalog
    var catalog = new Netflix.Data.NetflixServiceReference.NetflixCatalog …

    then you query it with linq
    var titles = from t in catalog.Titles …

    I’m interesting in what in fact happenning underneath this statements on client. Is all catalog of movies is transmitted to client and then it is filtered by second statement or it is filtered on server and client gets only result?
    Thanks in advance!

    • Have a look at the proxy code in the NetflixCatalog. It has the code to create the request from a LINQ statement and translate into an ODATA URL request.

      If you look at this video, http://www.vimeo.com/11583198 where I show interacting with ODATA using the browser, the same data is returned to the NetflixCatalog where it puts the request response in class for you.

      Cheers,

      Karl

  12. jenner31 says:

    Karl – I was recently browsing your old LOB example project on Codeproject and was interested in one of the topics in an uncompleted section – that of WPF application security. Would you know of any good resources online for helping a new WPF developer plan for & implement application security for a LOB app? Thanks!

    • Microsoft Press has several titles on writing secure code.

      Securing connection to the database or data services is usually the area of most concern. There is also a Patterns & Practices book on this topic.

      Not allowing public or internal users access to your data is very high on my list.

      Is your app a public app or is it installed and used behind the firewall of a company?

      Cheers,

      Karl

      • jenner31 says:

        Our app will only be used by internal employees. It will be a standard, database-driven application used for reporting, accounting, and project management, so of course protecting the integrity of the data is a concern. There will be plenty of areas where we will want to restrict access, both to windows & reports and to making changes to the data.

        What MS Press book would you recommend on this topic? I have browsed online a bit for such resources but nothing jumped out at me.

    • goldytech says:

      Hi Jenner

      You can also use Client Application Services which internally uses Asp.net Membership and role providers for enabling security into your application. This is something you can use out of the box.
      Read this article

      http://msdn.microsoft.com/en-us/library/bb546195.aspx

      Thanks
      Goldy

    • Look at these two items, including the list of Items other customer purchased:

      Don’t forget to purchase any book you choose from Amazon’s third parties. These have been around so you can pick them up cheap.

      Also Goldy’s suggestion is valid and correct.

      Take the time to understand your requirements, then select the correct techniques.

      Cheers,

      Karl

  13. salilbhole says:

    Hi Karl,

    Firstly excellent videos on WPF, very very helpful. I actually tried one of your suggestions in regards to using Dispatcher object and it seems to have solved some of my issues. Following is a brief description of the application we are building and issues regards to XBAP

    Application type: WPF Browser Application (XBAP)

    Scenario:
    Our main .net web application has a link which opens a XBAP application in another window (aspx page having a frame which hosts xbap). This XBAP application runs in Full Trust mode. In the browser control we open a third party web application where user can login and then can interact with web pages hosted on third party site. So one of the things I wanted to accomplish and was partially successful is, attach C# event handler (I found a lot of JavaScript examples but not c# event handlers) to a button click. So when a user clicked on the button titled “Update Information”, I wanted to crawl the web page and gather data from various text boxes, drop downs etc controls and send that data to our back end database via wcf service.

    Problem: Weird thing is I was able to accomplish this using c# event handler but it works occasionally meaning the click event handler will work some time and some time it won’t fire. I have tried to narrow down the reasons why the click event handler won’t fire but couldn’t concretely say because of reason xy or z.
    So I am writing to see if you would have any insight on WPF and Web browser control.

    Any help would be appreciated.

    Thanks in advance,

    Salil

    • Salil,

      Thank you for your kind words.

      I wish I knew about XBAP’s but I don’t.

      Can I suggest using the MSDN forums or Microsoft Connect.

      If you run into a road block or can’t get help, please leave another message here.

      Sorry I just have not used XBAP’s.

      Cheers,

      Karl

      • salilbhole says:

        Thank you so much for the prompt reply. I did try to get some help on MSDN forum with no luck. Following is the link where I originally found the solution, http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a4f0e4d0-78bf-44c5-a3fe-8faf2e7a0568/
        Anyway thanks for your help.

        Cheers,

        Salil

        • Salil,

          That thread is pretty old.

          I suggest opening a new one.

          Let me know if you can’t make progress.

          Cheers,

          Karl

        • salilbhole says:

          Hi Karl,

          Thanks, actually I am in a bind and handling click events of html button control within the browser control is the backbone of this app and without having it working consistently kind of makes the functionality useless or makes product flaky. Even if you know anyone who knows XBAP and if I can ask them any question would help greatly.

          Again thanks

          Salil

        • Salil,

          Can you log a Microsoft Connect bug? This will enable you to send them a project and a detailed report of the problem. This will also get you in touch with team.

          After logging the Connect bug, please send me a link so I can follow up.

          Cheers,

          Karl

        • salilbhole says:

          Thats great, I will do that and send you the link.

          Again, you have been great help

          Thanks,

          Salil

  14. rclarke7717 says:

    I just tried to download several of your projects in particular the Sruff-VB files and could not. When I control-click on the download link, I get to Windows Live. I then click on the Stuff-VB folder until I get the opportunity to click on “Download” when hovering on the file. I click on download and internt explorer displays an empty page but nothing downloads.

    • rclarke7717,

      Bummer. It’s works for me. (of course).

      Are you at work or home? I’ve been told by some people that the SkyDrive can be difficult to access at work.

      Please let me know.

      Thanks!

      Karl

  15. rclarke7717 says:

    I’m at home and I just tried again just to make sure before I replied and I still cannot download.

    • Ahhggg…

      I’ll post the code on the post later today. I’m updating XAML Power Toys today.

      Maybe the SkyDrive is having problems today.

      Sorry, for the bummer.

      Karl

  16. rclarke7717 says:

    Karl,
    I just wanted to let you know that I have been able to download Stuff from your Sky Drive. Thanks for your help and thanks for all of your hard work and generosity. I also want to thank you for not forgetting that there are still some VB’ers out here.

  17. bjoc says:

    Karl,

    Excellent videos. Many thanks for taking the time to share them. It’s shown me a lot of useful things I didn’t know.
    I have one question regarding they way the ViewModels drive the view, in the case of ‘Stuff’ this seems to be done using the CurrentVisualState property.

    The three views are getting initialized in the Shell’s View and are being shown/collapsed depending on the CurrentVisualState value.
    Do you know of any other approaches used for handling this kind of visual transition from one UI UserControl or window to another.
    Lets say in a real world LOB app there could be 50 Views. It probably wouldn’t be efficient to initialize them all in the shellview xaml file but have some way to construct them from the ViewModel and inject them into the view somehow if that makes sense? Some sort of service that would create the view, set its viewmodel to its datacontext and display it in the shell. Would you know how this could be approached or some online references to these kind of challenges?

    Regards,
    Brendan

  18. squiggley says:

    Brilliant videos Karl thank you very much.

    A question if I may, I have been trying to use your BusinessEntityBase and Validation on a DateTimePicker without success. Could you point me in the right direction to get it working please.

    Thanks

    • Glad you liked the videos, they were fun to produce.

      Not sure I follow your scenario with respect to the DateTimePicker.

      Which DateTimePicker are you referring to?

      What is not working for you?

      Cheers,

      Karl

      • squiggley says:

        Sorry should have just said the standard DatePicker, I would like it to have the red triangle in the righthand corner like the other controls untill a date is chosen

        I have this in my app.xaml

        I have also tried

        both with no success

        Thanks

        • squiggley says:

          Guess the xaml did not post
          its basically setting the style for a DatePicker and a DatePickerTextBox

          Setter Property=”Validation.ErrorTemplate” Value=”{DynamicResource validationTemplate}”

        • You will probably need to edit the ControlTemplate for the DatePicker control since it may have its own implementation for surfacing errors. I’ve not used the DatePicker so I’m not excactly sure.

          Sorry I can’t provide exacat instructions. A quick search of the Internet will probably yield a good answer.

          Cheers,

          Karl

  19. mycollections2 says:

    Hello Karl,

    Thanks a lot for sharing this code.
    Could you please confirm that i can use some part of your code in my free application (DataTemplate, Style, CustomEffect..)

    Best regards

    Jeff

    http://mycollections.codeplex.com/

  20. […] been wanting to update my Stuff application to consume Amazon.com data and to support many more item […]

  21. sgurram9 says:

    Karl,

    I am trying to run the Stuff application using VS 2010.
    I am getting the following exception, can you help?

    at System.Windows.Media.Imaging.BitmapFrameDecode.EnsureThumbnail()
    at System.Windows.Media.Imaging.BitmapFrameDecode.get_Thumbnail()
    at MS.Internal.AppModel.IconHelper.GetBestMatch(ReadOnlyCollection`1 frames, Size size)
    at MS.Internal.AppModel.IconHelper.CreateIconHandleFromImageSource(ImageSource image, Size size)
    at MS.Internal.AppModel.IconHelper.GetIconHandlesFromImageSource(ImageSource image, IconHandle& largeIconHandle, IconHandle& smallIconHandle)
    at System.Windows.Window.UpdateIcon()
    at System.Windows.Window.SetupInitialState(Double requestedTop, Double requestedLeft, Double requestedWidth, Double requestedHeight)
    at System.Windows.Window.CreateSourceWindow(Boolean duringShow)
    at System.Windows.Window.CreateSourceWindowDuringShow()
    at System.Windows.Window.SafeCreateWindowDuringShow()
    at System.Windows.Window.ShowHelper(Object booleanBox)
    at System.Windows.Window.Show()
    at Stuff.App.App_Startup(Object sender, StartupEventArgs e) in C:\work\WPF\Stuff-CS\Stuff-CS\Stuff\App.xaml.cs:line 26
    at System.Windows.Application.OnStartup(StartupEventArgs e)
    at System.Windows.Application.b__1(Object unused)
    at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
    at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)

    • sgurram9 says:

      I was able to fix the problem by removing the application icon. But now I got empty movies list. The OData seem to getting the data, but rendering that data seem to have issues. Any idea?

      • Have you altered the code in any way? When I download and press F5 it works here.

        Can you delete what you have, redownload and try this again. Something does not sound right.

        Karl

  22. cogentx says:

    Hi Karl, I just finished watching these videos. The videos and sample code are an amazing resource for those of us interested in advancing our knowledge of application development using WPF. I also watched your other videos on Vimeo. Please keep up the great work! Many, many, many thanks!

    Sean

  23. kusinaheads says:

    Hi Karl,

    Thanks for this tutorial. Very nice. I am new to WPF and it gave me a lot of information on how to proceed, especially the MVVM pattern.

    I noticed that all the views (browse, edit and add) are preloaded on design time. I would like to ask what is the best approach on loading a view on runtime.

    Thanks again!

    Joey

Follow

Get every new post delivered to your Inbox.

Join 248 other followers