Okra App Framework

Updated Wiki: The Okra App Framework Bootstrapper

AndyWilkinson — Mon, 13 May 2013 12:17:19 GMT

The Okra App Framework Bootstrapper

All applications built using the Okra App Framework include a bootstrapper class whose responsibility it is to initialise any services required (both framework services and custom services) and to coordinate activation of the application with the framework.

The good news is that the framework provides a base implementation OkraBootstrapper that provides most of this functionality. Therefore for many applications the bootstrapper will simply be defined as,

public class AppBootstrapper : OkraBootstrapper
{
}

Adding additional services

Since by default the Okra App Framework uses MEF for composition of the application, you can add additional services to the bootstrapper as MEF imports. These will be often be services provided by the framework, however custom services may be included in the same manner. In either case the framework will ensure that all services are created prior to the first application activation being processed.

For example, to add search functionality to an application you would import the ISearchManager service in the bootstrapper as follows,

public class AppBootstrapper : OkraBootstrapper
{
    [Import]
    public ISearchManager SearchManager { get; set; }
}

Initializing services

The bootstrapper is also the best place to perform any service initialization required prior to activation of the application. The default OkraBootstrapper base class provides a SetupServices() method that can be overriden for this purpose.

For example to specify a non-default search page name you would do this as follows,

public class AppBootstrapper : OkraBootstrapper
{
    [Import]
    public ISearchManager SearchManager { get; set; }

    protected override void SetupServices()
    {
        SearchManager.SearchPageName = "MySearchPage";
    }
}

Updated Wiki: The Okra App Framework Bootstrapper

AndyWilkinson — Mon, 13 May 2013 12:10:19 GMT

The Okra App Framework Bootstrapper

public class AppBootstrapper : OkraBootstrapper
{
}

Activating additional services

public class AppBootstrapper : OkraBootstrapper
{
    [Import]
    public ISearchManager SearchManager { get; set; }
}

Updated Wiki: Documentation

AndyWilkinson — Mon, 13 May 2013 11:51:51 GMT

Okra App Framework Documentation

The Okra App Framework supports the development of Windows Store applications, in particular those implementing the MVVM pattern.

Note that the documentation is currently in active progress with the aim of completion over the next few weeks - where the CodePlex documentation is not available a "see here" link may redirect to a blog post on the topic. Whilst some features will have changed slightly this should get you started whilst the documentation is completed.

Getting started

Okra Navigation Framework

First steps with navigation,
- Defining pages and view-models
- Convention based page and view-model discovery
- Creating pages with the Visual Studio templates
- Navigation between pages
- Navigation using ICommand
- Passing arguments to pages
- State persistence - making your app "always alive" (see here)
Contract support
- Adding a search page (see here)
- Adding a settings pane (see here and here)
- Sharing items with other applications
- Implementing a share target
Advanced navigation scenarios
- Shell based navigation (see here)
- Multiple navigation sections

Okra Data Framework

Introduction to data lists (see here)
How to use data lists (see here)
Data list sources (attaching to sources of data)
- SimpleDataListSource (see here)
- PagedDataListSource (see here)
Data lists (displaying data in your UI)
- VirtualizingDataList (see here)

Samples

Okra Shell Sample - This sample code demonstrates how to use the Okra App Framework to navigate between pages within a larger shell frame.
Okra Convention Sample - This sample code demonstrates how to use a convention based approach when defining pages and view-models with the Okra App Framework.
Okra Search Sample - This sample code demonstrates how to use the search contract support within the Okra App Framework.
Okra Settings Sample - This sample code demonstrates how to use the settings pane support within the Okra App Framework.

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 17:00:34 GMT

Okra Cookbook - Creating a Windows Store app

In this tutorial you will create a new Windows Store MVVM application using the Okra App Framework templates for Visual Studio. You will familiarise yourself with the project structure, then customise the branding and UI. In addition you will load recipe data from an included data source and use it to replace the placeholder content.

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

You will notice the project template has added a number of folders and files to the solution, many of which will be familiar to you if you have used any of the standard Visual Studio Windows Store templates.

The folders include,

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

If you open the Pages > Home folder and select the file "HomePage.xaml" you will see a typical XAML designed user interface. Note that because we have some design-time data available you can get a good idea of how the resulting user interface will be displayed.

If you open the "HomePage.xaml.cs" code-behind file you will see that very little logic is present compared to the standard Visual Studio templates. Only an ItemClick handler is included that forwards any click events onto the underlying view-model (this is required as Windows Store applications do not currently support behaviours). Also note the [PageExport("Home")] attribute applied to the class that tells the Okra App Framework that this is the home page of the application.

If you open the "HomeViewModel.cs" file you will see a number of items including,

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

If you open the "HomeDesignData.cs" file you find a simple class which derives from HomeViewModel. This data will be used in the Visual Studio designer at design-time to allow you to see how your application will look without requiring any real data (which may involve a call to a database or web service). In this case we simply set the Groups property to some sample data generated by the DesignDataSource class.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

