7 Days Weatherforecast Application

I have develop silverlight application which will display the 7 day forecast of given city.I was thinking of this application long time ago but I have not developed it because of some reason but now after some research and time I have develop it and here is my application for you. Below is the screen shot of the main form which will display the weather forecast for a given city code. I have used the weatherBug web service which are free to use. You have to registered with the weather bug and they will send you the key and the resource link for your use.

For the registration for the weather bug web site you need to visit following link here you can click on the Register link and your registration will start. After accepting the terms and condition and selection one of the the web service usage option you can click on the submit button.

In the next page they will ask about the detail of the you, mean your name , email address, company name , address and country you can click to the submit button. when you click on the save button they (weather bug) will send you email for confirmation. when you click on the verification link in the email they(weather bug) will send you another email for the application code and the documentation links.
For this application I have created web service in the web application of the the silverlight application, so that to communicate with the weather bug services because silverlight doesn't support cross domain web service references so we have to make an adapter web service in our web application and link it to the Silverlight app. For detail of how to consume the web service in the silverlight application check this link.
For this application to run, the web service "WeatherService" in the application should be running as it has to communicate with the weather bug service. You can open the solution file of the project and press the F5 , and both the service and the application will run at the same time.
Some detail about the application I have placed one text box and the search button to search with any of the city code and also place some of the city code beneath the text box control so that you can also select from the list as well. You can download the source code from here. You can also download full source code from here ( key is not provided in full source code)

All and any comments / bugs / suggestions are welcomed!

Binding ComboBox Based On First ComboBox Value MVVM

In this post I will show you how you can Bind the second combo Box based on the value of the first Comoros value, by using the MVVM.It is a common scenario in our web or desktop application development that we need to fill the combo Box based on the parent combo Box value, like we have common scenario like the country and state combo Box controls in our application where user can select the country name and then based on the country name the state combo box is filled, by fetching from database or by filtering from locally saved records. Below is the image of the window which contain two combo box control one for the country and second one for the state and two button are also added one is for save , which is used to see the selected value of the country combo box and the close button to close the window.

Now let us start with our code. For the model I have define two classes one for the country and second one for the states. The country class has two properties one is the name of the country and second one is the country id which is used to search the state in the state list and is of type int. The country name property is used to displayed in the combo box and one function which will return all the country names. The second class is for the state and it also have two properties one is the country id which is the id of the parent country and second one is the name of the state which is displayed in the state combo Box control. For the state class I have two function one is to return all the states and second one is the used to return the states based on the country id which is passed as parameter.

ViewModel

Below is the code which is written in the view model. I have only write here important code here to explain you about the code. Here you can see that I have three properties one is for the country name list which is used to bind the country combo Box control, and you can see that it is only get and set no extra code here. Because I want to bind the country combo box only once. Second property is the Selected country name which is used to bind with the SelectedValue of the country name as you can see in the property that I have raised RaisedPropertyChanged event , because I want to select the states values based on the selected country.

public List<CountryNames> CountryNameList { get; set; }

public CountryNames SelectedCountryName
{
    get{return selectedCountryName;}
    set
    {
        selectedCountryName = value;
        RaisePropertyChanged("SelectedCountryName");
    }
}

public List<StateNames> StateNameList
{
    get{return stateNameList;}
    set
    {
        stateNameList = value;
        RaisePropertyChanged("StateNameList");
    }
}

Third property which I want to explain here is the StateNameList and you can see that I have raise the property changed event handler here , as the value of this list will be change every time I have selected new country from the country combo box.

View:

For the view I have only selected the country combo box to explain you how to bind the combo box and then get the selected value of the combo box in the view model. Here you can see that I have bind the ItemSource property of the combo box control to the CountryNameList which is defined in the view model and return list.

< ComboBox Grid.Column="1" Grid.Row="1" Margin="1,2,5,2" ItemsSource="{Binding CountryNameList}" DisplayMemberPath="CountryName" SelectedValue="{Binding Path=SelectedCountryName,Mode=TwoWay}"/>

To get the selected value back to the view model I have bind the selectedValue property of the country combo box with the SelectedCountryName property and set the mode to two way. Now when the country name changed the selected value of the combo box also changed and I have raised the changed event in the view model and also in the RaisedChangedProperty I have checked the propertyName which is passed to the SelectedCountryName and then select the state name list. Hope you get some idea about how to bind the combo box and get the selected value.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

How to use Grouping in DataGrid Silverlight 3 Control

