VanGuide for Windows Phone 7#

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.


Monday, August 09, 2010 12:13:50 PM (Eastern Daylight Time, UTC-04:00) #    Comments [1]  |  Trackback

 

Custom Fonts In Windows Phone 7 With Expression Blend#

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. <Application.Resources>
        <FontFamily x:Key="BuxtonSketchFont">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</FontFamily>
    </Application.Resources>
    
  14. Click on the Page Title TextBlock
  15. Open the advance options in the FontFamily combo box
  16. In the popup menu select Local Resource –> BuxtonSketchFont

    image
  17. You will notice the ComboBox highlight to green to signify it’s using a resource
  18. 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!


Tuesday, July 13, 2010 5:21:33 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Custom Fonts in Windows Phone 7 Application#

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
    <Grid x:Name="ContentGrid" Grid.Row="1">
    

    <TextBlock FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0"
    Name="textBlock1"
    Text="Sample Text Font" VerticalAlignment="Top" />

    </
    Grid>
  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
    <Grid x:Name="ContentGrid" Grid.Row="1">
    

    <TextBlock FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch"
    FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0" Name="textBlock1"
    Text="Sample Text Font" VerticalAlignment="Top" />

    </
    Grid>
  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.


Tuesday, July 13, 2010 3:39:12 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Detecting Emulator on Windows Phone 7#

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

