Question

I am working on a Windows Phone 7 project with a panorama on the MainPage and multiple simple pages. All my pages have a background set this way:

<local:PhoneApplicationPage>
    <Grid Background="{StaticResource PageBackground}">
        content here
    </Grid>
</local:PhoneApplicationPage>

PageBackground is an application resource set in default.xaml and light.xaml this way:

<ImageBrush x:Key="PanoramaBackground" ImageSource="/Resources/PanoramaBackground01Dark.jpg" Stretch="None" />
<ImageBrush x:Key="PageBackground" ImageSource="/Resources/PageBackground01Dark.jpg" Stretch="None" />

The PageBackground01Dark.jpg picture is of size 800×800 px.

When a page is displayed in the Portrait orientation, the picture is centered correctly horizontaly and the picture height corresponds to the page height. This is fine.

When a page is displayed in the Landscape orientation, the picture width corresponds to the page width but the picture is then centered vertically.

I would like my background picture to be “topped” in the page.

The Background property of a Grid is a brush with no interesting options. I would like not to create 2 pictures for this. There should be an obvious solution. Here is the result I would like to have:

Answer 1

Oh, the solution is simple. The Background property is of type Brush but it’s in fact an ImageBrush. So the solution is:

<ImageBrush x:Key="PageBackground" 
            ImageSource="/Resources/PageBackground01Dark.jpg"
            AlignmentY="0" />