First a little understand about why the metro design is cool, it is designed to be “glanceable,” what this means is they want you to take a look at it and see important information at a glance. When you look at your phone and see see a number next to your email you know you have that many emails. When you check the lock screen of your phone and see a symbol with a number you know you have a message waiting. And to get that nice glanceable design they developed the metro design to make it feel universal. Just image you were in a foreign airport, and not knowing the native language how would you get around? You would look at the symbols and understand what they mean. This is what the metro style was inspired from.

So now why it is important to understand metro design. The whole windows 8 and windows phone experience is built on metro so you should design your apps with that in mind. They make it easy for you to design your app with metro with the blend software that comes with the windows phone SDK. and even give design guides. So when you are building an app for windows phone or windows 8 keep try to make it glanceable, have important information get displayed in the icon. make it smooth and easy to transition.

Check out this blog post by the awesome Jeff Wilcox http://www.jeff.wilcox.name/2011/03/metro-design-guide-v1/ it goes over the metro design basics nicely I think.

Remember Metro is the future, learn to design with metro.

So just a nice friendly piece of advice. Remember to always back up your site and database, and check them to make sure they are good.

So after you both of those installed (if you are having trouble and need help leave me a comment or send me an email and I will do my best to help you) Go to the folder the project you want to add to version control. Right click in the folder and go to TortoiseHg > Create Repositoy

Then you will need to Init the repository, you should see a popup like this.

Click Create and then you have your repository created. Now you need to commit your files into the repository. But before the commit, you should edit the .hgignore file. What this does is ignore files you don’t want to or you shouldn’t commit.

Here is the ignore file I use. I got this from somewhere on the internet and it takes care of a good amount of files. This file tells what files and directors to ignore when committing files.

syntax: glob
 *.suo
 *.obj
 *.pdb
 *.user
 *.vspscc
 *.bak
 *.cache
 *.log
 *.lib
 [Bb]in
 [Dd]ebug*/
 obj/
 [Rr]elease*/
 [Tt]est[Rr]esult*
 [Bb]uild[Ll]og.*
 *.[Pp]ublish.xml
 [Bb]uild[Pp]rocess[Tt]emplates/*
 Published/*
 [Tt]humbs.db
 [Uu]pgrade[Ll]og*.[Xx][Mm][Ll]
 _[Uu]pgradeReport_Files*/
 *.ReSharper.user

Now copy the project folder and paste it into your dropbox folder. When you installed dropbox it created a folder called dropbox(in you followed the default install) I created a folder in it called Projects and then pasted my project folder(UnderBridgeGraffiti) in it.

You can now open the repository explorer(workbench), right click in the folder (in the dropbox folder) and then click on Hg Workbench.

Once you open up the workbench you need to commit all your file to the repository.

First (1) click on the check mark at the top of the explorer to check all the files that need to be committed to the repository.  Second (2) click that check box to select all the files you want to commit to the repository. Then fill in the text box with a description(Init Commit) and then click commit (3). It will ask you if you want to add untracked files, select yes since there are no tracked files and you want to track all those files.

Congratulations you just created a repository inside your dropbox folder.

Now you can access your version control on any computer you have dropbox installed on.

If you wanted to create a clone of the repository so you can have the dropbox as the master file go to another computer or folder. Right click inside the folder, TortoiseHg -> Clone

So if you implement trial mode, I suggest adding in the check if trial or not in the application activated section to always check when you navigate to the app no matter how you get there.

I will upload a video soon of me buying it.

So to get multitouch set up I used a TouchFrameEventhandler. You will have to add

System.Windows.Input.Touch

as a reference and a using statment.

I created a class called DrawingPoints and then created a list collection of them.

class DrawingPoints
 {
 public int id { get; set; }
 public Point currentPoint { get; set; }
 public Point oldPoint { get; set; }
 public bool drawing { get; set; }
 public SolidColorBrush currentColor { get; set; }
 public double drawSize { get; set; }
 }

List<DrawingPoints> drawingPoints = new List<DrawingPoints>();

