Vernon Benele Mwamuka


Architecture (Latin architectura, after the Greek ἀρχιτέκτων – arkhitekton – from ἀρχι “chief” and τέκτων “builder, carpenter, mason”) is both the process and the product of planningdesigning, and constructing buildings and other physical structures. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilisations are often identified with their surviving architectural achievements. WIKIPEDIA

The above definition is a Wikipedia definition and it encompasses some all facets of architecture. Architecture involves much more than just building habitable spaces, one should be able to look at architecture within a certain built environment and read its history. The first picture is Anwga City in Zimbabwe’s capital Harare in Africa, at first glance one would’ve thought that its a building somewhere in Europe or Asia.

In Zimbabwe there are many architects who have made it onto the world stage, the likes of Vernon Benele Mwamuka (the first black architect), still stands out as one of the foremost and most prominent architects Zimbabwe has ever produced. In his architectural portfolio, he has to his name the imposing ZB Life Towers, Construction House, Kopje Plaza, Old Mutual Centre, Four Ways Mall in Johannesburg and Joina City.

Vernon is cited third overall in Africa 

https://talkingdrumsblog.wordpress.com/2015/11/27/best-african-architects/

Vernon is also cited in the top 100 Greatest Zimbabweans 

http://100greatestzimbabweans.blogspot.co.uk/2009/11/vernon-benele-mwamuka-zimbabwes-first.html

Other most significant projects that brought him praise and respect include Africa University (Mutare)

National University of Science & Technology (Bulawayo)

Bulawayo International Airport (later finished by Studio Arts) and a chain of Post Offices strewn across Zimbabwe, all these completed commissions attest to Mwamuka’s creative identityHis works have left a very unique aesthetic impact on the immediate environment of the structures, revitalising the surrounding urban expanse as in the case of the Kopje Plaza (West of Harare). The Kopje Plaza completely changed the Skyline of the Kopje area, where a number of neglected buildings had become an eyesore, and a sign of urban decay.

Not only did the Plaza succeed as a retail and office centre, but it also helped to propel the Kopje area into its phenomenal re-development boom. This, in the years when there was a lot of construction activity.

 

Post to MVC Controller using Ajax


A common requirement is to post data from a MVC view using Ajax rather than the built in Html.BeginForm method. If you place a break point in the CreateEmployee function below you will find that the data has been posted as JSON.

View Model

    1 using System;

    2 using System.ComponentModel.DataAnnotations;

    3

    4 namespace PostViaAjaxApp.Models

    5 {

    6     public class EmployeeViewModel

    7     {

    8         public int Id { get; set; }

    9

   10         [Display(Name = “First Name”)]

   11         [Required(ErrorMessage = “First name is required”)]

   12         public string FirstName { get; set; }

   13

   14         [Display(Name = “Surname”)]

   15         [Required(ErrorMessage = “Surname is required”)]

   16         public string Surname { get; set; }

   17

   18         [Display(Name = “Email address”)]

   19         [Required(ErrorMessage = “Email address is required”)]

   20         [EmailAddress(ErrorMessage = “Invalid email address”)]

   21         public string EmailAddress { get; set; }

   22

   23         [Display(Name = “Is Enabled”)]

   24         public bool IsEnabled { get; set; }

   25

   26         [Display(Name = “Date Created”)]

   27         public DateTime Created { get; set; }

   28

   29         [Required]

   30         [Display(Name = “Date Modified”)]

   31         public DateTime Modified { get; set; }

   32

   33     }

   34 }

Controller

    1 using System.Web.Mvc;

    2 using PostViaAjaxApp.Models;

    3

    4 namespace PostViaAjaxApp.Controllers

    5 {

    6     public class HomeController : Controller

    7     {

    8         public ActionResult Index()

    9         {

   10             var model = new EmployeeViewModel();

   11             model.Id = 1;

   12             model.IsEnabled = true;

   13

   14             return View(model);

   15         }

   16

   17         [AllowAnonymous]

   18         [HttpPost]

   19         public ActionResult CreateEmployee(string id, string firstName, string surname, string email, bool isEnabled)

   20         {

   21             return new EmptyResult();

   22         }

   23     }

   24 }

