My 2 cents on WPF with VS2008 and Expression Blend

I have been working on a WPF project lately and finding I have both Blend and Visual Studio open a lot of the time.  There’s things each tool does better than the other and then there’s things I need to use both for to accomplish my task. Thought I’d put down my thoughts and see if anyone else has the same issues.

First for the things I’m liking:

In WPF in general, I’m loving the data binding. All I can say is very, very cool.

Now for the things that annoy me:

In Visual Studio:

  • finding my resources is a pain. I really just want to right click on the xmaml view and “goto definition”
  • I’ve also found that editing resources in xaml is dangerous. I get lots of designer crashes, especially when moving resource from a form or control to a resource dictionary. However it has been greatly improved after applying this hotfix”: http://blogs.msdn.com/wpfsdk/archive/2008/11/10/wpf-designer-hotfix-is-posted.aspx but still crash devenv 3-4 times a day.
  • Grouping / tidying resources – I’ve been puting regions and trying to create resource dictionaries that are somewhat logical but still find it quite messy to find things I want using Visual Studio.

 

In Expression Blend:

  • Data Triggers – for these I seem to have to workaround the fact i don’t want to code the xaml by hand and there doesn’t seem to be a way to make data triggers in Blend.  I’ve been using Blend to make a control property to generate the XAML for the effect that I want i.e. hide an element and then copy the xaml into the data trigger section. \
  • No intellisense in XAML
  • No collapsable XAML – makes it hard to look through.
  • No integration with Source Control

New Article – Geographical Visualisations with SQL 2008

My latest Article is up on sql-server-performance. It comes from watching one of the cool videos on TED where the presenter remodelled the World’s landmass based on the number of minutes US news spent on stories from that country – it was quite dramatic.

2004WorldCarbonDioxideEmissionsCDIACIn the article I explore using SQL 2008 Spatial to do something similar with CO2 emissions. I run through the data process, some simple cleanup and the Reduce() method. I then use the STBuffer() to increase or decrease the area of a Geography, starting with just circles and then ending with modifying the countries themselves.

The Article is in two parts:

http://www.sql-server-performance.com/articles/dev/Powerful_Geographical_Visualisations_SQL_2008_Spatial_Part1_p1.aspx

http://www.sql-server-performance.com/articles/dev/Powerful_Geographical_Visualisations_SQL_2008_Spatial_Part2_p1.aspx

Let me know what you think.

A cool Silverlight application – SilverGene

We went and visited the guys at QUT last week as they had some cool stuff to show us and we love seeing cool things. One of the projects they have been working on is called SilverGene which is:

SilverGeneLogo

“SilverGene is a novel genomic visualiser hosted within most standard web browsers and written using the Microsoft Silverlight presentation technology. It delivers highly interactive exploration at arbitrary scales, the ability to work interchangeably with local or remotely accessed data, and developing support for publication and collaboration.”

Silver Gene

It’s a great data visualisation and collaboration tool. If you want to see it in real life, it’s available online here: http://www.mquter.qut.edu.au/silvergenebeta/silvergenebeta.html.

Technorati Tags: ,,

Girl Geek Dinners Brisbane – Dinner 3

This month we're going to mix it up a bit and have a “Coffee and Chic Flick” night.  We'll meet at the Cafe next to the Southbank Cinemas for a coffee and chat and follow it up with a movie.

Thanks to Lisa for suggesting Australia – AUSTRALIA is an epic and romantic action adventure, set in that country on the explosive brink of World War II. In it, an English aristocrat (NICOLE KIDMAN) travels to the faraway continent where she meets a rough-hewn local (HUGH JACKMAN) and reluctantly agrees to join forces with him to save the land she inherited.

Register for the event here: http://girlgeekdinnersbrisbane03.eventbrite.com/

Snoop – My new best friend for WPF debugging

