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 don’t 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
Instalation of WpScaffolding package is available through Nuget Package Manager and you can find it at http://nuget.org.:
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.
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:
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:
– Delete features:
Here is the generated NotesApplication Source code
More about WpScaffolding: http://wpscaffolding.codeplex.com/