Windows Phone app background image

Question

I'm trying to change the background image for all my xaml pages in the app.xaml, unsuccessfully.

I'm trying the following, in the App constructor:

var imageBrush = new ImageBrush
{
    ImageSource = new BitmapImage(new Uri("/Images/SomeBackgroundImage.png", UriKind.Relative))
};

RootFrame.Background = imageBrush;

I don't want to do this at the page level, as all pages will have the same background image depending on the theme selected by the user.

Ideas on what I'm doing wrong here?

Answer 1

What I ended up doing:

I created a method that chooses the correct background image, depending on the theme selected.

public static ImageBrush GetBackground()
{
    var imageBrush = new ImageBrush();

    if ((Visibility)App.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible)
    { 
        imageBrush = new ImageBrush
        {
            ImageSource = new BitmapImage(new Uri("/Images/Background1.png", UriKind.Relative))
        };
    }
    else
    {
        imageBrush = new ImageBrush
        {
            ImageSource = new BitmapImage(new Uri("/Images/Background2.png", UriKind.Relative))
        };
    }

    return imageBrush;
}

And in each page I set the background image.

LayoutRoot.Background = Utils.GetBackground();

Answer 2

Though your code snippet didn't work for me either, using

RootFrame.Background = App.Current.Resources["MainBackground"] as ImageBrush;

does. You'll need to add the following to your resources dictionary in App.xaml

<ImageBrush x:Key="MainBackground" ImageSource="/resources/MainBackground.jpg" />

Answer 3

I use a custom style to make my frame background white:

<ControlTemplate x:Key="WhiteTemplate" TargetType="toolkit:TransitionFrame">
                <Grid x:Name="ClientArea">
                    <Grid.Background>
                        <ImageBrush ImageSource="Images/yourimage.png"
                    </Grid.Background>
                    <ContentPresenter x:Name="FirstContentPresenter"  />
                    <ContentPresenter x:Name="SecondContentPresenter" />

                </Grid>
            </ControlTemplate>

Then, in App.xaml.cs

private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)
        {
            // Set the root visual to allow the application to render
            if (RootVisual != RootFrame)
                RootVisual = RootFrame;

            // Remove this handler since it is no longer needed
            RootFrame.Navigated -= CompleteInitializePhoneApplication;
            // Add this to inject the media element Control template
            RootFrame.Template = Current.Resources["WhiteTemplate"] as ControlTemplate;
        }

Note that this is using the Toolkit.. If you aren't using it, you should probably use 'PhoneApplicationFrame' instead of toolkit:TransitionFrame