Silverlight 5 Release Candidate

Posted on September 2, 2011 by Mike Taulty

The release candidate for Silverlight 5 is now available for download over on the Silverlight.NET site. You can go there directly;

http://www.silverlight.net/learn/overview/what's-new-in-silverlight-5

or, alternatively, pop over to Pete Brown’s blog where he’s got a write up;

http://10rem.net/blog/2011/09/01/silverlight-5-rc-now-available

including a number of links to posts that Pete’s updated from the beta to the RC.

One thing I’d say is that there isn’t yet an updated version of Expression Blend for this RC and I believe that the existing “Expression Blend Preview for Silverlight 5” that you might have installed will not work with the updated bits so if you’re wanting Blend support then it might be worth waiting a little for Blend to get in sync with Silverlight.

I’ll be trying to catch up with the RC myself over the coming week or two.

Windows Phone 7 App–ContactShare

Posted on June 7, 2011 by Mike Taulty

I wanted to have a bit of fun with Windows Phone 7 and so I thought I’d build a little application as a background task.

One thing that I miss from previous phones is that scenario where you meet someone and want to quickly swap contact details. With previous phones there was a notion of “beam contact” which relied on an IR link but that seems to be old hat these days and so I thought I’d see if I could come up with something a little more “modern” that would work on the phone without requiring a cloud connection.

I daresay someone’s done this already but, regardless, I had fun working at it Smile and decided to try and make the idea of “photographing the contact” work. This led me to look at QRCodes and, specifically, I looked around for the “right” way to represent some basic contact information such as;

first name
last name
email address
phone number

in a QRCode and the best thing that I could find which seemed to fit was a MECARD which takes the format of a string looking something like;

With that decided, I needed a library that would let me encode/decode QRCodes on the Windows Phone 7 and I very quickly found Google’s excellent zebra crossing library and a port of it over to the Windows Phone 7 and Silverlight over on CodePlex.

With all that in place, I was ready to try and build a little app. It ended up working as below.

Creating a QRCode for your Contact Details

When the application runs up for the first time, it asks for contact details;

and as soon as you’ve typed in anything and hit the Store Changes button it persists those details into isolated storage and the next pivot item along will change from displaying a place holder to displaying a QR code that represent your contact details;

When the application starts up in the future, it will spot that it has persisted stage and switch straight to that QRCode pivot ready for someone else to take a photo of it on their phone and import it into their contacts. Speaking of which…

Importing a QRCode to Contacts

One way of importing a contact from someone else’s phone is to get them to run the app which will quickly launch and display their QRCode and then you run the app and switch to the next pivot item along;

where’s there’s a button that will let you take a photograph and then import it as a contact. Once the contact is imported, there are context menus that let you save the telephone number or the email address that you just imported using the standard experience on the phone.

A Quick Demo

There’s nothing like a quick demo for bringing things to life so here’s a little video of the app in use;

The other way of importing a contact is to start with the camera, take a photo and then my app hooks into the pictures extensibility on the phone so that you can launch my app straight from the camera.

This isn’t in the version that’s in the marketplace today (I’m currently in the process of updating) but it does provide a second path to the same functionality;

That’s it – not a whole lot to it but I did pick up one or two things along the way…

Lessons Learned in Building for the Windows Phone 7

In putting this together, there’s a few things that I learned about the phone which experienced developers will already know but I’ve not been building phone apps since the very early days so I thought I’d share my top thoughts;

