how to update a background image from another page in WP7

Question

I have a panorama control in my MainPage.xaml and I would like a user to be able to change the background png image in another page, my SettingsPage.xaml, by using a listpicker control. I have successfully populated the listpicker with a couple test image names and I am able to use it to change the selection, but I am unsure of how to access the MainPage.xaml from my SettingsPage.xaml to change the actual image when the Listpicker selectedIndex is changed. So far what I have is as folows:

MainPage.xaml

<controls:Panorama x:Name="panorama" Title="Application Title">
        <controls:Panorama.Background>
            <ImageBrush ImageSource="PanoramaBackground.png"/>  //the default background
        </controls:Panorama.Background>

        ...

</controls:Panorama>

SettingsPage.xaml

<toolkit:ListPicker x:Name="ThemeListPicker" Header="Theme" Grid.Row="2" Grid.ColumnSpan="2"
                                        ItemTemplate="{Binding ThemeItemTemplate}" SelectedIndex="{Binding}"
                                        SelectionChanged="ThemeListPicker_SelectionChanged"/>

SettingsPage.xaml.cs

String[] Theme = 
    {
        "Default",
        "Bubbles",
        //...
    };

public SettingsPage()
    {
        InitializeComponent();

        //Theme list picker
        this.ThemeListPicker.ItemsSource = Theme;
        this.ThemeListPicker.DataContext = ThemeListPicker.SelectedIndex;
    }

private void ThemeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count <= 0) //to eliminate IndexOutOfRangeException
        {
            return;
        }

        string selectedItem = e.AddedItems[0] as string;

        switch(selectedItem)
        {
            case "Default":
                //change panorama background here (PanoramaBackground.png)
                this.ThemeListPicker.SelectedIndex = 0;
                break;
            case "Bubbles":
                //change panorama background here (PanoramaBackground_Bubbles.png)
                this.ThemeListPicker.SelectedIndex = 1;
                break;
        }
    }

Answer 1

To solve the problem I simply set an original default ImageSource path in the MainPage.xaml and then in MainPage.xaml.cs OnNavigatedTo event I updated the panorama background image accordingly as set in the SettingsPage.

MainPage.xaml

<controls:Panorama x:Name="panorama" Title="Application Title"> 
    <controls:Panorama.Background> 
        <ImageBrush ImageSource="PanoramaBackground.png"/>  //the default background 
    </controls:Panorama.Background> 

    ... 

</controls:Panorama> 

MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        Uri themeUri = new Uri(Settings.Theme.Value, UriKind.Relative);  //holds the uri string of the selected background from SettingsPage

        BitmapImage image = new BitmapImage(themeUri);
        ImageBrush brush = new ImageBrush();
        brush.ImageSource = image;
        panorama.Background = brush;
    }

Answer 2

You could create a Settings.cs class which could be used for holding settings entries in isolated storage, and one of those settings could be the background image.

See here for implementation samples:

http://msdn.microsoft.com/en-us/library/ff769510%28v=vs.92%29.aspx

If you need the setting just while the app is running, the simplest way to accomplish what you want would be to use a public string object (for example called YourString) inside the App.xaml.cs

Then you could set it from Settings.xaml page, actually the code behind, when your list picker selection changed like this:

private void ThemeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.AddedItems.Count <= 0) //to eliminate IndexOutOfRangeException
    {
        return;
    }

    string selectedItem = e.AddedItems[0] as string;

    switch(selectedItem)
    {
        case "Default":
            //change panorama background here (PanoramaBackground.png)
            (Application.Current as App).YourString = "PanoramaBackground.png";
            break;
        case "Bubbles":
            //change panorama background here (PanoramaBackground_Bubbles.png)
            (Application.Current as App).YourString = "PanoramaBackground_Bubbles.png";
            break;
    }
}

Then when you navigate to MainPage.xaml page, check if the YourString string is not null. If it isn't, create a URI from it and set the Panorama background to that image URI.