One of my favourite tools to help me with WPF at the moment is Snoop (http://blois.us/Snoop/). It's really handy to do some visual debugging of WPF at runtime. It allows you to explore the visual tree of you application, and all it's associated properties.

snoop

I found it useful to debug what resources I'm actually using as well as where and/or what elements I've used to make up the screen.

The 3d View is very cool. It allows you to see an exploded view of the UI and how it's put together and you can rotate it to get a better view.

Technorati Tags: ,

Twittering Virtual Earth

3 months ago I kicked off a little experiment on twitter, http://twitter.com/virtualearth. As a Windows Live MVP I decided to tweet everything interesting I come across with Virtual Earth and also actively engage others tweeting about Virtual Earth.

VETwitter

This weekend I hit 100+ followers and feel I’m really starting to connect with others around the world interested in this technology. I tweet interesting Articles, blogs post and links specifically on Virtual Earth, nothing else.

I use the twitter search to find others talking about VE. Slowing people that are following virtualearth reply with new work and links that they have done, I share this across the network as well as checking it out myself.

If your interested in Virtual Earth follow http://twitter.com/virtualearth and send interesting things to share.

What do you think of Twitter as a community building tool? Do you find there is too much noise? On my personal twitter account: http://twitter.com/soulsolutions I find I can’t follow people who tweet about every minute of their lives. However I love keeping in touch with others in the industry and love finding out quickly about news and cool stuff.

What does worry me is news that twitter could be charging for commercial use of their service, I wonder where that will leave people? Will people be able to pay or bid to take your twitter handle? Will we get authorised spam from companies that pay for advertising? Should you commit to building networks on sites that plan to make money from it and yet haven’t worked (or announced) that bit out?

It will be interesting to see how twitter evolves.

We are on Xbox Live!

Extending on our current addiction of Guitar Hero we took up the awesome deal on an Xbox Arcade and equipped ourselves with RockBand and Guitar Hero: World Tour. The New Xbox dashboard just got released so we made up some gamertags to share.

Feel free to add us as friends and challenge us to a game!

Have you made yourself a 3D character yet?

The Soul Solutions Guitar Hero World Tour Band

Armed with 4 people and a combo of Rockband and Guitar Hero World Tour instruments we got our Soul Solutions Band together – Smiffy on Vocals, John on Bass, me on Lead and Kim on drums.

GHWT_SS 

I’m finding Rockband and GHWT so fun and very addictive, especially when you have 4 people playing in one place! I really love that we can all play at whatever level suits us for our instruments.

Virtual Earth Basics Part 1 – Loading the Map

Welcome to the first part in series that takes you through the core functionality of the Microsoft’s Virtual Earth JavaScript control. Through example code I hope to either introduce you to the Virtual Earth control or show you how to do things better and highlight some things you may not have known. I will be making use of the jQuery JavaScript library to provide valuable helper functions and simplify our code. If you feel there is something that could done better please share your ideas in the comments below.

Lets start by loading the Virtual Earth map on a page. Sounds trivial? Well it is, but lets do it as if you were building a real world application and include:

  • Browser detection to only load the map for supported browsers
  • Binding to the body onload method programmatically as you may not have access to the actual HTML tag
  • Dispose the map when you are done
  • Load the Virtual Earth JavaScript after the page has loaded to make things load fast
  • Have a onLoadedMap method where you can add your data once the map has loaded
  • Put your code and styles in external files from the HTML page itself

 VEBasicsPart1LoadingTheMapFiles

LoadingTheMap.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Loading the Virtual Earth Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/LoadingTheMap.htm.js"></script>
</head>
<body>
    <div id="mymap" style="position:relative; width:800px; height:600px; overflow:hidden;"></div>
</body>
</html>

The Virtual Earth controls requires some specific features in your HTML page:

  • A DocType of XHTML
  • A meta tag for UTF-8
  • A <div></div> for the map itself with unique explicit ID
  • Inline styles set on the map div setting:
    • The position to either relative or absolute
    • Width
    • Height
    • Recommended to hide any overflow, the ERO (popup) is rendered outside of this div.

 

In this example note that we do not reference the Virtual Earth JavaScript nor put any JavaScript in the HTML page itself. We reference our stylesheet, our “code-behind” external JavaScript file and the jQuery library.

 

Styles.css

body 
{
    margin:0;
    padding:0;
}

.maploading
{
    background: url(ajax-loader.gif) center center no-repeat;
}

As we had to set the height and width of the map inline there is little to do here, I create a class for our loading animation.

 

LoadingTheMap.htm.js

//jquery 1.2.6 doesn't provide support to getScript from the local cache
//we need to add this ourselves currently
$.getScript = function(url, callback, cache) {
    $.ajax({
        type: "GET",
        url: url,
        success: callback,
        dataType: "script",
        cache: cache
    });
};

//our global map object
var map;

$(document).ready(function() {
    // This event is fired when the DOM is fully loaded
    // Is this browser supported by VE? If not why bother loading a broken control?
    if (!($.browser.msie) && !($.browser.mozilla) && !($.browser.safari)) {
        $("#mymap").html("Virtual Earth is not supported by your browser.")
    } else {
        // set a nice animated gif to show the map is loading
        $("#mymap").addClass("maploading");
        if (!($.browser.msie)) {
            //work around for non ie
            $.getScript("http://dev.virtualearth.net/mapcontrol/v6.2/js/atlascompat.js", "", true);
        }
        $.getScript("http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&onScriptLoad=onscriptload", "", true);
    }
});

function onscriptload() {
    // get rid of our load animation
    $("#mymap").removeClass("maploading");
    //load the map
    map = new VEMap('mymap');
    map.onLoadMap = onMapLoaded;
    map.LoadMap(new VELatLong(-27.47, 153.03), 16, VEMapStyle.Hybrid);
    //do nothing more to the map here, use the onMapLoaded event.
}

function onMapLoaded() {
    //here we can do what we want with the map object, add data etc.
}

$(window).unload(function() {
    // This event is fired when the web page is closing
    // Time to dispose our map
    if (map) map.Dispose();
});

First up jQuery has a nice helper to dynamically load our Virtual Earth JavaScript file but by default it appends a timestamp to prevent caching. At the time of writing we apply this override to provide this option.

We have four events:

  1. “$(document).ready” is when the DOM has loaded and is when we can make dynamic changes, like load the map, without breaking the page and getting the dreaded “operation aborted” error in IE.
  2. “onscriptload” is fired when the Virtual Earth JavaScript has fully loaded, this is when we can load the map.
  3. “onMapLoaded” is fired when the Virtual Earth Map has loaded, this is when we can load data onto the map and attach map events.
  4. “$(window).unload” is fired as the HTML page is unloaded, for example when navigating to another URL, we dispose our map object here.

Let’s walk through the actual steps involved, the comments in the code explain the code.

  1. First up lets check if the browser is actually supported by Virtual Earth (IE, FireFox and Safari), if not lets just show a message.
  2. While the map is loading lets put a nice animated gif on the map’s div to show it is loading. We do this using CSS.
  3. If the browser is not IE then we have to load the compatibility script prior to the VE script. This is a workaround that may become redundant in time.
  4. Load the Virtual Earth JavaScript
  5. Remove the loading animation
  6. Create the map
  7. Do something with the map
  8. Dispose the map

The creation of the Virtual Earth map is two lines of code:

map = new VEMap('mymap');
map.LoadMap(new VELatLong(-27.47, 153.03), 16, VEMapStyle.Hybrid);

First we create our map object passing the ID of the Div from our page in the constructor, the we load the map with our initial properties. The API defines this as:

VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer, mapOptions);