Now you will need to create the touchevent that will happen when something touches the screen.

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
 {
 //This holds a collection of touches on the screen. So for each finger that touches the canvas one touch get added.
TouchPointCollection tCollection = e.GetTouchPoints(DrawingCanvas);

if (tCollection != null)
 {
 //iterate through the collection of touches
foreach (var point in tCollection)
 {
 //sets up a drawing point
DrawingPoints drawPoint;

//if the touch action is the finger leaving the screen, remove the drawing point from the list of drawpoints
 if (point.Action == TouchAction.Up)
 {
var oldPoint = drawingPoints.Single(x => x.id == point.TouchDevice.Id);

if (oldPoint != null)
 {
drawingPoints.Remove(oldPoint);
 }
 }

//if the touch action is down, add the point to the drawingpoint
 if (point.Action == TouchAction.Down)
 {
 //gets a list of colors to set which color is set as a drawing point
var colors = App.GetDrawingColors();

var color = colors.Single(c => c.ColorID == settings.DrawColor);
var size = settings.DrawSize;

//create a drawpoint and assing it Touchevent details
drawPoint = new DrawingPoints();

drawPoint.id = point.TouchDevice.Id; //sets the drawpoint an ID so it knows which finger is touching the screen
drawPoint.currentPoint = point.Position; //gets the position
drawPoint.oldPoint = drawPoint.currentPoint;

drawPoint.currentColor = color.ColorBrush;
drawPoint.drawSize = size;

drawingPoints.Add(drawPoint);
 }

//if the touch action is move, move the point and draw a path from the old point to the new point
 if (point.Action == TouchAction.Move)
 {
drawPoint = drawingPoints.Single(x => x.id == point.TouchDevice.Id);

drawPoint.currentPoint = point.Position;

draw(drawPoint); //calls the draw action method

drawPoint.oldPoint = drawPoint.currentPoint;
 }
 }
 }

}

What that does is everytime a finger touches the screen in the canvas element(which takes up the whole screen on a page in my app,) a touchpoint gets added to a touch collection.
Then for each touch in the touch collection, the code checks what the action of the touch is, it will either be Up – finger leaves the screen, Down – finger touches the screen or Move – finger is moving on the screen. When the action is Up it removes the draw point and stops drawing. When Down is adds a drawpoint to the drawpoint collection and gets ready for the move action. When it is moving it draws a line from the point the finger was at, to the point the finger is at now.

Now you have to add the event when you go to the page you want multi touch on, and when you leave the page remove the event. To do this I override the navigation events. Now I remove the event when leaving the page becasue the touch events can cause some weird things to happen on other pages in the application.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 {
base.OnNavigatedTo(e);

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported); //Adds the event to the page
 }

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
 {
base.OnNavigatedFrom(e);

Touch.FrameReported -= new TouchFrameEventHandler(Touch_FrameReported); //removes the event from the page
 }

So that is how I got multitouch set up in my application. Any questions email me or leave a comment.

I will soon blog about how I was able to get multi touch set up in the app. Also I am going to test out how I set up trial mode to make sure that if a user hits the back button after buying the app, it checks on activate so you don’t have to restart the app.

Thank you,
-Andrew

Now why might you want 2 different templates in the same list box? Well what if you wanted to display different tasks and appointments for a single day. But you want to see at a quick glance what a task is and what an appointment is. So lets say you have a square for all tasks and a circle for all appointments.

To do this you will use a ContentControl which as the data gets bound to the listbox, we will override the method to check if the item getting bound is a task or appointment. And then set the template depending on what it is.

In my code example the tasks and appointments both inherit from a class called CalendarItem. This is an object orientated programing principle, and if you don’t understand it let me know and I will create a blog about the basics of it.

First think I did was to create the templates I would be using for tasks and appointments. I created a seperate file called “DataTemplates.xaml” and put it into a folder called “Resources”.

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <DataTemplate x:Key="TaskTemplate">
 <StackPanel Orientation="Horizontal" Margin="0, 6">
 <Grid Margin="12, 0, 12, 0">
 <Rectangle Fill="{Binding categoryColor}" Width="20" Height="20"/>
 </Grid>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding title}" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="24" Width="300"/>
 <TextBlock Text="{Binding time}" HorizontalAlignment="Right" FontSize="24" Width="112"/>
 </StackPanel>
 </StackPanel>
 </DataTemplate>