In this post I will show you how you can use the grouping feature provided by the data grid control of silver light 3 control. I will show you how you can group the data grid data at run time. Below is the image of the screen which I have develop for this example. Here you can see that I have three control one is label , second one is the combo Box for the selection of the group name and third one is the data grid to show the grouped data. When application start you can see that combo box has no selected value by default so no grouping is applied and all the data are shown as it was placed in the collection.

Here is my code which is used to group the collection based on the selection value in the combo box control, the combo box control contain only two item one for the gender and second one for the age. As I want to group the collection on these two value mean gender and age. The code is written in the Selection changed event handler of the combBox and here you can see that I have usese the PageCollectionView class which is in the System.Windows.Data namespace. I have declared collection objec of PageCollectionView class and used the GroupDescription Property to add the property name.

if (cboGroupName.SelectedIndex == 0)
{
  collection = new PagedCollectionView(myPersonList);
  collection.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));
  grdDataGrid.ItemsSource = collection; ;
}
else
{
  collection = new PagedCollectionView(myPersonList);
  collection.GroupDescriptions.Add(new PropertyGroupDescription("Age"));
  grdDataGrid.ItemsSource = collection; ;
}

When you select value from the combo Box it will group them on that value mean if you select gender then grouping is applied on gender and else it will be applied on age.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Child Window Control SilverLight 3

In this short post I will show you how you can use the child window control of silver light 3 and get the values from the child window control. Let us start with our code, when you add new item from the add new item option you can see the Silverlight Child window template when you click on the Silverlight category. When you add it it will generate two buttons and there click event handler and code in there click event handler, the Dialog-return true for OK and false for cancel button. Below is the main screen of the child window here you can see the I have create the First Name , Last Name , Email address and the contact Number.

Here is my code to open the child window control from the code. Here you can see that I have created the childWindow object and then registered the closed event handler for the object. The reason for registering the closed event handler is that Show() is an asynchronous call. That is, it doesn't wait for the dialog to be dismissed; it returns immediately. That's why Show() returns void rather than a DialogResult. If you want to know how the dialog was dismissed (that is, what the DialogResult value is once the dialog is closed), you handle the dialog's Closed event and check DialogResult there.

ChildWindow1 childWindow = new ChildWindow1();
childWindow.Closed += new System.EventHandler(childWindow_Closed);
childWindow.Show();

void childWindow_Closed(object sender, System.EventArgs e)
       {
           ChildWindow1 childWindow = (ChildWindow1)sender;
           if ((childWindow.DialogResult.HasValue) && (childWindow.DialogResult.Value))
           {
               MessageBox.Show(string.Format("First Name: {0} \nLast Name: {1}\nEmail Address:{2}\nContact Number: {3}",childWindow.FirstName,childWindow.LastName,childWindow.EmailAddress,childWindow.ContactNumber), "Return Value", MessageBoxButton.OK);
           }
       }

And in the closed event handler I have check for the DialogResult for the HasValue and check for the value. The HasValue indicate whether the current dialogResult has value or not and the value property of the dialogResult which is nullable.

The I have used the properties of the child window control to get the values for the First Name, Last Name, Email address and contact Number. The value to these properties are assigned on the click event handler of the OK button and in that click event handler DialogResult is assign value true and in the cancel click event handler the value is assigned to false., these value are assigned when you add new item of child window control.Hope you get some understanding of the child window control and how to return values from the child window control. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

SilverLight Progress Bar

In this post I will show you how you can bind the slider control value property with the value property of the progress bar control. I have created 6 different color progress bar controls, first one is the default progress bar and for remain I have just change the template color. For the red template progress bar I have display the value property of the progress bar to indicate the current progress completed value. Below is the image of the main screen. Here you can see 6 progress bar and one slider control.

For element binding below is the code for each of the progress bar value property. Here you can see that I have Bind the value of the slider control to the value of the progress bar and the set the element name to the slider control name.ElementName defines the name of the binding source element.

Value="{Binding Value, ElementName=ProgressValueSlider}"

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Commands Bindng in MVVM

