Panorama Tricks – Using XAML for your Background
If you are doing Windows Phone 7 development, chances are that you are either using or have considered using the Panorama. To make a truly glorious Panorama application, to immerse the user in the experience, or for branding purposes, many applications pay a lot of attention to the background. The Panorama has a Background property of type Brush. Although this is most often used with an ImageBrush, it can also be a SolidColorBrush or a BradientBrush. Using gradients is not recommended, unless you are a fan of color banding. It would be nice if the ImageBrush could be used with a WriteableBitmap, but that doesn’t work. But there is something better…
Unlocking Panorama.Background to allow arbitrary content
If you examine Panorama.UpdateBackground using Reflector, you can see that the background ContentPresenter’s Height is always set to the viewport’s height. It handles a Background that is set to a SolidColorBrush by setting width of the background’s ContentPresenter to the viewport width; if it is a GradientBrush, it sets the width to the width of the items; for ImageBrush it does some magic to wait for the image to be loaded, and then sets the background’s width to the pixel width of the image. It also sets a property ominously called “IsStatic”. Keen observers will also be able to see why WriteableBitmaps can’t be used as the ImageSource of your ImageBrush. But you don’t really want that anyway, because the perf is not good, and anything you can do with a WriteableBitmap, by definition you can do with XAML.
If you want to be able to put arbitrary XAML in the background, you need to somehow do two things:
- set the width of the background’s ContentPresenter
- set IsStatic to false
You can get this done in code, but it is a bit of a pain, and frankly, a little sketchy. Fortunately, there’s an easier way to do this. Remember the good old days of getting stuff to go where you want it in HTML by using 1 x 1 pixel transparent GIFs? Well, I don’t propose doing anything as old-school-hacky as that. No, this method uses a modern 1 x N transparent PNG (where N is the desired width of your background.) OK, I guess this is a little on the sketchy side, too, but like I said, it has the virtue of being easy.
The attached solution includes “dummy.png”, an 800 x 1 transparent PNG that I created using Paint.NET. It is included in the project, and the build action is set to “Resource”. In the main page’s XAML, the Panorama.Background is set to an ImageBrush that has dummy.png as its ImageSource. The other thing that we have to do is to re-template the Panorama, to include our new spiffy XAML background. Here’s what the page looks like:
Code Snippet
<phone:PhoneApplicationPage
x:Class="PanoramaXamlBackground.MainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="panoramaTemplate" TargetType="controls:Panorama">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" Grid.RowSpan="2" HorizontalAlignment="Left">
<Border x:Name="background" CacheMode="BitmapCache">
<Grid Background="Transparent">
<Rectangle Width="400" Height="200" Fill="Blue" Opacity=".5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="32"/>
<Rectangle Width="300" Height="600" Fill="Green" Opacity=".5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="300,128"/>
<Rectangle Width="600" Height="100" Fill="Red" Opacity=".5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="200,500,0,0"/>
<Ellipse x:Name="indicator" Width="50" Height="50" Fill="Orange" Opacity=".5" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="16">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="indicator" Storyboard.TargetProperty="Opacity">
<DoubleAnimation To="0" AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Border>
</controlsPrimitives:PanningBackgroundLayer>
<controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" Grid.Row="0" HorizontalAlignment="Left" Margin="10,-76,0,9"
Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" CacheMode="BitmapCache"/>
<controlsPrimitives:PanningLayer x:Name="ItemsLayer" Grid.Row="1" HorizontalAlignment="Left">
<ItemsPresenter x:Name="items"/>
</controlsPrimitives:PanningLayer>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot">
<controls:Panorama Template="{StaticResource panoramaTemplate}" Title="xaml background">
<controls:Panorama.Background>
<ImageBrush ImageSource="dummy.png"/>
</controls:Panorama.Background>
<controls:PanoramaItem Header="home"/>
<controls:PanoramaItem Header="item 1"/>
<controls:PanoramaItem Header="item 2"/>
</controls:Panorama>
</Grid>
</phone:PhoneApplicationPage>
You can see the Panorama’s Background being set to dummy.PNG (line 64). The new background is set in lines 29-44. Although this doesn't need it, not having any colors near the edges, you can also apply a margin to prevent seaming. Here there is a reward for the keen observer. You will notice that there is a subtle animation on the Ellipse. Yes, this is a Panorama with an animated background. But please, if you’re going to travel down that path, keep it subtle, and watch that frame rate counter. And beware of wrapping artifacts. The Panorama is not designed to have a dynamic background. And keep both light and dark themes in mind.
Comments
Anonymous
October 05, 2010
The comment has been removedAnonymous
October 06, 2010
@indyfromoz - if you can send me a link to a minimal repro app, I can take a look. This might be happening because the Panorama caches a WriteableBitmap of the background, and maybe it is caching the background before it fades in.Anonymous
October 06, 2010
Dave, I can't post links to code/sample application I have for you through the comments. I have sent you an email with the Email form available, I hope you receive it. Thank you for your help. indyfromozAnonymous
October 12, 2010
@indyfromoz - I got your app and was able to repro the issue. It is what I expected. It is faded out when the caches are created. Sorry, I don't have a better workaound than your margin trick.