Portable Class Library With Model View View-Model (MVVM)

 Introduction

Currently the MVVM Design Pattern is becoming more powerful every day, because it’s frequently used, either in web applications, Windows applications or tablets and mobiles. People are using this Design Pattern across platforms everywhere.

I think you are familiar with the Model View View-Model (MVVM) Concept. If you are a beginner then I recommended you go through these articles, before starting this article.

1. MVVM-model-view-viewmodel-introduction-part-1
2. MVVM-model-view-viewmodel-introduction-part-2
3. MVVM-model-view-viewmodel-introduction-part-3

In this article I will explore one more cool idea, the Portable Class Library (PCL) with Model View View-Model (MVVM). After an introduction to the PCL,I’ll also provide a good number of PCL Demos in multiple platforms. I have already explained the basic procedure of the Portable Class Library in the .Net Framework. Please go through this link if starting for the first time PCL.

Introduction to Portable Class Library (PCL)

As you know, in a Model View View-Model Design Pattern the View-Model and Model are completly unknown to the view (User Interface). They don’t understand anything about the view, just as for the control that is using the view or what is the nature of the view and so on. Here the view only understands the View-Model Member through the DataContext Dependency Property.

In the preceding image I tried to show the Portable Class Library with a Model View View-Model Design Pattern. You can implement your model and View-Model in the Portable Class Library project in Visual Studio 2012. Then you can create a customized view for multiple platforms. This approach will enable writing a data model and core logic for one location to be used everywhere (WPF, Silverlight, Windows Phone and Windows Store applications) as the preceding shows.

Model View View-Model Support

If you are targeting the .NET Framework 4.5, .NET for Windows Store apps, Silverlight, or Windows Phone 8 for your Portable Class Library project then the following classes are available for implementing the Model View View-Model:

• System.Collections.ObjectModel.ObservableCollection<T> class
• System.Collections.ObjectModel.ReadOnlyObservableCollection<T> class
• System.Collections.Specialized.INotifyCollectionChanged class
• System.Collections.Specialized.NotifyCollectionChangedAction class
• System.Collections.Specialized.NotifyCollectionChangedEventArgs class
• System.Collections.Specialized.NotifyCollectionChangedEventHandler class
• System.ComponentModel.DataErrorsChangedEventArgs class
• System.ComponentModel.INotifyDataErrorInfo class
• System.ComponentModel.INotifyPropertyChanged class
• System.Windows.Input.ICommand class
• All classes in the System.ComponentModel.DataAnnotations namespace

Implementation of Model View View-Model With Portable Class Library (PCL)

To implement the Portable Class Library you need to create a portable Model and Portable Class Library View-Model.

You can create it inside one project or you can create separate models and view-model class libraries. If you create them separatly then you need to add a reference for the portable Model to View-Model and finally the View-Model to the View.

To implement a Model View View-Model I will create a sample demo in four steps. Before these steps follow the basic procedure of a Portable Class Library in .Net. Here is a good example. If you are a beginner then please go to this link

Introduction to Portable Class Library (PCL) then use the following procedure to implement the PCL.

Class library in MVVM

Step 1: Create the PCL Model.

Step 2: Create the PCL View-Model.

Step 3: To access the model data in the View you need to add a Model (PCL) reference in the View-Model

Step 4: Finally add a View Model reference in your View and assign the data context.

Whatever the sample I will explain in this demo, that is already explained but without a Portable Class Library. In this demo I will create a Model and View Model, both Portable Class and then I’ll the View-Model reference to the View and bind the Data Context. My previous sample is here, go through the following links for this.

Datatemplates in XAML

Model

public class Authors  

{  

    public string Name { get; set; }  

    public string Point { get; set; }    

    public string Country { get; set; }  

    public string Image { get; set; }    

    public string Ranks { get; set; }  

    public static ObservableCollection<Authors> GetAuthorsRecord()  