You have to remember that it’s Silverlight 3 today (4 is coming ) so there were a few places where I felt that I wanted to use some feature (e.g. StringFormat on my bindings) and I couldn’t.
Debugging on the Phone is pretty good but I feel it could be a little better. Specifically;
1. Having to keep unlocking the phone to launch the debugger is a bit painful.
2. Having to do the Zune/WPConnect dance every so often soon becomes second nature but it’s a step that it would be nice to be able to avoid.
3. Not being able to “attach” to an existing process on the phone makes it kind of tricky to debug scenarios where you can’t just launch your app from the debugger. The specific scenario for me is extending the pictures hub where you can’t launch your app under the debugger.
4. I did come across the idea of the debugging console though which was useful.
State management on the phone takes a couple of goes to figure out. My recommendation would be to do something like;
1. Build a simple app with 2 pages that navigate to each other.
2. Set breakpoints in your code for;
  1. PhoneApplicationPage.OnNavigatedTo
  2. PhoneApplicationPage.OnNavigatedFrom
  3. PhoneApplicationPage.OnNavigatingFrom (note the importance of this one is that it lets you know if you have a back navigation in progress)
  4. Application.Launching
  5. Application.Activated
  6. Application.Deactivated
  7. Application.Closing
3. And exercise your code until you fully understand when these events happen in terms of the lifecycle of the application on the phone.
There are certain things on the phone that cause you a minor headache when you’re trying to work in an MVVM way. Specifically for me;
1. If you’re using launchers/choosers then you have to have specific instance variables on your PhoneApplicationPage class and then you need to find a way to route that work to your view models.
2. You have to override OnNavigatingFrom etc. on your PhoneApplicationPage class so that means that you have to find a way of routing that to your viewmodels etc.
You need to take some care with fonts, icons, brushes etc. so that they will work in different themes. Generally, I just stuck to the standard system resources but I did find this article on using opacity masks very useful.
I found myself bringing in some of the Expression Blend samples library to try and support some of my bindings to events/commands – specifically the InvokeDataCommand that is part of that library.
Some of the things coming in the forthcoming ‘Mango’ release would be welcomed here. Some thoughts;

Direct access to the camera might be interesting.
At the moment my app has to offer “Save Email” and “Save Phone” options because there are two separate tasks relating to this. It’d be nice if the contacts access in ‘Mango’ would allow this to be streamlined a little.

All in all – a lot of fun. It took me a few hours or so to put that app together but I daresay quite a bit of that was in trying to fathom out a few things on the Phone that I wouldn’t need to re-learn the next time around.

Let me know if you try it and find it working (or not Smile ) – you can search for ContactShare on the marketplace to give it a whirl and, naturally, it’s free.

Blend Bits 25–Templating Part 3

Posted on February 14, 2011 by Mike Taulty

Another important part of templating contols in Blend is the ability to go from the control parts to the control quite quickly.

This works incredibly quickly for something like a Button – let’s say that I wanted an irregularly shaped button. If I just go ahead and draw a Path like this one;

then there’s a difference between this Path being inside a regular Button as the content using the regular template for a Button as in;

and the Path itself actually being a Button in the sense of getting rid of all the additional Chrome that we’ve got here and just leaving the Path. I can quickly achieve the latter by right mousing on the Path and using;

and Blend will ask me what I’m trying to do;

and the usual questions about where to put the resulting style that I’m going to end up creating here and once I’ve made those selections it will make me a new style for a Button and drop me into the template editor for the template within that style and it’ll drop my content (the Path) into that template.

It also drops in a ContentPresenter here which I can just remove if I don’t want it;

and that would leave me with a template for a Button which displays and hit-tests around this “hard-coded” star polygon and I’ve very quickly gone from drawing a shape on the artboard to making a new control template.

As an aside, it’s more likely here that what I’d really want is to leave the ContentPresenter where it is and get rid of the Polygon so that I’ve then made a Button style which can display arbitrary content without any chrome. Every time I then use this Button template I can drop the right content (e.g. the polygon) into it.

Buttons are simple though, let’s say that it’s a more complex control like a ScrollBar that I’m trying to redefine. Blend itself has nice looking scrollbars;

that I might want to reproduce.

This does require a little knowledge of how the ScrollBar is made up but, nonetheless, I can quickly draw out a Grid onto the artboard that has 5 columns in it as in;

I can set the Background to some colour;