Parameter Description

VELatLong

A VELatLong Class object that represents the center of the map. Optional.

zoom

The zoom level to display. Valid values range from 1 through 19. Optional. Default is 4.

style

A VEMapStyle Enumeration value specifying the map style. Optional. Default is VEMapStyle.Road.

fixed

A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change. Optional. Default is false.

mode

A VEMapMode Enumeration value that specifies whether to load the map in 2D or 3D mode. Optional. Default is VEMapMode.Mode2D.

showSwitch

A Boolean value that specifies whether to show the map mode switch on the dashboard control. Optional. Default is true (the switch is displayed).

tileBuffer

How much tile buffer to use when loading map. Default is 0 (do not load an extra boundary of tiles). This parameter is ignored in 3D mode.

mapOptions

A VEMapOptions Class that specifies other map options to set.

Importantly all of these parameters are options, for example I only supplied the center, zoom and style.

The actual URL for the Virtual Earth JavaScript is:

http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2

Where the parameter “v” is the version. We supplied an additional optional parameter “onScriptLoad” that is the function executed when the script has fully loaded. The script itself is currently 217.7K compressed (943.6K uncompressed), it may take a few seconds to load on the clients browser, hence we only load it if it will be supported by the browser and after the initial page has loaded to provide a good user experience. The script has a complex cache expiry date to ensure that all users can receive monthly updates as required.