In my last post on MVVM for Beginner I have show you the simple way to bind the textbox and date picker to the data-source properties. Which are either declared in the Model or viewModel. In this article I will show you how to bind the Buttons control so that viewModel will allow the view to consume its functionality. I am using the Relay Command which is discussed by Josh Smith.
Commands are a way to handle user interface (UI) actions. They are a loosely coupled way to bind the UI to the logic that performs the action. When building composite applications, presentation design patterns such as Model-View-Presenter (MVP) and Model-View-Controller (MVC) are often used to separate the UI logic from the UI layout and presentation. When implementing these patterns with Windows Presentation Foundation (WPF), the presenter or controller handles commands but lives outside the logical tree. WPF-routed commands deliver command messages through UI elements in the tree, but the elements outside the tree will not receive these messages because they only bubble up or down from the focused element or an explicitly stated target element. Additionally, the WPF-routed commands require a command handler in the code behind.

Let us start our example code of how to bind the Button command property and execute the code on the view model to perform the task. I have same example code which I have used in my MVVM for Beginner post, but in that post the buttons are not working which will work in this post and I have changed the theme to red which was black in the previous post.

View:

In the view if you look at the starting tag which is normally started with either user control or window, but in case of my view it starts with classes.ViewBase as I have created base class for the view and the base class is inherit from the window. I have created a base class so that I have single close event handler for all the views. If you look at the xaml , you can see that I have used the ApplicationCommads.Close, which will get value that represents the Close command. I have also used the CommandBinding class which Binds a RoutedCommand to the event handlers that implement the command.

<classes:ViewBase.CommandBindings >
<CommandBinding Command="ApplicationCommands.Close" 
                   Executed="CloseCommandHandler"/>
<classes:ViewBase.CommandBindings >

<Button Content="Save" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,80,3" HorizontalAlignment="Right" Command="{Binding Path=SaveCommand}" > </Button>
<Button Content="Close" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,-1,3" HorizontalAlignment="Right" Command="ApplicationCommands.Close"> </Button>

Then I have used the Command property of the button (Gets the command that will be executed when the command source is invoked) to bind the command for both the save and the close buttons.

ViewModel

In the ViewModel I have declared RelayCommand object which is discussed by the Josh Smith. And a get property is define which will return the ICommand Interface. I have also created RelayCommand class which is implemented by Josh Smith. I have just shown the messageBox to display full name of the customer.

There is no changed in the model. Hope you get idea about how to bind the commands to the buttons.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

References:
1- Commands

What's new in Expression Blend 4

What's new in Expression Blend 4
With Microsoft Expression Blend 4, you can create websites and applications based on Microsoft Silverlight 3 and Microsoft Silverlight 4, and desktop applications based on Windows Presentation Foundation (WPF) 3.5 with Service Pack 1 (SP1) and WPF 4. We will also be adding support for Windows Phone 7 through a freely available Service Pack.

Expression Blend provides new support for interactivity through behaviors, special Silverlight functionality, on-the-fly sample data generation, and prototyping - a feature offered as part of the Expression Studio 4 Ultimate.

Expression Blend 4, Visual Studio 2010, Silverlight and .NET provide the most compelling design and development workflow on the market today. Ideas are taken from concept to completion with speed and flexibility, challenging you to deliver innovative and compelling applications for your customers with Silverlight and .NET.

Updated Silverlight and WPF support
Silverlight 4 and WPF 4 support
You can create and modify Silverlight 4 and WPF 4 application projects in Expression Blend. You can also upgrade a Silverlight 3 project to target Silverlight 4, or upgrade a WPF 3.5 with Service Pack 1 (SP1) project to target WPF 4.

Compatibility with Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1)
For the first time you can choose to target older versions of the platform, creating and modifying Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1) application projects in Expression Blend.

Interoperability with Visual Studio
Expression Blend and Microsoft Visual Studio 2010 use the same project format. Expression Blend conveniently allows you to convert a Visual Studio 2008 project into a Visual Studio 2010 project.

SketchFlow
SketchFlow, a feature in Expression Studio 4 Ultimate, enables you to model the navigation and composition of an application rapidly in a very visual manner. SketchFlow prototypes can be as simple as a series of sketches, but can evolve to be as real as you need them to be to communicate your design intent. All of the user interface (UI) modeling features of Expression Blend, including Photoshop importing, visual states, behaviors, and sample data, can also be used in prototyping projects.

Publish to SharePoint
Once you have created a SketchFlow project, you can publish your project to a Microsoft SharePoint document library. The SketchFlow project will be available to anyone who has permission to view content on the SharePoint site.

Reviewers can share their feedback with other stakeholders by publishing their feedback to the SharePoint site.

Convert feedback to work items
For teams using Microsoft Team Foundation Server you can now convert reviewer feedback into a TFS work item so that you can take action on it and keep track of it.