View

    1 @{

    2     ViewBag.Title = “Index”;

    3 }

    4 @using System.Web.Mvc.Html

    5 @model PostViaAjaxApp.Models.EmployeeViewModel

    6 <h2>Index</h2>

    7

    8 @Styles.Render(“~/Content/css”)

    9 @Scripts.Render(“~/bundles/modernizr”)

   10

   11 <script src=”http://code.jquery.com/jquery-1.11.3.js”></script>

   12

   13 <script type=”text/javascript”>

   14

   15     $(function () {

   16         $(“#PostEmployee”).click(function () {

   17

   18             var id = $(“#Id”).val();

   19             var firstName = $(“#FirstName”).val();

   20             var surname = $(“#Surname”).val();

   21             var isEnabled = $(“#IsEnabled”).val();

   22             var email = $(“#EmailAddress”).val();

   23

   24             $.ajax({

   25                 type: “POST”,

   26                 url: @Url.Action(“CreateEmployee”, “Home”),

   27                 timeout: 5000,

   28                 data: {

   29                     id: id,

   30                     firstName: firstName,

   31                     surname: surname,

   32                     email: email,

   33                     isEnabled: isEnabled

   34                 },

   35                 success: function (data) {

   36                 },

   37                 error: function (xhr, ajaxOptions, thrownError) {

   38                 }

   39             });

   40         });

   41     });

   42

   43 </script>

   44

   45 @*@using (Html.BeginForm((string)ViewBag.FormAction, “Home”))

   46 {*@

   47     @Html.ValidationSummary(true, “Create employee was unsuccessful. Please correct errors and try again.”)

   48

   49     @Html.HiddenFor(model => model.Id)<fieldset>

   50         <legend>New Employee</legend>

   51         <div class=”employeeRow”>

   52             @Html.LabelFor(m => m.FirstName)

   53             @Html.TextBoxFor(m => m.FirstName)

   54         </div>

   55         <div class=”employeeRow”>

   56             @Html.LabelFor(m => m.Surname)

   57             @Html.TextBoxFor(m => m.Surname)

   58         </div>

   59         <div class=”employeeRow”>

   60             @Html.LabelFor(m => m.EmailAddress)

   61             @Html.TextBoxFor(m => m.EmailAddress)

   62         </div>

   63         <div class=”employeeRow”>

   64             @Html.LabelFor(m => m.IsEnabled)

   65             @Html.CheckBoxFor(m => m.IsEnabled)

   66         </div>

   67         <div class=”employeeRow”>

   68             <input type=”submit” value=”Save” id=”PostEmployee” />

   69         </div>

   70     </fieldset>@*

   71 }*@

   72

   73 @Scripts.Render(“~/bundles/jquery”)

   74

   75

   76

   

No matter how far you have gone on the wrong road, turn back!


I worked with a brilliant team of developers on a project some time ago, with a typically geeky calendar that had sayings by notable computer scientists like Edsger W. Dijkstra that was the subject of discussion in our daily stand-ups from time to time.

I was aware of the proverb, but had never really considered it in a software development context. Sometimes one encounters projects large or small that are failing or have indeed failed, or difficulty in trying to solve a technical  or programming obstacle.

“No matter how far you have gone on the wrong road, turn back – Turkish Proverb”

Managing Complexity with a Trilemma


Managing software projects is not an easy task, unfortunately, due to the pervasiveness of software in the modern world, a common mistake is to think of software engineering as easy. As a consultant for some of the largest companies and high street names in the UK, one sometimes encounters projects that have failed or are failing due to complexity, unrealistic expectations and optimistic budgets.

All too often in board or team meetings, developers and their management guesstimate a task will take two weeks and it ends up taking twice as long because project owners and financiers are never furnished with a trilemma.

455px-Project-triangle_svg

This is one of the most important questions people that manage successful projects ask “fast, cheap and good: choose two?”

The modern car is very complex, and features in the expensive range of the modern utilities we are likely to use, consequently, provides an excellent way to compare how commercially successful businesses manage their complexity on a day to day basis. With this complexity in the car, comes a higher probability that problems will arise, because modern cars are complex, failure to maintain components can lead to exorbitant costs down the line, so car manufacturers have service and maintenance plans for the lifetime of a vehicle. There is an important lesson software development teams and IT managers can learn from car dealerships service departments about managing their own projects, and that is if you choose to drive into your dealership without notice, and request that they address a problem on your vehicle immediately, they will happily do this, but it will cost you substantially more money (twice or even more) – companies all to often have software products that they have paid hundreds of thousands, or millions of pounds for, but are seldom prepared to afford any time to pay for the maintenance of the software, this is a fault, especially when it comes to paying back technical debt.

MINI-Downtown-facility-image-01

If one would like to not incur these charges, then the recommended approach is to phone the car dealerships service department and book your car in well in advance, note that they will check their diary and advise you when they have a slot available, not you specifying when you would like your car in to be looked at.

Fast + Cheap = Work will be shoddy and of a very poor standard
Fast + Good = Expensive
Cheap + Good = When we have the time

All too often people choose fast and cheap, which is one of the biggest mistakes you can make if you are developing software for customers (though it sounds attractive in the boardroom or when making the sale), the reality is that when you give them a “quick and dirty” software product, it will contain bugs and deficiencies, work poorly and crash often, so the customer will complain, it is now far too late to start deliberating about the trilemma, their expectation will always be a high quality product as no-one likes to pay for software with bugs, if you are agreeing to anything else, you are likely to fail.

IT managers also need to take heed when dealing with users of varying organisational and strategic importance that request that their problem gets addressed immediately. If you are the managing director of a company and take your car for a service (you usually can afford to pay for them to collect the car), if you don’t want to pay for this premium service, then you join the queue the same as everyone else (judgement call).

This is the root cause of bottlenecks and reactive (not proactive) problem solving in a lot of companies, if you want an effective IT department, treat all your users the same, your Managing Director or Chief Executive will come to thank you for it in the end, when their business thrives.

Windows Ten Free Upgrade Offer


Windows 8 has come on in leaps and bounds since the 8.1 release, making Windows 8 significantly easier to use. When Windows 8 was released, word was everyone was going to ditch their PC and just use a tablet, so the User Interface (UI) in Windows 8 promoted touch based input. Microsoft appears to have corrected the issue in Windows 10.

Why No Windows 9?

It turns out that there is a lot of code out there that relies on some sloppy coding in the Windows 95-98 timeframe, where instead of checking for the whole year e.g. 95 in 1995 or 98 in 1998, the code checks for the first character StartsWith(“9”) instead of Equals(“1995”), you can find an article here that explains the issue.

Windows Ten

The first thing you will notice is that the start bar in the bottom left hand corner looks a little bit more familiar. They have completely done away with the Windows Modern UI Start Screen in Windows 8

Back

Windows Ten Free Upgrade Offer

If you would like to move to Windows 10 for free, have a look at this post

Great news! We will offer a free upgrade to Windows 10 for qualified new or existing Windows 7, Windows 8.1 and Windows Phone 8.1 devices that upgrade in the first year!  And even better: once a qualified Windows device is upgraded to Windows 10, we will continue to keep it up to date for the supported lifetime of the device, keeping it more secure, and introducing new features and functionality over time – for no additional charge. Sign up with your email today, and we will send you more information about Windows 10 and the upgrade offer in the coming months.      

Website

Link available here.

Microsoft Visual Studio Installer Projects


I was forced to remain using Visual Studio 2010 and not upgrade to Visual Studio 2012 or Visual Studio 2013, because my company has dozens of internally used utility apps that use visual studio installer/setup projects. It just is not worth the effort to migrate to another installer technology.

Surprising, last year Microsoft reversed the decision to remove set-up projects, as politically the focus was on getting developers making Windows Store applications where the end product is submitted to Microsoft to host and manage. I write this post as I still come across developers that are unaware that this functionality has been returned.

You can download the extension package from here that updates Visual Studio 2013 only (not Visual Studio 2012)

Setup

After installing the extension you will see the project template available in Visual Studio 2013 shown below

Installer/Setup project

I am currently evaluating Visual Studio 2015 preview, so one naturally assumed that you would be able to create a new set-up project as the functionality had been returned in the previous version, albeit via an add-in extension, I assumed I could see the project template shown in the image above, but it was not there.

It turns out that Microsoft have changed their mind again, and decided not to include installer/setup project in Visual Studio 2015, article available here.

We’d like to thank you all for your comments on this UserVoice entry. We have been discussing the comments on InstallShield Limited Edition (ISLE) raised here with Flexera and we are currently working with them to address the top issues. At this stage we have no plans to include the former Visual Studio Setup Projects in future product versions but we will continue to work with Flexera and the community to ensure Visual Studio customers’ setup needs will be met with no-cost tooling that supports a broad range of scenarios.

Tony Goodhew, Program Manager, VS Pro.

 This is a very frustrating development, a decision based on political and not technical issues. it just means a whole class of Visual Studio developer simply won’t upgrade.

Gangnam Style music video ‘broke’ YouTube view limit


I read an article on the Gangnam Style music video on the BBC website earlier this week and felt it failed to explain any of the numbers mentioned in any meaningful way.

The article asks,

How do you say 9,223,372,036,854,775,808?

Nine quintillion, two hundred and twenty-three quadrillion, three hundred and seventy-two trillion, thirty-six billion, eight hundred and fifty-four million, seven hundred and seventy-five thousand, eight hundred and eight.

When one starts to learn programming, understanding data types is of fundamental importance, irrespective whether you are using Native Languages like C or C++, Managed Languages like Java or C#, Functional Languages like Haskell or F# or Dynamic Languages like JavaScript, PHP or Python. A variable essentially is what a computer uses to store items usually when it is running. Text (like the one you are reading right now in this article) is usually stored in a String variable, whole numbers tend to be stored in an Int variable (integer).

There is no magic!

I program in C# (pronounced “see sharp”) a lot nowadays and can instantly recognise 2,147,483,647 as Int32.MaxValue. It is this limit that the Gangnam style video reached. Programming wise, Youtube is written in a lot of C, so a quick Wikipedia search for C data types shows that all that’s really changed is that they’ve changed their long signed integer type (At least in the −2147483647, +2147483647 range thus at least 32 bits in size) to a long long signed integer type (At least in the −9223372036854775807, +9223372036854775807 range thus at least 64 bits in size. Specified since the C99 version of the standard). In C#, this is Int64.MaxValue.

The remote server returned an error: (407) Proxy Authentication


Periodically, I find myself writing an N-Tier, SaaS app written in Winforms or WPF for a Bank or Energy firm, that uses proxies.

400px-Proxy_concept_en_svg

In fact, as security becomes a better understood component, providing a standardised environment in the enterprise, the more companies typically use proxy servers.

Every once in a while I come across the dreaded message The remote server returned an error: (407) Proxy Authentication Required. 

There is an article here that explains the issue. Make sure you add this to your app.config between the configuration nodes.

<system.net>

<defaultProxy enabled=true useDefaultCredentials=true>

<proxy autoDetect=True usesystemdefault=True/>

</defaultProxy>

</system.net>

<defaultProxy> Element (Network Settings)

enabled  Specifies whether a web proxy is used. The default value is true.

useDefaultCredentials  Specifies whether the default credentials for this host are used to access the web proxy. The default value is false.

 <proxy> Element (Network Settings)

autoDetect Specifies whether the proxy is automatically detected. The default value is unspecified.

usesystemdefault Specifies whether to use Internet Explorer proxy settings. If set to true, subsequent attributes will override Internet Explorer proxy settings. The default value is unspecified.

Writing multithreaded programs using Async & Await in C#


The biggest feature in C# and Visual Basic languages in Visual Studio 11 is inclusion of first class language support for asynchrony. Writing multi-threaded programs that scale, are easily modifiable, maintainable and understandable by more than one person (i.e. the one that wrote the code) is hard. This is certainly something I have seen people get wrong time and time again.

Probably the most dangerous word to use with undergraduate or even postgraduates is the word “Thread”. When developing software systems, this is certainly an area that requires somebody experienced, and proactive enough to ensure that developers are monitored when they are assigned tasks using threading, as things can get out of hand very quickly.. I have always tried to ensure that developers refrain from using the Thread class and suggesting they use the ThreadPool  and its QueueUserWorkItem  method or the background worker component where possible, but there are times when you have to implement the IAsyncResult design pattern, which makes understanding what your normally synchronous application (and mind-set) hard, because there is an Inversion of Control in the code that is executing, requiring you use a WaitCallBack and WaitHandles and ManualResetEvent and AutoResetEvent classes.

As we move forward, it is more important that developers are as productive as possible, especially in a world where devices are proliferating at the rate that they are. I can now program a Computer, Mobile Phone or Tablet, where connectivity, and updating is a real issue on tablets and phones, so being able to write robust, multi-threaded code quickly and relatively bug free increases in importance.

Note that I am using WPF in this example, if you would like to know how to do this in WinRT/Metro, then have a look at this example.

Single Threaded Example

If you run Visual Studio and create a new WPF application and call the project AsyncWpfApplication

NewProject

This synchronous application application is going to process a list of URLs, and calculate the size of the pages so please ensure you add a reference to System.Net.Http

SystemNet

Add the following XAML markup

<Window x:Class="AsyncWpfApplication.MainWindow"
Title="MainWindow" Height="400" Width="600">
<Grid>
 
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
 
<TextBox Margin="20" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" FontFamily="Lucida Console" x:Name="resultsTextBox" Height="250" Width="500" />
<Button Grid.Row="1" HorizontalAlignment="Right" Margin="0,0,70,20" Content="Start" x:Name="startButton" Height="22" Width="75" Click="startButton_Click_1" />
 
</Grid>
</Window>
 

Add the following in the code behind

using System;
using System.Collections.Generic;
using System.Windows;
using System.Net.Http;
using System.Net;
using System.IO;
using System.Threading.Tasks;
 
namespace AsyncWpfApplication
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
 
private void startButton_Click_1(object sender, RoutedEventArgs e)
{
resultsTextBox.Clear();
SumPageSizes();
resultsTextBox.Text += "\r\nControl returned to startButton_Click.";
}
 
private void SumPageSizes()
{
// Make a list of web addresses.
IEnumerable<string> urlList = SetUpURLList();
 
var total = 0;
foreach (var url in urlList)
{
// GetURLContents returns the contents of url as a byte array.
byte[] urlContents = GetURLContents(url);
 
DisplayResults(url, urlContents);
 
// Update the total.
total += urlContents.Length;
}
 
// Display the total count for all of the web addresses.
resultsTextBox.Text += string.Format("\r\n\r\nTotal bytes returned:  {0}\r\n", total);
}
 
 
private IEnumerable<string> SetUpURLList()
{
var urls = new List<string>
{
};
return urls;
}
 
 
private byte[] GetURLContents(string url)
{
// The downloaded resource ends up in the variable named content.
var content = new MemoryStream();
 
// Initialize an HttpWebRequest for the current URL.
var webReq = (HttpWebRequest)WebRequest.Create(url);
 
// Send the request to the Internet resource and wait for
// the response.
using (var response = webReq.GetResponse())
{
// Get the data stream that is associated with the specified URL.
using (Stream responseStream = response.GetResponseStream())
{
// Read the bytes in responseStream and copy them to content. 
responseStream.CopyTo(content);
}
}
 
// Return the result as a byte array.
return content.ToArray();
}
 
private void DisplayResults(string url, byte[] content)
{
// Display the length of each website. The string format
// is designed to be used with a monospaced font, such as
// Lucida Console or Global Monospace.
var bytes = content.Length;
// Strip off the "http://&quot;.
var displayURL = url.Replace("http://&quot;, "");
resultsTextBox.Text += string.Format("\n{0,-58} {1,8}", displayURL, bytes);
}
}
}
 

If you then hit F5 to run the application and press start you will find that the start button sticks and the application itself is unresponsive because of all the work that is blocking the main UI thread. After a few moment you should get the following

Screen

Multithreaded Example

When retrofitting the new asyc language features you need to be aware of the following

  1. The new asyc language capabilities are based around Task<T> found in System.Threading.Tasks.Task<TResult>. Knowing how that class works with increase the ease of you ability to use the new asyc features
  2. Any method that uses the new asynchronous functionality must use the new keyword asyc.
  3. There are a plethora of new classes in the .NET framework that are suffixed with Asyc that return a Task<T> that you can use with the new await keyword.
using System;
using System.Collections.Generic;
using System.Windows;
using System.Net.Http;
using System.Net;
using System.IO;
using System.Threading.Tasks;
 
namespace AsyncWpfApplication
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
 
private async void startButton_Click_1(object sender, RoutedEventArgs e)
{
resultsTextBox.Clear();
await SumPageSizesAsync();
resultsTextBox.Text += "\r\nControl returned to startButton_Click.";
}
 
private async Task SumPageSizesAsync()
{
// Make a list of web addresses.
IEnumerable<string> urlList = SetUpURLList();
 
var total = 0;
 
foreach (var url in urlList)
{
// GetURLContentsAsync returns a Task<T>. At completion, the task
// produces a byte array.
Task<byte[]> getContentsTask = GetURLContentsAsync(url);
byte[] urlContents = await getContentsTask;
 
// The following line can replace the previous two assignment statements.
//byte[] urlContents = await GetURLContentsAsync(url);
 
DisplayResults(url, urlContents);
 
// Update the total.         
total += urlContents.Length;
}
 
// Display the total count for all of the websites.
resultsTextBox.Text +=
string.Format("\r\n\r\nTotal bytes returned:  {0}\r\n", total);
}
 
 
 
 
private IEnumerable<string> SetUpURLList()
{
var urls = new List<string>
{
};
return urls;
}
 
private async Task<byte[]> GetURLContentsAsync(string url)
{
// The downloaded resource ends up in the variable named content.
var content = new MemoryStream();
 
// Initialize an HttpWebRequest for the current URL.
var webReq = (HttpWebRequest)WebRequest.Create(url);
 
// Send the request to the Internet resource and wait for
// the response.
Task<WebResponse> responseTask = webReq.GetResponseAsync();
using (WebResponse response = await responseTask)
{
// The following line can replace the previous two lines.
//using (WebResponse response = await webReq.GetResponseAsync())
 
// Get the data stream that is associated with the specified url.
using (Stream responseStream = response.GetResponseStream())
{
// Read the bytes in responseStream and copy them to content.
// CopyToAsync returns a Task, not a Task<T>.
Task copyTask = responseStream.CopyToAsync(content);
 
// When copyTask is completed, content contains a copy of
// responseStream.
await copyTask;
 
// The following line can replace the previous two statements.
//await responseStream.CopyToAsync(content);
}
}
 
// Return the result as a byte array.
return content.ToArray();
}
 
 
 
private void DisplayResults(string url, byte[] content)
{
// Display the length of each website. The string format
// is designed to be used with a monospaced font, such as
// Lucida Console or Global Monospace.
var bytes = content.Length;
// Strip off the "http://&quot;.
var displayURL = url.Replace("http://&quot;, "");
resultsTextBox.Text += string.Format("\n{0,-58} {1,8}", displayURL, bytes);
}
}
}

    If you examine the retrofitted example above you will see that the synchronous methods have indeed been replaced with their methods that are suffixed with Async e.g. SomeMethodAsyc and all you have to do is use the await keyword until the asynchronous task completes. The C# language team have really made asynchronous programming “easy peasy lemon squeezy”.

Introduction to Windows 8 Metro & WinRT (part 2)


Welcome to the second in this two part series on developing Metro applications in Windows 8. The first part is available here

Introduction to Windows 8 Metro & WinRT (part 1)

In the first part you saw how to create a Metro/WinRT application using the Blank Application Template. In this part you see how to utilise both the Grid and Split application templates

Grid Application

If you open Visual Studio (or the Visual Basic or C# Express editions) and select the Grid Application Template and call the project GridApplication (take note of the information on the right in the New Project Dialogue that explains the core features of this template). This template (in a nutshell) allows you to create Master/Detail views of your data in a touch friendly way.

New Project

After clicking OK, it is best that you hit F5 and ensure you build the project as there are custom resources that need to be built, if you fail to do this then the XAML designer will show errors.

Note:  I am also experiencing a bug where the project is blank in the solutions explorer, if you run into this issue, close the application in Visual Studio, and restart it, and it should show up now. I have also (this morning) been offered some updates for Visual Studio that I hope resolve some of these issues in Visual Studio, I recommend you update

Updates

If you look at your solution explorer you will find that there are some additional folders and files. Take special note of the DataModel folder, and the three pages highlighted below

Solution Explorer

If you (like me) have been using MVVM religiously in your WPF, Silverlight or Windows Phone applications, a lot of the structure of the application should be familiar. If you go into GroupedItemsPage.xaml you will find the following XAML where the SampleDataSource is bound. Also note that there are two main Views in the XAML. When viewing data normally the GridView is used (wrapped in a scroll viewer) but when you pin the application to the side of your screen, the ListView is used instead.

<UserControl.Resources>
 
<!– Collection of items displayed by this page –>
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"
d:Source="{Binding ItemGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
</UserControl.Resources>
 

Look at the code behind of the App.xaml file, here you will see how the data gets populated and fed to the windows that will display the data by creating an instance of  the SampleDataSource and passing the ItemGroups into the constructor of the page.

/// <summary>
/// Invoked when the application is launched normally by the end user.  Other entry points
/// will be used when the application is launched to open a specific file, to display
/// search results, and so forth.
/// </summary>
/// <param name="args">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// TODO: Create a data model appropriate for your problem domain to replace the sample data
var sampleData = new SampleDataSource();
 
if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
 
// Create a Frame to act navigation context and navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
var rootFrame = new Frame();
rootFrame.Navigate(typeof(GroupedItemsPage), sampleData.ItemGroups);
 
// Place the frame in the current Window and ensure that it is active
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
 

If you run the application you will find you have this master page

Master.

If you select any items in the list you will be taken to this details view

Detail

If you select the group title (look at the arrows in the master page image) you will have this view

Title

Also take note of the touch friendly handles

Handles

If you move your mouse to the top of the screen so a little hand cursor show, and then drag the app to the right hand corner, you can pin the application to the side (this is the aforementioned ListView). Dragging the Grid Splitter to the left will restore full screen mode

Snap

In your Visual Studio Solution, if you navigate to your DataModel folder, you will find the SampleDataSource.cs. This (as you might have guessed) contains the data that you see in the application in the following four classes (as a best practice you will want to move these classes into their own files)

Data

The Simulator

A really useful tool in Visual Studio is called the Simulator. This in essence, allows the ability to run the application in Simulation mode, where you can test how you app will respond to different screen resolutions for example. If you toggle the build setting to simulator and build

Simulator

you will have the following

Simulator Actual

You can rotate the application 90 degrees to see what it looks like

Rotated

If you want to see what the application looks like on a bigger screen

Bigger screen

Split Application

If you open Visual Studio (or the Visual Basic or C# Express editions) and select the Split Application Template and call the project SplitApplication (take note of the information on the right in the New Project Dialogue that explains the core features of this template).

New Project

The assets and files for the SplitApplication are almost identical to the GridApplication except here you have a SplitPage and an ItemsPage.

Split and Items

Main View

If you press F5 to build you should have the following

MainWindow

Split View

 

Items

As you can see Visual Studio makes it very easy for you to get started and create applications that look beautiful and can bind to data sources very easily. I really love the Expression Designer they have included in Visual Studio 11,  it really makes working with mark-up like XAML so much easier.