<DataTemplate x:Key="ApptTemplate">
 <StackPanel Orientation="Horizontal" Margin="0, 6">
 <Grid Margin="12, 0, 12, 0">
 <Ellipse Fill="{Binding categoryColor}" Width="20" Height="20"/>
 </Grid>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding title}" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="24" Width="300"/>
 <TextBlock Text="{Binding time}" HorizontalAlignment="Right" FontSize="24" Width="300"/>
 </StackPanel>
 </StackPanel>
 </DataTemplate>

</ResourceDictionary>

As you look at this code you will see the template structures look alike, but one uses a rectangle and the other usues an ellipse. Now in the CalendarItem class everything has a category and a categoryColor, a title and a time. So we us all that data to display.

Next thing is you will have to create the override using the ContentControl. Create a class file in your solution, I called mine “TemplateSelector.cs.”

using System.Windows.Controls;
 using System.Windows;
 using System.Windows.Markup;
 using System.Xml.Linq;

namespace DuelTemplateSample.Helpers
 {
 public class DataTemplateHelper
 {
 public static DataTemplate LoadFromDictionary(string dictionary, string template)
 {
 var doc = XDocument.Load(dictionary);
 var dict = (ResourceDictionary)XamlReader.Load(doc.ToString(SaveOptions.None));
 return dict[template] as DataTemplate;
 }
 }

public class templateSelector : ContentControl
 {
 protected override void OnContentChanged(object oldContent, object newContent)
 {
 base.OnContentChanged(oldContent, newContent);

var calItem = (CalendarItem)newContent;

if (calItem.type == "APPT")
 {
 ContentTemplate = DataTemplateHelper.LoadFromDictionary(
 "DuelTemplateSample;component/Resources/DataTemplates.xaml",
 "ApptTemplate");
 }
 else
 {
 ContentTemplate = DataTemplateHelper.LoadFromDictionary(
 "DuelTemplateSample;component/Resources/DataTemplates.xaml",
 "TaskTemplate");
 }
 }
 }
 }

As you can see in the ContentControl code we are overriding the OnContentChanged method, which takes in 2 objects. oldContent and newContent. If you don’t understand what an override is, it is another principle of object orientated programming. We then typecase (that is setting the object as another type), in this case we are saying the the newContent is a CalendarItem. Then we check the the type is, this is a property of calendar item, it will be either ‘APPT’ for appointment or ‘TASK’ for task. Then depending on what the type is we load the ContentTemplate from the DateTemplate file and the template name. In the code I am calling a method called LoadFromDictionary which is defined in the code above the OnContentChanged. All this does is loads in the xaml file that you created before, and gets the template matching the template name. As you can see I am sending a string that is giving the location of the xaml file, this format is used to tell the location of the file in the application the “DuelTemplateSample;” tells what namespace the file is located in, and the “component/Resources/DataTemplates.xaml” tells that the file is located in the Resources folder. The component means it is in the ‘root’ of the project.

Now is the time to get to set up to work in the ListBox. In your xaml page that will contain the ListBox, add in

xmlns:templateSelector="clr-namespace:DuelTemplateSample.Helpers"

to the PhoneApplicationPage with all the other namespaces. As you can see “DuelTemplateSample.Helpers” is the namespace of where the templateSelector / OnContentChanged is located. Now for the ListBox mine looks like this

[sourcecode language="xml"]

[/sourcecode]

As you see I set the DataTemplate to
[sourcecode language="xml"]
<templateSelector:templateSelector Content=”{Binding}”/>
[/sourcecode]
This is what calls the OnContentChange override method and sets the template to the template depending on the type that we coded before.

Now all you need to do is bind a set of data to the ListBox and check out the results. In this case I have a list of CalendarItems a mix of tasks and appointments and load it into the ListBox in the code behind.

I hope this helps and if you are confused, have any questions or comments please comment or email me at andy (at) underbridgecity.net.

I will now go over how I did that. You can use this to always have the light theme for the app like the native mail app, or even create your own custom theme.

