Binding to the TitleTemplate in a Windows Phone Panorama Control

When building Windows Phone applications it is very common to use the Panorama Control to setup your layout.  But did you know that you have the ability to apply a template to the Panorama’s title (remember the title is for the entire panorama, not each individual panel)?  Better yet did you know that you can bind to Title?  Well, you can.  However, the way that you bind to the TitleTemplate can be a little less than intuitive if you ask me.

For the sake of our post, lets say that my I want to put a logo in the title of my Panorama control and I want to configure it so that if you clicked on the logo the user would be navigated back to the main landing page.  How would I do this?

The first thing I would do is setup my template and apply it to my Panorama control.  In order to bind to the Title Template you would first want to either setup your template inline, or as a static resource.  I personally like to define mine as a static resource as I expect to want to reuse my template.

To apply your template once you have it defined you would do as you see below

TitleTemplateBinding

You can see I am binding my template (Template:PanoramaCorporateBanner – defined in a shared resource dictionary) to the TitleTemplate dependency property as you would expect.

Now that I have my Template applied I need to wire it up so that when I bind my View Model to the view that bindings in the TitleTemplate will work.  This is the part that I feel is a little less than intuitive.  To get the binding to work you will want to apply bindings to the Title dependency property as seen below.

TitleBinding

If you simply do an empty binding the control will bind itself to the the View Model attached to the root of the page, which is what I wanted.

Hope this helps.

Till next time,

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

Comments are closed.