    {  

        ObservableCollection<Authors> AuthorsRecords = new ObservableCollection<Authors>  

        {  

               new Authors{Point="40960",Name="Mahesh Chand",Country="Philadelphia,
               United States",Image="Image/mahesh.png",Ranks="1"},  

               new Authors{Point="18063",Name="Vulpes",Country="United Kingdom",
                Image="Image/b942f9.gif",Ranks="2"},  

               new Authors{Point="12215",Name="Dinesh Beniwal",Country="India",
               Image="Image/dbeniwal321.jpg",Ranks="3"},  

               new Authors{Point="11372",Name="Rohatash  

                  Kumar",Country="India",Image="Image/rohatash.jpg",Ranks="4"},  

               new Authors{Point="11088",Name="Dhananjay Kumar",Country="India",
                Image="Image/dhananjaycoder.png",Ranks="5"},  

               new Authors{Point="10964",Name="Satyapriya Nayak",Country="Bhubaneswar,
               India",Image="Image/satyapriyanayak.jpg",Ranks="6"},  

               new Authors{Point="10850",Name="Vijai Anand",Country="New Jersey, United States",
               Image="Image/anavijai.png",Ranks="7"},  

               new Authors{Point="10391",Name="Abhimanyu K Vatsa",Country="Bokaro Steel City, India",
               Image="Image/abhikumarvatsa.jpg",Ranks="8"},  

               new Authors{Point="8761",Name="Sam Hobbs",Country="Granada Hills, United States",
               Image="Image/SamTomato.jpg",Ranks="9"},  

               new Authors{Point="8512",Name="Suthish Nair",Country="India",
               Image="Image/suthish_nair.jpg",Ranks="10"},  

        };  

        return AuthorsRecords;  

     }  

}  

 
View-Model

The View-Model example shows a simple way to retrieve a collection of data from model details in code, on a Portable Class Library project. In a real app, you would retrieve the data from a source such as a Windows Communication Foundation (WCF) service. You can download the source code also.
 

public ObservableCollection<Authors> _speaker;  

public ObservableCollection<Authors> ListofAuthors  

{  

   Get  

   {  

      return _speaker;  

   }  

   Set  

   {  

      _speaker = value;  

    }  

}  

View

In a .NET Framework 4.5 app, Windows Store app, Silverlight-based app, or Windows Phone 8 app, you can reference the assembly that contains the Model and View Model projects. You then create a View that interacts with the View Model. The following example shows a simplified Windows Presentation Foundation (WPF) app, Windows Phone app, Silverlight or Windows Store app that retrieves and updates data from the View Model.

These same view code I am using every ware on all platform .

<listbox itemssource="{Binding ListofAuthors}" scrollviewer.horizontalscrollbarvisibility="Disabled">              

            <ListBox.ItemTemplate>  

                <DataTemplate>  

                    <StackPanel Orientation="Horizontal">  

                        <Grid Margin="0,5,0,0">  

                            <Grid.ColumnDefinitions>  

                                <ColumnDefinition Width="auto"></ColumnDefinition>  

                                <ColumnDefinition></ColumnDefinition>  

                            </Grid.ColumnDefinitions>  

                            <Image Source="{Binding Image}" Height="80" Width="80" Grid.Column="0"></Imag>  

                            <StackPanel Grid.Column="1" Orientation="Vertical" Width="150" Height="100" >  

                                <TextBlock Text="{Binding Name}" Margin="5,1,0,1"></TextBlock>  

                                <TextBlock Text="{Binding Country}" Margin="5,1,0,1"></TextBlock>  

                                <StackPanel Orientation="Horizontal">  

                                    <TextBlock Text="Ranks #" Margin="5,1,0,1"></TextBlock>  

                                    <TextBlock Text="{Binding Ranks}" Margin="3,1,0,1"></TextBlock>  

                                </StackPanel>  

                                <StackPanel Orientation="Horizontal">  

                                    <TextBlock Text="Point" Margin="5,1,0,1"></TextBlock>  

                                    <TextBlock Text="{Binding Point}" Margin="3,1,0,1"></TextBlock>  

                                </StackPanel>  

                            </StackPanel>  

                        </Grid>  

                    </StackPanel>  

                    <!--<Border BorderBrush="Black"   

              BorderThickness="4"   

              CornerRadius="5"  

              Margin="6">  

                        <Image Source="{Binding image}" Height="80" Width="80" Grid.Column="0"></Image>  

                    </Border>-->  

                </DataTemplate>  

            </ListBox.ItemTemplate>  

 </listbox>
 

In Solution Explorer

I implemented a Portable Class Library on four platforms, WPF, Windows Phone 8,Windows Store app and Silverlight. The structure of the project above and the following project can be pplaced in any platform, you can download it.

Windows Store App (Microsoft Surface Tab app)



Silverlight Application (Web Application)

Windows Phone 8 App (Mobile app)

WPF (Desktop Client Application)

Over all in this article we learned the code reusability concept of a Portable Class Library in the .Net Framework and how to use a Portable Class Library in a Model View View-Model Design Pattern.