WinRT, Xaml: Using Contoso Cookbook (HoL) as a starting point

I have two tables with master-detail relationship I want to deploy in a Win8 store app.

From Hands-on labs for Windows 8 – also called Contoso Cookbook, I can get a ready app created either in Js/Html or C#/Xaml.
(For a while you can also sign up for HoL Online)

Will that be difficult to change for my requirements?


My initial idea is to

  1. Use Lab 6 as the base.
  2. Rename the app and change images.
  3. Get some hardcoded sample data by letting the app target a copy of SampleDataSource.cs instead of RecipeDataSource.cs.
  4. The Callisto menu (currently v1.2.1) does not show of some reason (v1.1.0 reffed by the sampl). I don’t wan’t it anyway. Replace menu with buttons in the appbar.
  5. Change the Views and the layout. Snapshot for new starting point.
  6. Add data to a database like SQLlite.
  7. Let the app target a copy of RecipeDataSource.cs using EF5.0 for access to DB. Snapshot for new starting point.
  8. Refactor to MVVM light and Obelisk. Add UnitTests. Snapshot for new starting point.
  9. Create a OData web service to upload data to. I want to make such an OData service in Drupal.
  10. Make the WinRT app be client to the OData service. Snapshot for new starting point.

Implementation Steps

  1. Download and unpack HoL.
  2. Build.
    • In my envir it complained about missing Callisto v. 1.1.0.
    • Remove the reference.
    • Open Tools – Library Package Mgr – Package Mgr Console
    • PM> Install-Package Callisto
    • Check under references that a ref was added. If not get help here.
    • Build Again.
    • F5 for debugging the app. If all OK then continue – else fix.
  3. Copy the folder \HoL4Win8-ContosoCookbook\cs\Lab 6 – Settings and preferences\Solution\ to \<MyRoot>\ (anywhere you may like).
  4. Rename
    • Rename \Solution\ to \MyApp\ (or whatever  your app should be called).
    • Open \MyApp\ContosoCookbook.sln in Visual Studio – don’t connect to TFS (answer No and then OK).
    • Rename in Solution Explorer Solution from ContosoCookbook to MyApp. Repeat for the project, too.
    • Open Package.appxmanifest. Replace all text ContosoCookbook with MyApp.
    • Do Search/Replace for the whole project from ContosoCookbook to MyApp.
    • Do search in all files for Contoso. It finds three places. Replace by hand to MyApp.
    • Build and test. Close Visual Studio.
    • Delete the old \MyApp\ContosoCookbook.sln file.
    • Rename the folder \MyApp\ContosoCookbook\ to \MyApp\MyApp\
    • Open \MyApp\MyApp\MyApp.csproj in Visual Studio.
    • Save all to regenerate a MyApp.sln. Save it as \MyApp\MyApp.sln
  5. Get a package ID of your own
    • Solution Explorer – Solution – Add – new Project – C# – Windows Store – Blank App – App1
    • Open \MyApp\App1\Package.appxmanifest – Packaging. Copy the Package name (a GUID)
    • Copy the certificate \MyApp\App1\App1_TemporaryKey.pfx to
  6. Give the \MyApp\MyApp\ app the id of the App1 app
    • Open \MyApp\MyApp\Package.appxmanifest – Packaging – Choose Certificate – Configure Ceritificate – Select from file – Select App1_TemporaryKey.pfx – OK
    • Package name: Paste GUID from App1
    • Publisher display name: <e.g. your-one-man-company-name> (This must match a Publisher name you to tell the App Store)
    • Solution Explorer: Delete project App1
    • Delete ContosoCookbook_TemporaryKey.pfx
    • Delete folder \App1\ from under \MyApp\
  7. Replace images
    • Create some images. Tip: Use Metro Studio 2, thenounproject, ImageBot and/or InkScape.
    • Open \MyApp\MyApp\Package.appxmanifest
    • In tab Application UI replace the 4 .png’s with you own
    • In tab Packaging replace the StoreLogo.png with you own
  8. Get some hardcoded sample data
    •  Copy RecipeDataSource.cs to MyAppDataSource.cs.
    • Open MyAppDataSource.cs
    • Search/Replace from RecipeData to MyAppData
    • Search/Replace from Recipe to Itm (case sentisive)
    • Search/Replace from recipe to itm (case sentisive)
    • Copy file \MyApp\Data\Recipes.txt to Itms.txt
    • Search/Replace from RecipeData to MyAppData in all files (except for RecipeDataSource.cs – make it read-only)
    • Now you get data via MyAppDataSource.cs and Itms.txt. Before it was from RecipeDataSource.cs and Recipes.txt.
  9. Since the JSON in Itms.txt is easy to make mistake in, when editing then we want to load hardcoded data from another source with compile time checking.
    • Copy ctor from SampleDataSource.cs to MyAppDataSource.cs (it includes data loading)
    • Rename ctor “public SampleDataSource()” to”private void LoadLocalData()”
    • In LoadLocalData():
      • Search/Replace from SampleData to MyAppData
      • Delete Group 3 to 6 (included)
      • Leave only two items in Group 1
      • Edit the remaining 5 items, so they match the constructor of MyAppDataItem.
        group2.Items.Add(new MyAppDataItem(
                "Item Title: 1",
                "Item Subtitle: 1",
                "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit.",
        group2.Items.Add(new MyAppDataItem(
                "Item Title: 1",
                "Item Shorttitle: 1",
                "directions : Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit.",
                new ObservableCollection<string>(){"2 Carrots",
                    "2 Pears",
                    "Soy souce",
    • Replace content of LoadLocalDataAsync() to only call LoadLocalData();
      // Changed LoadLocalDataAsync()
      public static async Task LoadLocalDataAsync()
       // Keep an async func to be able to keep the signature
       var file = await Package.Current.InstalledLocation.GetFileAsync("Data\\Itms.txt");
       // Call new dataloader
  10. xxx


The End.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: