Archives For Samples

In a previous article I wrote about writing an XBox Reveal Count Down Timer for Windows Phone using HTML5 & CSS. By the end of the article we ended up with the following

finalImage

Continue Reading…

Over the past few months we have been doing a lot of Windows 8 development but using HTML5 and JavaScript instead of C# and XAML. Unfortunately Windows Phone does not have built in support for WinJS but what it does have the latest IE 10 browser on board plus we have the WebBrowser control available.

Recently, with the XBox announcement, we decided to build out a Windows Phone app that counts down to the reveal date which looks as follows. We have the app in certification as of May 3 2013 (submitted April 30), but is still going through the process. As I don’t expect it to pass because of the XBox logo usage, decided to make a tutorial out of it. But for all those enthusiast (and developers), you can grab the source and install on your Windows Phone.

1-720p

Continue Reading…

In two previous articles, I went through a technical overview of Windows 8 Finder App Template and the companion Finder App Server.  In this article, I’ll go through the Hero App Template and Hero App Server which are built on top of the Finder App Template and Server.

Introduction

The Windows 8 Hero App Template is a template developed to allow developers to quickly and easily create an application to collect certain information while out in the field on a Windows 8 device. For example, if a developer wanted to create an app to allow people to submit information on roads needing pothole repairs, the Hero App Template is a good starting point.

The Hero App Template is a derivative of the Windows 8 Finder App Template described in a previous article and The Hero App Server is a derivative of the Finder App Server described in a previous article.

This article will go through some of the technical features of the Hero App Template and accompanying NodeJS server to store all information. It’s assumed you have already gone through Windows 8 Finder App Template and Finder App Server articles. Continue Reading…

I recently released two Windows 8 templates on GitHub with an accompanying quick start guide for the Finder App Template. This article will go through the optional NodeJS backend server and how to get started with it and connect it to the Windows 8 template.

Introduction

The Windows 8 Finder Template is a template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store.  It allows a developer to easily pull existing point of interest data into the app to display on a map. If no point of interest data is available, it is accompanied by a backend server which allows the importing of data which can be used to feed the Windows 8 application.

In Part 1 of this article we went through the Windows 8 template and set it up to consume various feeds to display on a map.

In this part, we will go through some of the features of the NodeJS backend server and how to connect to the Windows Finder App Template.

NOTE: the backend server is optional and not required for the Windows 8 Finder App Template. Continue Reading…

I recently announced the release of two Windows 8 templates on GitHub.  This article will go through a technical overview of the Windows 8 Finder App Template and how to get started with it.

Introduction

The Windows 8 Finder Template is a template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store. It allows a developer to easily pull existing point of interest data into the app to visually display on a map. If no point of interest data set is available, it is accompanied by a backend NodeJS server which allows the importing of data which can be used to feed the Windows 8 application.

In Part 1 of this article we will go through the Windows 8 Finder Template and set it up to consume various feeds to display on a map. In Part 2, I’ll cover the backend NodeJS server and how to get started with that. Continue Reading…

win8logo-11324441

For the past month we have been busy putting together some Windows 8 templates to help developers build apps for Windows 8 faster. With the help of Barranger, I have built out two Windows 8 templates with each having a companion backend server.

If you are a regular reader of my blog, your will know that almost everything I do is .NET C#/XAML development.  For these templates, I decided to go the HTML5/CSS/JavaScript route and use WinJS for Windows 8 client apps. On the backend decided to use NodeJS on Windows Azure with a MongoDB data store on MongoLab.

So what templates are being released?

Finder App Template

The Windows 8 Finder App Template is a template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store.  It allows a developer to easily pull existing point of interest data into the app to display on a map.

screenshot_02152013_022850

In the template, we have included some pre-defined point of interest feeds. If those are not exactly what you are looking for, you have the option to use the optional backend NodeJS server which allows the importing of data which can then be used to feed the Windows 8 application.

Both the Windows 8 Finder Template source code and NodeJS Finder App Server source code can be found on GitHub.

Hero App Template

The Windows 8 Hero App Template is a template developed to allow developers to quickly and easily create an application to collect certain information while out in the field on a Windows 8 device. For example, if a developer wanted to create an app to allow people to submit information on roads needing pothole repairs, the Hero App Template is a good starting point.  The Hero App Template is a derivative of the Windows 8 Finder App Template described above.

screenshot_02152013_024300

The Hero App Server is a required component and essentially provides a server to collect submitted data and feed the data back to users. It is a branch from the Finder App Server so is similar but adds more functionality.

Both the Windows 8 Hero App Template and NodeJS Hero App Server source code can be found on GitHub.

What’s Next?

So feel free to download and start playing with them and share any feedback.  I’ll be following up next with quick start guides on both templates and how to get up and running.

Back in May I did a webcast with Microsoft Canada on Windows Phone 7 and what’s new for developers.  I also demoed a sample application that we where building called VanGuide for Windows Phone 7 as something that can possibly be built using the new tools.

We were a little late in delivering this as we knew there would be major breaking changes Splashgoing from the Windows Phone 7 CTP to Beta and did not want to release with that issue. 

Today I’m happy to announced we have put the finishing touches on the software and have released VanGuide for WP7!  Best part is we have open sourced the VanGuide code base to CodePlex and hope this helps some of the new comers to Windows Phone 7 get started. 

What exactly is VanGuide?  Vanguide for Windows Phone 7 allows a user to view various landmarks in and around the Vancouver area.  The user has the ability to view comments, ratings or tags to the landmark and add their own comments, ratings or tags. VanGuide for WP7 is an extension to the current version of VanGuide for web available and is based on the Open Data Application Framework which is another open source project. 

VanGuide now currently has three ways to view the data, Windows Phone 7 using Silverlight, web application using Silverlight and an iPhone application.  One of the greatest advantages to VanGuide for WP7 is we leverage the existing backend system.  No changes were required to build the Windows Phone 7 version of VanGuide similar to when we ported the EnergizeIT insurance application from Windows Mobile 6.5 to Windows Phone 7.

Here are some screenshot for the application

MapDetailsSmall MapSmall ItemDetailsSmall LandmarkSelectionSmall

One issue that we encountered is with the Bing Maps control.  We are using the version that is available for Silverlight for desktop.  Issue is when you navigate to the Settings page to filter out landmarks, you can no longer pan or pinch to zoom in/out on the map.  We suspect this is a bug with the Bing Maps silverlight control being used on the phone (currently not supported).  Microsoft is going to officially support the control in a future release of the WP7 tools and we’ll address that issue when it is released.

If you download the code and leverage any parts of it or have any comments/feedback be sure to let me know via my blog or twitter.com/MarkArteaga.

In my previous post I went through how to use custom fonts in a Windows Phone 7 application using Visual Studio.  In this part I’ll go through how to use Expression Blend for Windows Phone to leverage custom fonts.

Expression Blend is primarily used for designing your applications and offers a more intuitive interface to help design your Windows Phone 7 applications.  I don’t use it to code and fall back to Visual Studio when code needs to be written. Unlike Visual Studio, it also renders any custom fonts you are using in the visual designer so you get a better representation of what your application will look like.

In Expression Blend, you can change the FontFamily property using the properties tab as follows

image

Here I changed ‘page name’ TextBlock and you will notice it will render in the visual designer nicely

image

But when deployed to the emulator the font will fallback to the Segoe WP default font

image

As you can see, the TextBlock that we added in the previous post is using the custom font but the ‘page name’ falls back to the regular font.

In the following steps, I’ll outline how to fix this building off the project from the previous post but instead we’ll use Expression Blend.

Using Expression Blend & Custom Fonts

IN the following steps, I’ll go through making the custom font a resource so it can be leveraged in other controls within the Windows Phone 7 application.  Making the font as a resource allows you to easily reference the font on other controls.  So instead of copying FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch" everywhere, you simply point it to your static resource. 

  1. First thing we want to do is open up your project using Expression Blend for Windows Phone
  2. Open MainPage.xaml in design view
  3. Within Expression Blend (two ways)
    1. in the menu click on View –> Active Document View –> Design
    2. Click on the view icon in the designer
      image
  4. Click on the TextBlock that was added in the previous tutorial (Text property should be “Sample Text Font”)
  5. In the Properties Tab expand up the Text section to see the selected font
    image
  6. Beside the FontFamily combo box you will notice a ‘white box’, click on this to view the Advanced Options
  7. Click on Convert to New Resource
    image
  8. This will bring up a dialog called Create FontFamily Resource as follows
    image
    Here you have the option of
    1. Creating a local Resource (only useable by MainPage.xaml)
    2. Creating an application resource in app.xaml (useable throughout your entire application)
    3. Creating a Resource Dictionary (creates a separate resource file)
  9. Change the name to BuxtonSketchFont
  10. Select the Application radio button.  Your dialog should look like this
    image
  11. Click OK
  12. You will notice the FontFamily combo box is now highlighted green which means the property is using a resource.  If you open up App.xaml in XAML view, you will also notice the following added
  13. Click on the Page Title TextBlock
  14. Open the advance options in the FontFamily combo box
  15. In the popup menu select Local Resource –> BuxtonSketchFont

    image

  16. You will notice the ComboBox highlight to green to signify it’s using a resource
  17. Run the application in the emulator (you can do this from Expression Blend by pressing F5).  If done correctly, your emulator should now render the following (Notice Page Name now uses the BuxtonSketch font) 
    image

There you have it, using custom fonts in Windows Phone 7 applications.  Of course you don’t have to use custom fonts and can just use the default Segoe WP font.  But you never know when a customer might say ‘hmmm…don’t like that font, what else you got?”

Questions, ping me via this blog or via twitter @MarkArteaga or just add a comment!

While working on a Windows Phone 7 project, I got a customer request to use a custom font instead of just the Segoe WP font that is included with Windows Phone 7.

I have done this before on Windows Mobile so I’ll re-cap how to do it pre Windows Phone 7.

  1. Get the True Type Font (TTF) you want on your Windows Mobile device
  2. Copy the TTF File to the Windows directory
  3. Reset the device

We have automated this process through a custom a setup DLL (which is native code) with an installer and alleviates the pain for the customer to do this manual process.  But still somewhat of a pain to automate this process.

Using Silverlight for Windows Phone 7, this process is simplified and considering as a third party developer you don’t have access to the file system or the ability to write native code this is a good thing.

Here is a quick tutorial on getting this working with Visual Studio Express for Windows Phone 7.  In this tutorial I’ll be using the standard Windows Phone 7 project that comes with Visual Studio.

Adding Custom Font With Visual Studio

The first thing you need to do is create a Fonts folder in your project as follows

  1. Within the Solution Explorer right click on your project
  2. Click Add –> New Folder

    image

  3. Name the folder to Fonts
  4. Add your custom font here.  (For the purpose of this blog post I will be using the BuxtonSketch.ttf)
  5. Right click on the font and click on Properties and change the Build Action to Content
  6. Your Solution Explorer should look something like the following
    image

Now that we have the font in our project we need to use the font with the application.

  1. Within Visual Studio, open MainPage.xaml and view the page in XAML mode
  2. Find the ContentGrid within the XAML
  3. Add a Textblock to the ContentGrid
  4. Set the Size property to 48
  5. Set the Text property to Sample Text Font.  Your XAML should look something like this
  6. Now we need to set the font.  Add the FontFamily attribute to your Textblock
  7. Set the value to .\Fonts\[YOUR_TTF_FILE].ttf#[FONT_NAME] .  If BuxtonSketch.ttf is being used then it should be as follows .\Fonts\BuxtonSketch.ttf#Buxton Sketch.  Your XAML should now look similar to the following

  8. Run the application in the emulator and you should get something as follows. image

You should be able to embed any True Type Font within your Windows Phone 7 application.  In the next post I’ll follow up on how to use custom fonts with Expression Blend.

In some instances when developing your Windows Phone 7 app using Silverlight you may want to know if your code is running within the emulator or within a real device.  For example in my previous post on shake detection on Windows Phone 7 I didn’t want to create an new AccelerometerWithShakeDetection object if it was running in the emulator since the hardware is not available in the emulator.

In .NET Compact Framework it was a little bit of a pain to get this information as you have to PInvoke and have to know the native calls to get this information as follows

Using Silverlight for Windows Phone 7, you can now use the System.Environment.DeviceType which simply returns Unknown, Emulator or Device.

Again, no more PInvokes since it’s not supported and the code is a lot easier to write and maintain.

So far in my working with Windows Phone 7 and Silverlight I haven’t required PInvoke functionality so far.  We’ll see what happens in the future as the SDK gets out of CTP and we get customer projects but so far so good!