and then add a triangle shape into the first and the last column, setting the height to a value of 16 and letting the width figure itself out and telling the grid columns to automatically size themself to the content ( and not forgetting to get rid of any minimum size value on those columns );

Now, I can add a “thumb” rectangle into the middle of the grid, once again telling that column to auto size itself;

and, lastly, I can add rectangles into the remaining 2 columns;

It’s not immediately obvious what these rectangles are for but the ScrollBar control has an expectation around particular parts being present when it is redefined and these 2 rectangles will play a part.

I’ve left all columns set to auto-size except column 3 which is set to claim any remaining space ( star-sized ).

With that quickly sketched out, I can right mouse on the grid and hit “make into control”;

which gives me a choice around what kind of control I’m trying to make;

and the usual Blend choice around whether this is an implicit/explicit style and where to put the resulting style from a resource perspective. If I make my choices then I’m left editing my new template;

which already has my UI pieces within it. I can go and open up the Parts panel and see what parts there are for a ScrollBar;

I’ve only drawn one half of a ScrollBar template because it has 2 separate (very similar) sections for a vertical ScrollBar and a horizontal ScrollBar but I can now start to turn my UI elements into recognised parts of the ScrollBar;

Now, the thing to know about this is that I have a Path depicting a triangle here but what the ScrollBar is expecting as this part of its control is a RepeatButton.

Consequently, Blend raises a UI for me which tries to bridge the gap between what I have ( Path ) and what I need ( RepeatButton ). I could avoid this by simply replacing my Path with a RepeatButton which contained the Path and then Blend wouldn’t try and help me bridge the gap.

In this instance, what I chose to do is to insert a RepeatButton, set its template to {x:Null} and then drop my Path inside of it.

I repeated that process with the triangle in the 4th column of my Grid and then identified these 2 RepeatButtons as the HorizontalSmallDecrease and HorizontalSmallIncrease parts of my ScrollBar as in;

It’s a similar story for the HorizontalLargeIncrease and HorizontalLargeDecrease parts of the ScrollBar template and so I followed the same procedure for those ( my 2 rectangles living in columns 1 and 3 ) leaving;

All that’s left is to select the remaining Rectangle and make it into the “HorizontalThumb” of my ScrollBar’s template. Once again, Blend notices that we need a Thumb but we have a Rectangle and so offers to re-template the Thumb for me;

and this time I go along with it and allow Blend to make a template for the Thumb for me;

which I just change a little with respect to margins and strokes and then come out of editing that template to take a look how my ScrollBar is coming along;

I also marked up the Grid as being the HorizontalRoot of the ScrollBar and with that I’ve got a redefined ScrollBar that looks a bit more like the ones in use in Blend.

I can test it out by adding a big image to my project and then dropping it into a ScrollViewer on my artboard and telling that ScrollViewer to scroll horizontally (i.e. setting HorizontalScrollBarVisibility to Auto rather than Disabled ).

I can then edit the ScrollViewer’s template;

and within there go ahead and change the horizontal ScrollBar such that it uses my new template;

and then I’ve got my new ScrollBar template in use;

and I can run and test it “live” in the application where it looks to work fine.

This is an alternative way of viewing template creation. Rather than starting out in the template editor, you start by drawing out the UI elements and then you use “make into control” to take those parts into the template editor.

For some templated controls like the ScrollBar here it’s important that they can identify certain elements in your replacement UI. The ScrollBar needs to be able to size things properly and so it needs to be able to identify the Thumb and so on and this is where Blend helps out with the Parts tab by making it easy for you to specify which of your UI elements make up that particular part of the control that you’re templating.

In terms of this ScrollBar, I’d need to go back and add the template for the vertical orientation and I’d also perhaps want to change some of the brushes that I’m using such that rather than being hard-wired into the template they, instead, relied on template binding to pick up brushes that the user wants to use when they come to define their ScrollBar instances…

Mike Taulty

I do some developer stuff on Microsoft technologies in the UK

Category Archives: Expression