Click here to Skip to main content
15,896,915 members
Articles / Desktop Programming / WPF

MVVM Pattern Made Simple

Rate me:
Please Sign up or sign in to vote.
4.87/5 (183 votes)
24 Sep 2014CPOL18 min read 714K   23.8K   480  
This article gives an overview of MVVM pattern, its usage and advantages
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                    xmlns:se="http://schemas.microsoft.com/expression/2010/interactions"
                    xmlns:this="clr-namespace:MVVMSample">
    <DataTemplate x:Key="StudentView"
                  DataType="this:StudentViewModel">
        <StackPanel Orientation="Horizontal">
            <Button x:Name="DeleteStudentButton"
                    Content="X"
                    Foreground="Red"
                    Width="25"
                    Height="25"
                    Margin="0,0,20,0">
                <i:Interaction.Triggers>
                    <i:EventTrigger SourceObject="{Binding ElementName=DeleteStudentButton}"
                                    EventName="Click">
                        <se:CallMethodAction MethodName="DeleteStudentAction"
                                             TargetObject="{Binding DataContext, ElementName=DeleteStudentButton}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <TextBox Text="{Binding FirstName}"
                       Margin="0,0,20,0" />
            <TextBox Text="{Binding LastName}"
                     Margin="0,0,20,0" />
            <TextBox Text="{Binding GradePointAverage}" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="StudentListView"
                  DataType="this:StudentListViewModel">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Center">
                <Button x:Name="GetStudentsButton"
                        Content="Get Students"
                        Width="100"
                        Height="25"
                        Margin="0,0,20,0">
                    <i:Interaction.Triggers>
                        <i:EventTrigger SourceObject="{Binding ElementName=GetStudentsButton}"
                                        EventName="Click">
                            <se:CallMethodAction MethodName="GetStudentsAction"
                                                 TargetObject="{Binding DataContext, ElementName=GetStudentsButton}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
                <Button x:Name="SaveStudentsButton"
                        Content="Save Students"
                        Width="100"
                        Height="25"
                        Margin="0,0,20,0"
                        IsEnabled="{Binding IsSaveStudentsActionEnabled}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger SourceObject="{Binding ElementName=SaveStudentsButton}"
                                        EventName="Click">
                            <se:CallMethodAction MethodName="SaveStudentsAction"
                                                 TargetObject="{Binding DataContext, ElementName=SaveStudentsButton}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
                <Button x:Name="AddStudentButton"
                        Content="Add New Student"
                        Width="130"
                        Height="25"
                        Margin="0,0,20,0"
                        IsEnabled="{Binding IsAddStudentsActionEnabled}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger SourceObject="{Binding ElementName=AddStudentButton}"
                                        EventName="Click">
                            <se:CallMethodAction MethodName="AddStudentAction"
                                                 TargetObject="{Binding DataContext, ElementName=AddStudentButton}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>

            <ListView x:Name="TheStudentsDisplay"
                      ItemsSource="{Binding TheStudents}"
                      ItemTemplate="{StaticResource StudentView}"
                      Grid.Row="1" />
        </Grid>
    </DataTemplate>
</ResourceDictionary>

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
Architect AWebPros
United States United States
I am a software architect and a developer with great passion for new engineering solutions and finding and applying design patterns.

I am passionate about learning new ways of building software and sharing my knowledge with others.

I worked with many various languages including C#, Java and C++.

I fell in love with WPF (and later Silverlight) at first sight. After Microsoft killed Silverlight, I was distraught until I found Avalonia - a great multiplatform package for building UI on Windows, Linux, Mac as well as within browsers (using WASM) and for mobile platforms.

I have my Ph.D. from RPI.

here is my linkedin profile

Comments and Discussions