Introduction

First article for CodeProject, hope it will be useful for this great community! It's quite a simple YouTubeViewer which implements the YouTube API, based on the MVVM Architecture. I'm using the MVVM Light Toolkit, so this article should support you to understand how MVVM and the YouTube API works.

What is MVVM and why should I use it?

The goal of MVVM is to seperate your UI from Code. So when you're finished and there's absolutly no code behind in your main window, you're doing the right way. The advantages of this architecture would fill many other articles, in summary we can say that a needed redesign of the GUI could easily be done by UX-Designers without studying the code logic.

We're working with bindings only!

In WPF there are several ways to store data. For MVVM you should use ObservableCollection<> because as the name implies, the collection observes changes/updates and automatically notifies the UI.

Binding/Commands

WPF Controls are able to bind a DataContext, in this example we bind a ViewModel to the Main Window. Controls like ListView's, Listbox, Combobox delievers the "ItemsSource" attribute to bind the ObservableCollection to the Control. The RaisePropertyChanged is used to notify the UI that data has changed. RelayCommand and the implemented ICommand are used to bind commands to the UI Controls, many controls supports this.

MVVM Rules/Advanteges

“If you have code in your View’s code behind, MVVM Police is going to take your family away.”

There is something called “Code Behind For a Reason”. But what I see the problems is that it is not that easy to test your Views if there are code in your code behind.

“No need for Converters.”

Sometimes you might need to use Converters, but I would say it is LESS use in MVVM.

“MVVM is only suitable for BIG projects.”

It is suitable in lot of cases that we can gain advantages of Data Binding.

“MVVM Costs Performance.”

Well, I would say Developer Performance since it requires some skills to understand the Patter and you have to do some additional coding such as Commands etc. But I think the Data Bindings are very optimized. You mileage may vary.

“MVVM is complex. Makes my head hurt”

Well, its nothing but a Pattern. The rest of the stuff are helpers and if your head hurts, it probably becoz of Last Night :)

“I dont need separation coz I dont have a designer.”

I think separation is about maintainability, and testability other than blend-ability.

“You cannot use MVVM with other patterns.”

Well, Why Not. You can use in a User Control with MVVM, and use this User Control in any other places.

QueryClientLoginToken returns a string if user's credentials are valid, otherwise it will throw an exception. For the case that the User is trying to log in with wrong credentials several times, we're catching the CaptchaRequiredException also.

To store general VideoFeed data we need our ObservableCollection, for this sample I've created a second Collection to load VideoComments after a video is selected in the ListView (For an improved performance, comments will be loaded when item x gets selected)

Comments and Discussions

Hi, The demo looks awesome, but i run the project and doesn't work. compile perfectly but i search any thing and when i push the button the console give a "captcha required" message accompanied of one exception...can you check this??. regards.

Hi, thanks for your Vote. Currently you've to type in your credentials manually in code, sorry for this. I commented where you have to type in some credentials like Developer Key, Username and so on. Hope it works for you then.