SketchFlow animation picker
The PlaySketchFlowAnimationAction behavior is used to play a SketchFlow animation in response to an event. You can use a new picker in the Properties panel to easily pick a SketchFlow animation for the action to control.

SketchStyles
The default Style set for a new SketchFlow project is SketchStyles. You can switch to another Style set at any time.

Naming screens
When creating a new screen or component screen in the SketchFlow map, you can name the screen immediately after creating it.

Pausing and resuming a SketchFlow animation
In Expression Blend, each frame of a SketchFlow animation contains a new Pause button. When enabled, the SketchFlow animation pauses at that frame when playing back in the SketchFlow Player. In the SketchFlow Player, there is a play/pause button that is next to each SketchFlow animation and that can be used to play, pause, or resume that animation.

Graphics and layout
Improvements to Photoshop file importing
In Expression Blend 4 the following layer effects can now be merged with their layers:

•Drop Shadow
•Inner Shadow
•Color Overlay
•Outer Glow
•Inner Glow
•Gradient Overlay
•Bevel & Emboss
•Satin
Pixel-shader effects
Add subtlety to your UIs by taking advantage of the large range of new pixel shader effects that can be animated. Whether you want to manipulate color, add a drop shadow or animate a ripple transition, the extensible range of pixel effects gives you total control, whether you are applying the effect to whole application, or an individual element, so you can create the effect you want to achieve.

Shapes
Expression Blend 4 now includes presets for the easy creation of arcs, arrows, callouts, and polygons. Shapes can be easily switched between sketch-style and regular-style rendering. This feature can be found in the Assets panel under the new Shapes category.

Lay items out along a path
A new feature of Expression Blend is the ability to lay out items along any path. Items can be arranged along the path according to several settings that can be animated. By animating the Start property, you can also use this feature in motion path scenarios. This is an extremely powerful new feature offering you new ways to answer UI questions visually without the need for code.

Controls
New controls
Expression Blend has tooling support for the RichTextBox control in Silverlight.

Improved control styling
It's not always possible to customize a control in the context of its containing Window, Page or UserControl. When the style of a control is in another document, style editing takes place in that document, away from the context of the control. But with Expression Blend, the control instance, including its size, data context, and other property values, are all carried over to the style or template while editing. Therefore, even in editing mode, the control template looks just like it does in context. This makes editing controls much easier visually than it was in previous versions.

For the technically minded you can edit Styles and Templates that target abstract types or types without a default constructor. Also, any XAML file that derives from such a type can be edited.

Visual states
Common WPF 4 controls are state-aware
When you create or modify a template for many common WPF 4 controls, the States panel is populated with a list of states that are ready for you to design. This is because the following WPF 4 controls are designed to work natively with the Visual State Manager, and they show the States they work with:

•Button
•CalendarButton
•CalendarDayButton
•CalendarItem
•CheckBox
•ComboBox
•ComboBoxItem
•Control
•DataGrid
•DataGridCell
•DataGridColumnHeader
•DataGridRow
•DataGridRowHeader
•DatePicker
•DatePickerTextBox
•Expander
•GridSplitter
•GridViewColumnHeader
•ListBoxItem
•PasswordBox
•ProgressBar
•RadioButton
•RichTextBox
•RepeatButton
•ScrollBar
•Slider
•TabControl
•TabItem
•TextBox
•Thumb
•ToggleButton
•ToolTip
•TreeViewItem
Transitions for pixel-shader effects
You can use pixel-shader effects during state transitions. Just pick an effect as you would pick an easing function, and set its properties. The effect will perform the transition from one state to another. Examples include reveal, wipe, pixelate, ripple, and swirl. This enables you to quickly add another layer of subtlety to your UI designs.

Transitions for entering and exiting ListBox items
You can animate adding items to and removing items from a ListBox, and you can control all the details of those transitions, including easing. If you create your own ItemsControl, you can define these same states on your item container type. If you also apply a FluidMoveBehavior behavior to the items panel of the ListBox, existing items will smoothly make room for entering new items.

View and ViewModel support
Expression Blend offers new sample data, behaviors, and project templates to support the Views and ViewModels.

Using Views and ViewModels is a way to structure a Silverlight or WPF application so that user interface (UI) objects are as decoupled as possible from the application's data and behavior. This makes it easier for design tasks and development tasks to be performed independently and without breaking each other. Essentially, your UI is the View. You bind objects in the View to properties and commands of the ViewModel. The View can also call methods on the ViewModel.

