Capturing Windows Phone 7 Panorama Images

The Windows Phone 7 Panorama control is widely used in applications and to many has come to symbolise the Metro Design Language. Search for panorama images and you will find numerous promo-shots of Windows Phone 7 applications which display the panoramic contents of the application hub, with an imag

A Technical Blog article. View original blog here.[^]

The image below shows a promo-shot for XAMLFinance, an application I have been working on:

XAMLFinancePanoramaSmall

Creating images like the one above takes a bit of work, fortunately you can turn off the parallax scrolling effect of the control (as described in this blog post), allowing for easier image stitching, however the process is still quite manual.

For a bit of fun I thought it would be nice to template the Panorama control itself in order to display the full panorama contents on the emulator within a single screen, so that I can create my promo-shot with a single screengrab.

Unfortunately, the Panorama control is a little too tightly coupled to its template to allow this kind of radical re-design, so the next best options is to create a new page that hosts my PanoramaItems within an ItemsControl and style that.

So, we’ll start with a page which hosts our items within an ItemsControl:

<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ItemsControl</span> <span style="color: rgb(0, 0, 102);">Style</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource ItemsControlStyle}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ItemsControl.Background<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ImageBrush</span> <span style="color: rgb(0, 0, 102);">ImageSource</span>=<span style="color: rgb(255, 0, 0);">"PanoramaBackground.jpg"</span> <span style="color: rgb(0, 0, 102);">Opacity</span>=<span style="color: rgb(255, 0, 0);">"0.5"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ItemsControl.Background<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
    <span style="color: rgb(128, 128, 128); font-style: italic;"><!--Panorama item one--></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><controls:PanoramaItem</span> <span style="color: rgb(0, 0, 102);">Header</span>=<span style="color: rgb(255, 0, 0);">"item1"</span> <span style="color: rgb(0, 0, 102);">Style</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PanoramaItemStyle}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            ...
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></controls:PanoramaItem<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
    <span style="color: rgb(128, 128, 128); font-style: italic;"><!--Panorama item two--></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><controls:PanoramaItem</span> <span style="color: rgb(0, 0, 102);">Header</span>=<span style="color: rgb(255, 0, 0);">"item2"</span>  <span style="color: rgb(0, 0, 102);">Style</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PanoramaItemStyle}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            ...
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></controls:PanoramaItem<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
    <span style="color: rgb(128, 128, 128); font-style: italic;"><!--Panorama item three--></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><controls:PanoramaItem</span> <span style="color: rgb(0, 0, 102);">Header</span>=<span style="color: rgb(255, 0, 0);">"item3"</span>  <span style="color: rgb(0, 0, 102);">Style</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PanoramaItemStyle}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            ...
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></controls:PanoramaItem<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ItemsControl<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>

We need to shrink each of those PanoramaItem instances so that they all fit on a single screen. We can easily shrink them with a ScaleTransform, however Silverlight only supports render transforms, what we really need here is a transform that affects layout also (for a brief overview of the difference see this blog post). Fortunately the Silverlight Toolkit has a LayoutTransformer class which emulates this behaviour, and whilst it is not available in the WP7 release, copying the code across I found it to be entirely compatible with the Silverlight WP7 version.

We can shrink our PanoramaItems as follows:

<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><system:Double</span> <span style="color: rgb(0, 0, 102);">x:Key</span>=<span style="color: rgb(255, 0, 0);">"Scale"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>0.5<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></system:Double<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Style</span> <span style="color: rgb(0, 0, 102);">x:Key</span>=<span style="color: rgb(255, 0, 0);">"PanoramaItemStyle"</span> <span style="color: rgb(0, 0, 102);">TargetType</span>=<span style="color: rgb(255, 0, 0);">"controls:PanoramaItem"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"Width"</span> <span style="color: rgb(0, 0, 102);">Value</span>=<span style="color: rgb(255, 0, 0);">"260"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"Height"</span> <span style="color: rgb(0, 0, 102);">Value</span>=<span style="color: rgb(255, 0, 0);">"290"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"Template"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ControlTemplate</span> <span style="color: rgb(0, 0, 102);">TargetType</span>=<span style="color: rgb(255, 0, 0);">"controls:PanoramaItem"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
        <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- apply a LayoutTransform to the content in order to scale it --></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><local:LayoutTransformer<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><local:LayoutTransformer.LayoutTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ScaleTransform</span> <span style="color: rgb(0, 0, 102);">ScaleX</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource Scale}"</span></span>