Now the project will have the correct branding, splash screen and tile icon. However, we are still displaying the sample data provided with the project template. Next we will update the project to display recipe data.

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "HomePage.xaml.cs", "GroupDetailViewModel.cs", "GroupDetailPage.xaml.cs" and "ItemDetailViewModel.cs" as follows (Note that if you press F6 to build the application any references you have missed will be easily located as build errors)

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

4. Add a new folder to the project named Images and copy the files from the Images folder of the tutorial assets (downloadable from here). This is easiest to accomplish by dragging the files from Windows Explorer and dropping them onto the newly created Images folder.

5. Next we need to load the recipe data at application start-up. This will need to be completed before the first page is displayed so open the "AppBootstrapper.cs" file.

6. Add the following using statements to the start of the file.

using OkraCookbook.Data;
using Windows.ApplicationModel.Activation;
using Windows.ApplicationModel.Core;

7. Add the following overridden method to the AppBootstrapper class

protected async override void OnActivated(CoreApplicationView sender, IActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        await RecipeDataSource.LoadLocalDataAsync();

    base.OnActivated(sender, args);
}

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 17:00:09 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "HomePage.xaml.cs", "GroupDetailViewModel.cs", "GroupDetailPage.xaml.cs" and "ItemDetailViewModel.cs" as follows (Note that if you press F6 to build the application any references you have missed will be easily located as build errors)

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

4. Add a new folder to the project named Images and copy the files from the Images folder of the tutorial assets (downloadable from here). This is easiest to accomplish by dragging the files from Windows Explorer and dropping them onto the newly created Images folder.

5. Next we need to load the recipe data at application start-up. This will need to be completed before the first page is displayed so open the "AppBootstrapper.cs" file.

6. Add the following using statements to the start of the file.

using OkraCookbook.Data;
using Windows.ApplicationModel.Activation;
using Windows.ApplicationModel.Core;

6. Add the following overridden method to the AppBootstrapper class

protected async override void OnActivated(CoreApplicationView sender, IActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        await RecipeDataSource.LoadLocalDataAsync();

    base.OnActivated(sender, args);
}

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:59:13 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "HomePage.xaml.cs", "GroupDetailViewModel.cs", "GroupDetailPage.xaml.cs" and "ItemDetailViewModel.cs" as follows (Note that if you press F6 to build the application any references you have missed will be easily located as build errors)

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

4. Add a new folder to the project named Images and copy the files from the Images folder of the tutorial assets (downloadable from here). This is easiest to accomplish by dragging the files from Windows Explorer and dropping them onto the newly created Images folder.

5. Next we need to load the recipe data at application start-up. This will need to be completed before the first page is displayed so open the "AppBootstrapper.cs" file.

6. Add the following using statements to the start of the file.

using OkraCookbook.Data;
using Windows.ApplicationModel.Activation;
using Windows.ApplicationModel.Core;

6. Add the following overridden method to the AppBootstrapper class

protected async override void OnActivated(CoreApplicationView sender, IActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        await LoadLocalDataAsync();

    base.OnActivated(sender, args);
}

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:56:14 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "HomePage.xaml.cs", "GroupDetailViewModel.cs", "GroupDetailPage.xaml.cs" and "ItemDetailViewModel.cs" as follows (Note that if you press F6 to build the application any references you have missed will be easily located as build errors)

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

4. Add a new folder to the project named Images and copy the files from the Images folder of the tutorial assets (downloadable from here). This is easiest to accomplish by dragging the files from Windows Explorer and dropping them onto the newly created Images folder.

5. Next we need to load the recipe data at application start-up. This will need to be completed before the first page is displayed so open the "AppBootstrapper.cs" file.

6. Add the following overridden method to the AppBootstrapper class

protected async override void OnActivated(Windows.ApplicationModel.Core.CoreApplicationView sender, Windows.ApplicationModel.Activation.IActivatedEventArgs args)
{
    if (args.PreviousExecutionState != Windows.ApplicationModel.Activation.ApplicationExecutionState.Running)
        await RecipeDataSource.LoadLocalDataAsync();

    base.OnActivated(sender, args);
}

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:49:39 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "HomePage.xaml.cs", "GroupDetailViewModel.cs", "GroupDetailPage.xaml.cs" and "ItemDetailViewModel.cs" as follows,

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:47:40 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample data in "HomeViewModel.cs", "GroupDetailViewModel.cs" and "ItemDetailViewModel.cs" as follows,

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:47:22 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively

DesignDataSource.cs - Contains a class that can generate sample data for display at design-time

Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample in "HomeViewModel.cs", "GroupDetailViewModel.cs" and "ItemDetailViewModel.cs" as follows,

Replace SampleDataSource with RecipeDataSource

Replace SampleDataGroup with RecipeDataGroup

Replace SampleDataItem with RecipeDataItem

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:46:04 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Loading recipe data

1. Open the Data folder from the solution explorer and delete the "SampleDataSource.cs" and "DesignDataSource.cs" files.