Additionally you can supply a “mkt” parameter to provide localized tiles, find and direction results. The following table provides the options currently available:

Language – Country/Region Culture Feature Support

Czech – Czech Republic

cs-CZ

VEMap.Find, VEMap.GetDirections

Danish – Denmark

da-DK

VEMap.Find, VEMap.GetDirections

Dutch – Netherlands

nl-NL

VEMap.Find, VEMap.GetDirections

English – Australia

en-AU

VEMap.GetDirections using MWS

English – Canada

en-CA

Map control dashboard, VEMap.Find, VEMap.GetDirections using MWS

English – India

en-IN

VEMap.GetDirections using MWS

English – United Kingdom

en-GB

VEMap.GetDirections using MWS

English – United States

en-US

All features. This is the default culture.

Finnish -Finland

fi-FI

VEMap.Find, VEMap.GetDirections

French – Canada

fr-CA

Map control dashboard, 3D dialogs, VEMap.Find, VEMap.GetDirections, map labels

French – France

fr-FR

Map control dashboard, 3D dialogs, VEMap.Find, VEMap.GetDirections, map labels

German – Germany

de-DE

Map control dashboard, VEMap.Find, VEMap.GetDirections, map labels

Italian – Italy

it-IT

Map control dashboard, 3D dialogs, VEMap.Find, VEMap.GetDirections, map labels

Japanese – Japan

ja-JP

Map control dashboard, 3D dialogs, VEMap.Find, map labels

Norwegian (Bokmal) – Norway

nb-NO

VEMap.Find, VEMap.GetDirections

Portuguese – Brazil

Pt-BR

VEMap.Find, VEMap.GetDirections

Portuguese – Portugal

pt-PT

VEMap.Find, VEMap.GetDirections

Spanish – Mexico

es-MX

VEMap.GetDirections using MWS, map labels

Spanish – Spain

es-ES

Map control dashboard, VEMap.Find, VEMap.GetDirections, map labels

Spanish – United States

es-US

Map control dashboard, VEMap.Find, VEMap.GetDirections using MWS, map labels

Swedish – Sweden

sv-SE

VEMap.Find, VEMap.GetDirections

 

Get the code

View a live demo HERE

Download the full source code HERE

Summary

In this article you have seen that, although the Virtual Earth is loaded in only two lines of JavaScript, to provide the best experience to your users and to ease your development some extra thought and logic is required. Feel free to download the code or view the live example. I would love to hear your feedback, suggestions and improvements. Stay tuned for the next article.

Catherine plays with Lego at PDC

Checkout Catherine’s latest Geek Girl Blogs set of podcasts on the Women Build event she attended at PDC. She managed to interview a bunch of famous Microsoft staff at the event, including Frank Arrigo and Lindsay Rutter.

Sounds like she had a great time at the event and I hope it makes it’s way out to Australia one day soon!

New 24mm Prime Lense.

I’ve inherited Bronwen’s old 350d upgrading her to the 450d with its massive 3” screen. Since I pretty much just take panoramas I decided to get a 24mm prime lense. This seems to be the lense of choice for full frame sensors, however the 350d is not full frame. I don’t really know enough about the optics but I find anything below about 20mm distorts around the edges, that fisheye effect. Since I’m stitching many photos together I really don’t want this. So I found this bargain F2.8 24mm. And our friendly kookaburra volunteered to be my first subject.

Kookaburra

Do you have a lense of choice for taking panoramas? Should your choice be different for a full frame and 2/3 sensor like the 350d?

October – a few month in review

Wow! I can’t believe I haven’t done one of these since the end of July! Looks like I have a few months to catch up on.