<span style="color: rgb(0, 153, 0);">                                            <span style="color: rgb(0, 0, 102);">ScaleY</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource Scale}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></local:LayoutTransformer.LayoutTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
          <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- the original content of the template follows --></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid</span> <span style="color: rgb(0, 0, 102);">Background</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Background}"</span> <span style="color: rgb(0, 0, 102);">Margin</span>=<span style="color: rgb(255, 0, 0);">"12,0,0,0"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid.RowDefinitions<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
              <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><RowDefinition</span> <span style="color: rgb(0, 0, 102);">Height</span>=<span style="color: rgb(255, 0, 0);">"auto"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
              <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><RowDefinition</span> <span style="color: rgb(0, 0, 102);">Height</span>=<span style="color: rgb(255, 0, 0);">"*"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid.RowDefinitions<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ContentControl</span> <span style="color: rgb(0, 0, 102);">x:Name</span>=<span style="color: rgb(255, 0, 0);">"header"</span></span>
<span style="color: rgb(0, 153, 0);">                            <span style="color: rgb(0, 0, 102);">ContentTemplate</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding HeaderTemplate}"</span></span>
<span style="color: rgb(0, 153, 0);">                            <span style="color: rgb(0, 0, 102);">Content</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Header}"</span></span>
<span style="color: rgb(0, 153, 0);">                            <span style="color: rgb(0, 0, 102);">FontSize</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PhoneFontSizeExtraExtraLarge}"</span></span>
<span style="color: rgb(0, 153, 0);">                            <span style="color: rgb(0, 0, 102);">FontFamily</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PhoneFontFamilySemiLight}"</span></span>
<span style="color: rgb(0, 153, 0);">                            <span style="color: rgb(0, 0, 102);">HorizontalAlignment</span>=<span style="color: rgb(255, 0, 0);">"Left"</span> <span style="color: rgb(0, 0, 102);">Margin</span>=<span style="color: rgb(255, 0, 0);">"10,-2,0,26"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
              <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ContentControl.RenderTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
                <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><TranslateTransform</span> <span style="color: rgb(0, 0, 102);">x:Name</span>=<span style="color: rgb(255, 0, 0);">"headerTransform"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
              <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ContentControl.RenderTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ContentControl<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ContentPresenter</span> <span style="color: rgb(0, 0, 102);">Content</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Content}"</span></span>
<span style="color: rgb(0, 153, 0);">                              <span style="color: rgb(0, 0, 102);">HorizontalAlignment</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding HorizontalContentAlignment}"</span></span>
<span style="color: rgb(0, 153, 0);">                              <span style="color: rgb(0, 0, 102);">Margin</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Padding}"</span> <span style="color: rgb(0, 0, 102);">Grid.Row</span>=<span style="color: rgb(255, 0, 0);">"1"</span></span>
<span style="color: rgb(0, 153, 0);">                              <span style="color: rgb(0, 0, 102);">VerticalAlignment</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding VerticalContentAlignment}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></local:LayoutTransformer<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ControlTemplate<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Style<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>

Now we need to styles and template the ItemsControl so that it looks like a Panorama. This is done as follows:

<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Style</span> <span style="color: rgb(0, 0, 102);">TargetType</span>=<span style="color: rgb(255, 0, 0);">"ItemsControl"</span> <span style="color: rgb(0, 0, 102);">x:Key</span>=<span style="color: rgb(255, 0, 0);">"ItemsControlStyle"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"VerticalAlignment"</span> <span style="color: rgb(0, 0, 102);">Value</span>=<span style="color: rgb(255, 0, 0);">"Center"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"HorizontalAlignment"</span> <span style="color: rgb(0, 0, 102);">Value</span>=<span style="color: rgb(255, 0, 0);">"Center"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"ItemsPanel"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ItemsPanelTemplate<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><tk:WrapPanel</span> <span style="color: rgb(0, 0, 102);">Orientation</span>=<span style="color: rgb(255, 0, 0);">"Horizontal"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ItemsPanelTemplate<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter</span> <span style="color: rgb(0, 0, 102);">Property</span>=<span style="color: rgb(255, 0, 0);">"Template"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
      <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- create a template for the ItemControl that makes it look like a panorama--></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ControlTemplate<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
        <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- the grid which displays the  panorama background --></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid</span> <span style="color: rgb(0, 0, 102);">Background</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Background}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><Grid.RowDefinitions<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><RowDefinition</span> <span style="color: rgb(0, 0, 102);">Height</span>=<span style="color: rgb(255, 0, 0);">"auto"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><RowDefinition</span> <span style="color: rgb(0, 0, 102);">Height</span>=<span style="color: rgb(255, 0, 0);">"*"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid.RowDefinitions<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
          <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- the title, scaled to match the PanoramatItems--></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><local:LayoutTransformer<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><local:LayoutTransformer.LayoutTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
              <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ScaleTransform</span> <span style="color: rgb(0, 0, 102);">ScaleX</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource Scale}"</span></span>
<span style="color: rgb(0, 153, 0);">                              <span style="color: rgb(0, 0, 102);">ScaleY</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource Scale}"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></local:LayoutTransformer.LayoutTransform<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
            <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><TextBlock</span> <span style="color: rgb(0, 0, 102);">Text</span>=<span style="color: rgb(255, 0, 0);">"{TemplateBinding Tag}"</span></span>
<span style="color: rgb(0, 153, 0);">                       <span style="color: rgb(0, 0, 102);">FontSize</span>=<span style="color: rgb(255, 0, 0);">"180"</span></span>
<span style="color: rgb(0, 153, 0);">                       <span style="color: rgb(0, 0, 102);">FontFamily</span>=<span style="color: rgb(255, 0, 0);">"{StaticResource PhoneFontFamilySemiLight}"</span></span>
<span style="color: rgb(0, 153, 0);">                       <span style="color: rgb(0, 0, 102);">HorizontalAlignment</span>=<span style="color: rgb(255, 0, 0);">"Left"</span> <span style="color: rgb(0, 0, 102);">Margin</span>=<span style="color: rgb(255, 0, 0);">"10,-2,0,26"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></local:LayoutTransformer<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
 
          <span style="color: rgb(128, 128, 128); font-style: italic;"><!-- the rendered items --></span>
          <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"><ItemsPresenter</span> <span style="color: rgb(0, 0, 102);">Grid.Row</span>=<span style="color: rgb(255, 0, 0);">"1"</span><span style="color: rgb(0, 0, 0); font-weight: bold;">/></span></span>
        <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Grid<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
      <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></ControlTemplate<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter.Value<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
  <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Setter<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>
<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;"></Style<span style="color: rgb(0, 0, 0); font-weight: bold;">></span></span></span>

The end result is that we can see the entire panorama contents in a screen-shot ready state:

The big advantage of this approach is that any changes to the application can be reflected in the promo-shot very swiftly. It is also quite good fun having a fully functioning version of your panoramic hub in miniature!

You can download the sourcecode here: PanoramaShot.zip

Regards, Colin E.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Colin Eberhardt

Architect
Scott Logic

United Kingdom

Member

Follow on Twitter

I am a Technical Architect for Visiblox which have developed the world's fastest WPF / Silverlight and WP7 charts.

I work closely with the ninjas at Shinobi Controls who are carefully crafting iOS charts, grids and controls for you to make applications awesome.

I am also a Technical Evangelist at Scott Logic, a provider of bespoke financial software and consultancy for the investment banking, stockbroking, asset management and hedge fund communities.

Visit my blog - Colin Eberhardt's Adventures in .NET.

Follow me on Twitter - @ColinEberhardt

-

Article Top