2. Right-click the Data folder and use Add > Existing Item to add the files from the Data folder of the tutorial assets (downloadable from here). The items added are,

RecipeDataSource.cs - Contains the data models and data source for the recipe data. The RecipeDataSource class includes methods named LoadLocalDataAsync() and LoadRemoteDataAsync() that load recipe data from a local file or a Windows Azure web service respectively
DesignDataSource.cs - Contains a class that can generate sample data for display at design-time
Recipes.txt - A text file containing JSON formatted data for use by the RecipeDataSource class

3. Replace all references to sample in "HomeViewModel.cs", "GroupDetailViewModel.cs" and "ItemDetailViewModel.cs" as follows,

Replace SampleDataSource with RecipeDataSource
Replace SampleDataGroup with RecipeDataGroup
Replace SampleDataItem with RecipeDataItem

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:33:29 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:33:05 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

{code:xml}

<x:String x:Key="AppName">Okra Cookbook</x:String>

{code:xml}

3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.

4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"

5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:32:38 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page and branding

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook", as well as updating the branding images and text.

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>
3. In the Visual Studio solution explorer, right-click the Assets folder and use Add > Existing Item to add the images from the Branding folder of the tutorial assets (downloadable from here), overwriting the existing files.
4. Open the "Package.appxmanifest" file and change the application's display name to "Okra Cookbook" and description to "Okra Cookbook Application"
5. Also select the Wide Logo item from the Visual Assets section and set this to "Assets\WideLogo.png".

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:19:12 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customising the start page

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook".

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:18:32 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A [ViewModelExport("Home")] attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the group header buttons to directly data-bind to the NavigateToGroupDetail method without requiring any code in the code-behind file.

Customise the start page

You will note that the home page currently is titled "OkraCookbook". We will change that to read "Okra Cookbook".

1. Open the "App.xaml" file

2. Change the string resource named "AppName" to,

<x:String x:Key="AppName">Okra Cookbook</x:String>

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:11:52 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

A {[}ViewModelExport("Home"){]} attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:11:21 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

If you open the Pages > Home folder and select the file "HomePage.xaml" you will see a typical XAML designed user interface. Note that because we have some design-time data available you can get a good idea of how the resulting user interface will be displayed.

If you open the "HomePage.xaml.cs" code-behind file you will see that very little logic is present compared to the standard Visual Studio templates. Only an ItemClick handler is included that forwards any click events onto the underlying view-model (this is required as Windows Store applications do not currently support behaviours). Also note the {[}PageExport("Home"){]} attribute applied to the class that tells the Okra App Framework that this is the home page of the application.

If you open the "HomeViewModel.cs" file you will see a number of items,

A {[}ViewModelExport("Home"){]} attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 16:10:31 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.

Exploring the project template

Assets - This contains the images used to brand the application.
Common - This contains a number of common files used for Windows Store XAML development including base classes, value converters and style resources.
Data - This contains a "SampleDataSource.cs" file with the data source used for the placeholder data when you run the application. In addition a "DesignDataSource.cs" file contains classes for generating design-time data to aid with designing the user interface of the application.
Pages - This folder contains a number of subfolders, one for each of the pages within the application (Home, GroupDetail & ItemDetail). Each of these contain a XAML page, a view-model and some design-time data.
App.xaml - This holds any application wide resources.
AppBootstrapper.cs - This is a simple bootstrapper to which we will add further services at a later stage.

If you open the Pages > Home folder and select the file "HomePage.xaml" you will see a typical XAML designed user interface. Note that because we have some design-time data available you can get a good idea of how the resulting user interface will be displayed.

If you open the "HomePage.xaml.cs" code-behind file you will see that very little logic is present compared to the standard Visual Studio templates. Only an ItemClick handler is included that forwards any click events onto the underlying view-model (this is required as Windows Store applications do not currently support behaviours). Also note the PageExport("Home") attribute applied to the class that tells the Okra App Framework that this is the home page of the application.

If you open the "HomeViewModel.cs" file you will see a number of items,

A ViewModelExport("Home") attribute that tells the Okra App Framework that this is the view-model to use for the home page of the application. When the application is run this will be automatically associated with the respective XAML file.
A number of properties that are data-bound from the XAML page.
A NavigateToGroupDetailCommand property that allows the

Updated Wiki: Okra Cookbook - Creating a Windows Store app

AndyWilkinson — Sun, 12 May 2013 15:39:54 GMT

Okra Cookbook - Creating a Windows Store app

Creating a new MVVM Windows Store application

1. Start Visual Studio 2012 and download the Okra App Framework Visual Studio Extensions if you have not already installed these. Details on how to install the extensions are available here.

2. From the File > New project menu create a new Visual C# project named "OkraCookbook". Be sure to select the Okra Grid App (XAML) project template from the Visual C# / OkraAppFramework category.

3. Start debugging by pressing F5 and explore the application, clicking on the group headers and items to view the various pages provided by the template. You will note that the application is identical in behaviour to the default Visual Studio Grid App template.