Interactivity
Using Behaviors you can add interactivity to your applications, without having to write code. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and other Behaviors.

Behaviors can be selected from the Assets panel, but developers have a rich API that they can use to create their own triggers, actions, and behaviors for use in Silverlight and WPF projects.

You can find more information about creating your own Behaviors in the Expression Blend SDK documentation available on the Help menu.

New Behaviors
Expression Blend includes the new TranslateZoomRotateBehavior multi-touch Behavior, and a PanningItems control that you can use to scroll between items by using touch. Expression Blend also has a new trigger that responds to a frame change or the pausing or completion of a SketchFlow animation, called the SketchFlowAnimationTrigger. Expression Blend has new sets of Behaviors for dragging items between list boxes, for modifying menu navigation, and for preserving screen states, such as SetDataStoreValueAction and DataStoreChangedTrigger.

An exciting enhancement has been made to the FluidMoveBehavior: if you apply it to different views of the same data item, when the item moves from one view to another (for example, from a list view to a details view), it fluidly animates the transition between the two views.

New Behaviors for use with applications that use the Model-View-ViewModel pattern include the following: CallMethodAction, InvokeCommandAction, and DataStateBehavior. You can use these Behaviors to invoke behavior on your ViewModels, or to respond to changes to their properties.

Conditional Behaviors and the data store
You can now build conditional logic into your prototypes and production applications without the need to write code. In fact any action can be associated with a set of conditions that must be met in order to execute the action. The new data store feature enables application variables, such as the current user's role, for example, can be read from and written to so that, effectively, different parts of your application can communicate via this shared state.

New behavior components introduced as part of this feature include the conditions editor that appears in the Properties panel for every action, a SetDataStoreValueAction action that allows you to manipulate values in your data store, and a DataStoreChangedTrigger trigger that fires whenever a chosen property inside the data store is changed.

Data and resources
Expression Blend makes it easy to prototype, build, and test data-connected applications even when run-time data and resources are not available.

Design-time data from CLR types
In addition to being able to create sample data based on XML, you can create design-time sample data from your CLR types. Even if a type has no public constructor, or if it has properties with no public setter, it can still be made into design-time sample data with the Create Sample Data From Class command in the Data panel.

The Data panel provides a view of the DataContext of an object, whether design-time or run-time, and lets you drag properties, commands, and methods onto the design surface to bind your UI to them.

Design-time ViewModels
If your application uses Views and ViewModels pattern, you can use the Create Sample Data From Class command in the Data panel to generate design-time sample ViewModels so that you can continue to design your application in the context of this data.

Design-time resources
Sometimes, resources that will resolve at run time don't resolve at design time. In these cases, you can pick a resource dictionary to use at design-time while you're designing your application.

Easier element-to-element property binding
It's easier than ever to use the Advanced options in the Properties panel to bind element properties together.

Animation
Easing functions in WPF 4
Easing functions previously only available in Silverlight projects can now be taken advantage in a WPF 4 project. You can even write custom easing functions and use them in your projects.

No modifier key needed for marquee selection of keyframes
You can marquee-select keyframes in the Timeline more easily with the mouse. Previously, you had to hold down the CTRL key while dragging marquee-selected keyframes.

XAML cleanliness
Like you we try to keep our code concise. Expression Blend generates less XAML with respect to animations and animation-related properties.

Projects
Databound project template
Expression Blend includes a new project template that offers a basic starting point for View and ViewModel applications.

Run project with CTRL+F5
To improve consistency with Visual Studio, you can now invoke the Run Project command by pressing either CTRL+F5 or F5.

Zip support for samples and templates
Expression Blend now supports reading item templates, project templates, and samples from Zip files, in addition to reading them from loose files and folders. This makes it even easier to share these elements between different users.

Source

MVVM For Beginners

I have just started my work using MVVM ( Model-View-View Model ) pattern and many of you may know about this pattern as well.The powerful data-binding support in WPF framework provides the basis for MVVM pattern. In this post I will show you simple example to display data in the view part using the view model. Here is explanation of Model, view and ViewModel.

Model

The Model is defined as in MVC; it is the data or business logic, completely UI independent, that stores the state and does the processing of the problem domain. The Model is written in code or is represented by pure data encoded in relational tables or XML.

View

A View is defined in XAML and should not have any logic in the code-behind. It binds to the view-model by only using data binding.In simple examples, the View is data bound directly to the Model. Parts of the Model are simply displayed in the view by one-way data binding. Other parts of the model can be edited by directly binding controls two-way to the data.