[DllImport("coredll.dll")]
private static extern int SystemParametersInfo(uint uiAction, 
uint uiParam, string pvParam, uint fWiniIni); private const uint SPI_GETOEMINFO = 258; public static bool IsEumlator() { string szOEMInfo = " "; string strOEMInfo = ""; // Get OEM Info int ret = SystemParametersInfo(SPI_GETOEMINFO, szOEMInfo.Length, szOEMInfo, 0); if (ret != 0) { strOEMInfo = szOEMInfo.Substring(0, szOEMInfo.IndexOf('\0')); return strOEMInfo.Equals("Microsoft DeviceEmulator"); } else throw new Exception("Unable to determine"); }

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

    if (System.Environment.DeviceType == DeviceType.Emulator)
    {
        MessageBox.Show("You are running on the emulator.");
    }
    else if (System.Environment.DeviceType == DeviceType.Unknown)
    {
        MessageBox.Show("You are running on an unknown device.");
    }
    else
    {
        MessageBox.Show("You are running on a 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!


Saturday, May 29, 2010 1:42:12 AM (Eastern Daylight Time, UTC-04:00) #    Comments [1]  |  Trackback

 

Shake Detection on Windows Phone 7#

Back in Sept 2009 I did a few presentations for FITC Mobile 2009 and in the sample code I included a modified version of the Sensor API available on Codeplex.  The modified version of the API included some code that leveraged the accelerometer on some devices to detect when a device was shaken.  This code base was for Windows Phone 6.x and used .NET Compact Framework 3.5.  Essentially all you would have to do is wire up a ShakeDetected event and whenever the API detects a shake you would be notified via an event.

private IGSensor m_sensor;

public Form1()
{
    InitializeComponent();

    m_sensor = GSensorFactory.CreateGSensor();
    m_sensor.ShakeDetected += m_sensor_ShakeDetected;
  
}

void m_sensor_ShakeDetected(object sender, EventArgs e)
{
    //Invoke into the main thread since we are coming form a background thream
    this.Invoke(new EventHandler(delegate(object s, EventArgs ea)
    {
        //Code once shake is detected
        MessageBox.Show("Shake Detected");
    }));

}

Couple of things I didn’t like about this code.

  1. There is a thread running in the background doing a calculation of the X,Y,Z values and determining whether a shake has occurred.  This will drain the battery.
  2. It’s not a standard API and does not work on all devices because either the device does not have the hardware or the PInvokes are specific for only one OEM such as HTC.

To try it out for your self download the sample code for shake detection here. (Find it under Release Presentation Code\New Windows Mobile 6.5\Demo1\ShakeDetection).

Shake Detection On Windows Phone 7

Since the development environment for Windows Phone 7 is completely different now and uses Silverlight, the ‘shake detection’ code essentially is useless but that doesn’t mean the code can’t be ported over.

The good thing is Windows Phone 7 introduces standard hardware and standard APIs for sensors which should alleviate some developer pains from previous Windows Phone versions.  All Windows Phone 7 devices from OEMs will include an accelerometer so no more worrying about code not working.  Before I get into how to detect shake, see here for an overview of the accelerometer on Windows Phone 7.

To get shake detection working on Windows Phone 7, I had to wrap the AccelerometerSensor class within a wrapper class called AccelerometerSensorWithShakeDetection.  Using the new class is pretty straight forward and basically have to create an instance of the class and wire up the ShakeDetected event handler.

AccelerometerSensorWithShakeDetection m_shakeSensor;

public MainPage()
{
    InitializeComponent();

    m_shakeSensor = new AccelerometerSensorWithShakeDetection();
}

private void btnStart_Click(object sender, RoutedEventArgs e)
{
    m_shakeSensor.ShakeDetected += m_shakeSensor_ShakeDetected;
}

private void button2_Click(object sender, RoutedEventArgs e)
{
    m_shakeSensor.ShakeDetected -= m_shakeSensor_ShakeDetected;
}

void m_shakeSensor_ShakeDetected(object sender, EventArgs e)
{
    lblShakeStatus.Text = string.Format("Shake Detected @ {0}",
                  DateTime.Now.ToString("hh:mm:ss")); }

AccelerometerSensorWithShakeDetection implementation is different from the previous version because we now have a standard API.  Internally we wire up the AccelerometerSensor.ReadingChanged event when a user wires up the ShakeDetected event and call the AccelerometerSensor.Start and AccelerometerSensor.Stop when the AccelerometerSensorWithShakeDetection.Start/Stop methods are called.

public event EventHandler ShakeDetected
{
    add
    {
        m_ShakeDetectedHandler += value;
        m_sensor.ReadingChanged += Default_ReadingChanged;
    }
    remove
    {
        m_ShakeDetectedHandler -= value;
        m_sensor.ReadingChanged -= Default_ReadingChanged;
    }
}
        
public void Start()
{

    if (m_sensor != null)
        m_sensor.Start();
}

public void Stop()
{
    if (m_sensor != null)
        m_sensor.Stop();
}

When the reading change event occurs, we run our shake detection logic to see if the user has shaken the device.

private void Default_ReadingChanged(object sender, AccelerometerReadingAsyncEventArgs e)
{
    //Code for checking shake detection
    if (e.Value.State == SensorState.Ready)
    {
        AccelerometerReading reading = e.Value.Value;
        DateTimeOffset timeStamp = e.Value.Timestamp;
        try
        {
            if (!shaking && this.CheckForShake(m_lastReading, reading, 
                       shakeThreshold) && shakeCount >= 5) { //We are shaking shaking = true; shakeCount = 0; OnShakeDetected(); } else if (this.CheckForShake(m_lastReading, reading, shakeThreshold)) { shakeCount++; } else if (!this.CheckForShake(m_lastReading, reading, 0.2)) { shakeCount = 0; shaking = false; } m_lastReading = reading; } catch { /* ignore errors */ } } } private void OnShakeDetected() { if (this.m_ShakeDetectedHandler != null) this.m_ShakeDetectedHandler(this, EventArgs.Empty); } private bool CheckForShake(AccelerometerReading last,
                            AccelerometerReading current, double threshold) { double deltaX = Math.Abs((double)(last.X - current.X)); double deltaY = Math.Abs((double)(last.Y - current.Y)); double deltaZ = Math.Abs((double)(last.Z - current.Z)); return (deltaX > threshold && deltaY > threshold) || (deltaX > threshold && deltaZ > threshold) || (deltaY > threshold && deltaZ > threshold); }

When a shake is detected, the ShakeDetected handler is called to notify the listeners.

So porting code from previous Windows Phone versions to Windows Phone 7 is definitely possible because we are still using Managed code.  Some advantages to the new code are

  1. Standard APIs are used for the Accelerometer
  2. No threads running in the background to detect shake.  Instead an event based mechanism is used which will preserve the user experience and preserve the battery life.

One thing to note, to code compiles and runs on the emulator, but because I don’t have a real Windows Phone 7 device, I cannot test the code.  The version for .NET CF 3.5 works and the shake detection logic is essentially the same for Windows Phone 7 so I’m assuming it will work.  But if anyone in the product group wants to test on a real device (or send me a real device :) please do and let me know if it works.

Once I get a real device, I’ll test and update this post.  In the meantime, download the shake detection source code here to take a peak.


Saturday, May 29, 2010 1:04:58 AM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

All content © 2012, Mark Arteaga
Related Sites
Archives
Sitemap
Disclaimer

Powered by: newtelligence dasBlog 1.9.7174.0

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Send mail to the author(s) E-mail

Theme design by Jelle Druyts