Scaffold your Windows Phone Application with WpScaffolding

What is WpScaffolding
WpScaffolding is the scaffolding package for Windows Phone. It is analogue of the MvcScaffolding in ASP.NET MVC. WpScaffolding is using core T4Scaffolding package to execute scaffolders. WpScaffolding generates full set of MVVM classes of your data model that perform basic CRUD operations. Current version supports in memory database SqlCE. The Windows Phone scaffolding package is usefull in the following scenarios:

If you are new to Windows Phone programming and you dont where to start. You can generate your MVVM structured application and investigate the code. If your application requires repeatedly creating similar files and classes, because WpScaffolding is based on T4Scaffolding and you can define your own templates and scaffolders no matter how complex they are. You want to jump start your last mobile application idea

Installation
Instalation of WpScaffolding package is available through Nuget Package Manager and you can find it at http://nuget.org.: Install-Package WpScaffolding

First Windows Phone application with WpScaffolding

I will show you how to build a simple Notes application that can Create, Update, List and Show details for notes. 1. Create new Windows Phone Application in Visual Studio

2. Open Nuget package manager and install WpScaffolding package PM> Install-Package WpScaffolding

You will see that Helpers and Images folders are added to the project:

Helpers folder is using common classes that are used for the implementation of the MVVM pattern: - RelayCommand and RelayCommand<T> classes that implement ICommand for using commands in the ViewModel and bind it to the view - ViewModelBase that is a base ViewModel class that implement INotifyPropertyChanged. Model classes must implement the INotifyPropertyChanged interface for binding to the View and ViewModelBase is used for base class. Images folder contains images that will be used in the views application bar 3. Set image files Build Action in the Images folder to Content so they can be loaded at runtime:

4. Add new Models folder to the project 5. Add reference to System.Data.Linq the assembly for SQLCE

5. Add new model in the Models folder a Note class that contains the note fields. As our model is used in the ViewModel we should implement INotifyPropertyChanged or the ViewModelBase class included in WpScaffolding initial package.
1: using System.Data.Linq.Mapping; 2: using WpScaffolding.ViewModels; 3: 4: namespace NotesApplication.Models 5: { 6: [Table(Name = "Notes")] 7: public class Note : ViewModelBase 8: { 9: private int _noteId; 10: [Column(IsPrimaryKey = true, IsDbGenerated = true)] 11: public int NoteId 12: { 13: get 14: { 15: return _noteId; 16: } 17: set 18: { 19: if (_noteId == value) 20: { 21: return; 22: } 23: _noteId = value; 24: RaisePropertyChanged("NoteId"); 25: } 26: } 27: 28: private string _name; 29: [Column] 30: public string Name 31: { 32: get 33: { 34: return _name; 35: } 36: set 37: {

38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: }

if (_name == value) { return; } _name = value; RaisePropertyChanged("Name"); } } private string _text; [Column] public string Text { get { return _text; } set { if (_text == value) { return; } _text = value; RaisePropertyChanged("Text"); } } }

We should customize our model and properties with the SqlCE attributes to use Windows Phone database current version of WpScaffolding supports only using WP local database. 6. Scaffold your application with the created Note model using Visual Studio package console: PM> Scaffold MVVM Note Lets see what WpScaffolding did with our application: Added database context Models\NotesApplicationContext.cs our database SQL CE context Added Notes to database context NotesApplication.Models.NotesApplicationContext database context Notes collection Added ViewModel ViewModels\NotesListViewModel.cs ViewModel with Notes entities listing functionality Added ViewModel ViewModels\NoteDetailsViewModel.cs ViewModel with single Note entity details info Added ViewModel ViewModels\NoteCreateOrEditViewModel.cs ViewModel with Create and Edit operations for adding and editing Note entities Added View Views\NotesListView.xaml View with Notes list vizualization bound to NotesListViewModel Added View CodeBehind Views\NotesListView.xaml.cs Notes list view code behind Added View Views\NoteDetailsView.xaml View with Note entity details info bound to Note details view model Added View CodeBehind Views\NoteDetailsView.xaml.cs Note details view code behind

Added View Views\NoteCreateOrEditViewControl.xaml Note create or edit control used with Note create or edit viewmodel Added View CodeBehind Views\NoteCreateOrEditViewControl.xaml.cs view code behind Added View Views\NoteCreateView.xaml Page that contains NoteCreateOrEdit view control and Create functionality when the Note entity is new Added View CodeBehind Views\NoteCreateView.xaml.cs view code behind Added View Views\NoteEditView.xaml Page that contains NoteCreateOrEdit view control when the Note entity is edited Added View CodeBehind Views\NoteEditView.xaml.cs view code behind WpScaffolding give us a clue what to do for running and using our app as easy as possible: TO DO: Put the following HyperlinkButton on the MainPage to easily navigate to Notes list page <HyperlinkButton Content=Notes list NavigateUri=/Views/NotesListView.xaml/>

7. Add the Notes list hyperlink to the MainPage and run the application: <!ContentPanel place additional content here>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <HyperlinkButton Content="Notes list" NavigateUri="/Views/NotesListView.xaml"/> </Grid> 8. Run NotesApplication and see how app is organizaed - Screen with the MainPage and our Payments list:

- list entered notes:

-Create new note

- Edit selected item:

-Note details:

- Delete features:

Here is the generated NotesApplication Source code More about WpScaffolding: http://wpscaffolding.codeplex.com/