Click here to Skip to main content
15,885,546 members
Articles / Desktop Programming / WPF

WPF/Silverlight: Step By Step Guide to MVVM

Rate me:
Please Sign up or sign in to vote.
4.66/5 (26 votes)
19 Jul 2011CPOL8 min read 110.6K   5.4K   103  
This article aims to provide basic overview of MVVM design pattern which is very popular amongst WPF/Silverlight application developers. This is a very basic practical tutorial and aims at providing a step by step guide to people who are new to MVVM.
<Window x:Class="MVVMDemo.View.EmployeeListView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:VM="clr-namespace:MVVMDemo.ViewModel"
        xmlns:View="clr-namespace:MVVMDemo.View"
        Title="Employee View" Height="300" Width="820">
    <Window.DataContext>
        <VM:EmployeeListViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="202*" />
            <ColumnDefinition Width="618*" />
        </Grid.ColumnDefinitions>
        <DockPanel LastChildFill="True" Grid.Column="0">
            <Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" HorizontalAlignment="Stretch" Command="{Binding Path=AddEmployeeCommand}" Margin="2,0">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/MVVMDemo;component/images/add.png" Width="16" Height="16"/>
                        <TextBlock Text="Add"/>
                    </StackPanel>
                </Button>
                <Button Grid.Column="1" HorizontalAlignment="Stretch" Command="{Binding Path=RemoveEmployeeCommand}" CommandParameter="{Binding Path=SelectedEmployee.ID}" Margin="2,0">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/MVVMDemo;component/images/remove.png" Width="16" Height="16"/>
                        <TextBlock Text="Delete"/>
                    </StackPanel>    
                </Button>
            </Grid>
            <ListView x:Name="listEmp" ItemsSource="{Binding Employees, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Bottom" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectedValue="{Binding SelectedEmployee, UpdateSourceTrigger=PropertyChanged}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn DisplayMemberBinding="{Binding ID}" Header="ID" Width="70" />
                        <GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name" Width="116"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </DockPanel>
        <View:EmployeeView Grid.Column="1" DataContext="{Binding SelectedEmployee, UpdateSourceTrigger=PropertyChanged}"/>
    </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Barclays Capital
Singapore Singapore
Pradeep Dhawan:
Worked on Prism, Smart Client(SCSF CAB), WPF, WCF, WF, C#, VC++, C and Unix shell scripting.

Blog: http://programmingwpf.blogspot.com

Comments and Discussions