//OverwriteTheme is the function to overwrite the dark or light theme to your own custom theme.
 //You can either create your own theme, or copy a theme from the design folder in the WP7 SDK
 private void OverwriteTheme()
 {
 //A string that contains the location to your custom theme file
 string source = String.Format("/SampleApp;component/Resources/LightTheme.xaml");

//Creates a resourceDictionary file that contains all the data for your custom theme
 var customThemeStyle = new ResourceDictionary { Source = new Uri(source, UriKind.Relative) };

//Creates a resourceDicionary of the current theme data
 ResourceDictionary appResources = App.Current.Resources;

//Cycle through each entry in the custom Theme ResourceDictionary and check if
 //there is a matching key resource. If so overwrite the current theme color brush
 //with the custom color brush.
 foreach (DictionaryEntry entry in customThemeStyle)
 {
 //Gets the SolidBrushColor of the current custom entry
 SolidColorBrush colorBrush = entry.Value as SolidColorBrush;

//Looks to see if there is a current theme entry with matching key
 SolidColorBrush existingBrush = appResources[entry.Key] as SolidColorBrush;

//If both SolidBrushColor variables are not null, overwrite current resource with custom resource
 if (existingBrush != null && colorBrush != null)
 {
 existingBrush.Color = colorBrush.Color;
 }
 }

//This loads the settings from the application
 Setting settings = new Setting();
 IsolatedStorageGateway settingStorage = new IsolatedStorageGateway(StorageType.Setting);

settings = settingStorage.LoadSettings();

//Checks to see what theme setting is selected, and then overwrite the accent Color with the custom accent color
 if (settings.ThemeSettingID == 0)
 {
 (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255, 255, 129, 24);
 }
 else if (settings.ThemeSettingID == 1)
 {
 (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255, 246, 119, 189);
 }
 }

In the code I created a method in the App.xaml.cs file, and this method get called in the constructor for App() before the InitializePhoneApplication() call.

You will also need to set teh background on all the pages to {StaticResource PhoneBackgroundBrush} like

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

I tried to document the code so you can understand what is going on line by line so I will give a little explanation here.

The line

string source = String.Format("/SampleApp;component/Resources/LightTheme.xaml");

loads the theme you are going override. Here I copied a default theme resource file (Edit: the theme resource file is ThemeResource.xaml) from the design folder located on my machine at C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design\LightBlue and called it LightTheme.xaml. If you look in the design folder you will see many folders.

Then the code went though all the entries and compared the ResourceDictionaries, if the custom theme file contains the key name of a main style element, it will overwrite it’s brushcolor. If you look at a default theme resource file, it contains a bunch of colors with keys and the keys are pretty self explanatory. So if you wanted to create your own custom theme you can start by copying and editing one of those files.

Also in my code you see me checking a setting value and then overriding the accent color depending and the user setting. This isn’t required unless you want the user to select a special accent colors in the settings or want them to change, if you just want one over ridden accent color just put it into your style resource file.

And questions or comments just let me know and thank you for reading.

Here is what i do to simulate trial mode in my Windows Phone 7 apps.

First at the top of your App.xaml.cs file add this

*EDIT*
I forgot to put this in here at the top. You need it to access the licence information.

//Used to determine if app is running under a trail license.
 private static LicenseInformation _licenseInfo = new LicenseInformation();

and to use that you will need to add in the folling using statment.

using Microsoft.Phone.Marketplace;

*END EDIT*

private static bool _isTrial = true;
 public bool IsTrial
 {
 get
 {
 return _isTrial;
 }
 }

I usually add that in right under my RootFrame property.

I then create a method in my App.xaml.cs

private void CheckLicense()
 {
 #if DEBUG
 if (MessageBox.Show("This is for debugging purposes. This allows trial mode to be set. Press 'OK' to simulate trial mode. Press 'Cancel' to run the application in normal mode.", "Debug Trial",
 MessageBoxButton.OKCancel) == MessageBoxResult.OK)
 {
 _isTrial = true;
 }
 else
 {
 _isTrial = false;
 }
 #else
 _isTrial = _licenseInfo.IsTrial();
 #endif

}

I then put the CheckLicence method into my Application_Launching and Application_Activated methods in my App.xaml.cs file to check if the application is bought or a trial version.

Then in your code you set up what will happen in your trial version and all you have to is check the IsTrial if true, it is a trail version. If false it is a full/paid version.

if ((Application.Current as App).IsTrial)
 {
 //Do trial things in here
 }

I hope this helps you out creating your WP7 app!

(EDIT: Putting this code in will check if trial or not after you buy the app, check out my post here http://www.underbridgecity.net/blog/2012/04/update-to-my-trial-mode-post/)