ViewModel

The term means “Model of a View”, and can be thought of as abstraction of the view, but it also provides a specialization of the Model that the View can use for data-binding. In this latter role the ViewModel contains data-transformers that convert Model types into View types, and it contains Commands the View can use to interact with the Model.
The ViewModel exposes public properties, commands, and abstractions. The ViewModel has been likened to a conceptual state of the data as opposed to the real state of the data in the Model.

Let us start with our example of the MVVM which is simple one. I have created three folder in my project with names Model, view and viewModel so that I have Placed my model class in the model folder and View in the view folder and viewModel class in the viewModel folder. As I have added class in the respective folder the namespace is append with view, model and viewModel.In the model folder I have on one class with the name of customer which define the properties of the customer like user ID, first name, last name, email ID, contact number and date of birth. The customer class is inherit from the INotifyPropertyChanged interface which is used to notify whenever there is any changed in the property value which I will show you later. In the View Model folder I have one class names CustomerViewModel which contains property for the customer class in the model folder and also a viewTitle property.

View:

Let us start to design the view of the application. Below is the xaml of the view I have created for the example code.

<Window.DataContext >
<local:CustomerViewModal> </local:CustomerViewModal>
</Window.DataContext>
<GroupBox  Header="{Binding Path=ViewTitle}">
<Grid DataContext="{Binding Path=Customers}">
<Grid.RowDefinitions >
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="75*"/>
</Grid.ColumnDefinitions>

<TextBlock Text="User ID :" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="1" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=UserID, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Frist Name :" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="2" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=FirstName, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Last Name :" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="3" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=LastName,Mode=TwoWay}"> </TextBox>

<TextBlock Text="Email Address :" Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="4" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=EmailID,Mode=TwoWay}"> </TextBox>

<TextBlock Text="Contact No. :" Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<TextBox   Grid.Row="5" Grid.Column="1" Margin="2,3,2,3" Text="{Binding Path=ContactNumber, Mode=TwoWay}"> </TextBox>

<TextBlock Text="Date Of Birth :" Grid.Row="6" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0"> </TextBlock>
<my:DatePicker Grid.Column="1" Grid.Row="6" Margin="2,3,2,3"  Text="{Binding Path=DateOfBirth, Mode=TwoWay}" />

<Button Content="Save" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,80,3" HorizontalAlignment="Right"> </Button>
<Button Content="Close" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,-1,3" HorizontalAlignment="Right" > </Button>

</Grid>
</GroupBox>

And here is the output of the design.Here I have used the used two controls one is the textBox and the second one is the DatePicker control and two buttons controls which are not working in this example. I will try to discuss the working of the buttons in the MVVM pattern.

Now Let us discuss the view in depth.If you see the xaml for each of the textBox then you will see that I have bind each of the textbox text property, and I have used the two way binding mode which mean to notify the any change in the value of the property from the view to the view model or model. If you don't have any idea about the binding then here is some detail about the binding mode.The Mode (which is of type BindingMode) is an enumeration with three possible values as

OneTime:

Binding sets the target and then the binding is completed. This is great for displaying data that rarely or never changes

OneWay:

Binding sets the target and keeps it up to date as the source changes. This is great for displaying data that the user is not permitted to change.

TwoWay:
Binding sets the target and keeps the target up to date as the source changes and keeps the source up to date as the user changes the target or changes something else in the application that will cause your application to change the source.

As I have set the binding mode to twoWay so if any change in the the value of the property is done in the view will be send back to the data source as well.

ViewModel

In the viewmodel I have class with only two properties one for the ViewTitle and the second one is the Customers which is of type Customer the class defined in the model. And I have Initialize the both the properties in the constructor of the viewModel class. I have also bind the Customers class to the grid which hold the textBox and the date picker control so that the Properties of the Customer can be bind to the text properties of the textBox.

Model:

In the Model class I have only defined the properties of the Customer which is inherits from the INotifyPropertyChanged interface.This interface requires only one thing: that the class have an event of type PropertyChangedEventHandler (named PropertyChanged by convention), Implicit in supporting binding, however, is that your business object must, by convention, fire the PropertyChanged event when any property that is tied to a UI control is changed (and the most common way to change it, is to set its value). I have also raise the RaisePropertyChanged event for the first name and last name. whenever values of these two properties changes in the view they will be notify in the model as well.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!