Home » Microsoft Technologies

Changing Background-Image randomly

Hi there

I want to change the Apps-Background randomly on every page in my App.

I thought it would be cool to implement this in the App.xaml. But how can I do this?

    <ImageBrush x:Key="PhoneBackgroundBrush" ImageSource="THIS_SHOULD_BE_DYNAMIC" />

Perhaps I can write a function for every page which changes the ImageSource randomly ... but I think I could implement this easier.

Any ideas?


Thank you...Greetings casaout



8 Answers Found


Answer 1

I could not get the background brush to update without adding code to each page  but I could get close to what you describe by using an Image control. 

1. I created a class to hold a List of BitmapImages and a property "Image" that returns a random BitmapImage from the list:

  public class RandomImage 
    private List<BitmapImage> m_images;
    private Random m_rnd;
    private static int NumImages = 8;

    public RandomImage()
      // load images here...      
      m_rnd = new Random(DateTime.UtcNow.Millisecond);
      m_images = new List<BitmapImage>(NumImages);

      for (int i = 0; i < NumImages; i++)
        BitmapImage bi = new BitmapImage();
        bi.CreateOptions = BitmapCreateOptions.None;

        bi.UriSource = new Uri("Images/" + (i + 1).ToString() + ".jpg", UriKind.Relative);

    public BitmapImage Image
        int item = m_rnd.Next(0, NumImages - 1);

        return m_images[item];

 (Note: My class initializer assumes I have included 8 images with names 1.jpg through 8.jpg, this was just a convenient way for me to test.  My class does not implement  any error checking, you will want to add error checking in your own code.)

2. I made a static reference to this class in App.XAML:

    <cls:RandomImage x:Key="MyImages" />        

3. I added an Image control to each page with DataContext set to the static class instance and which binds to the "Image" property:

  <Image x:Name="bkgndImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"
      CacheMode="BitmapCache" Grid.RowSpan="3" Source="{Binding Image}" MinHeight="110" MinWidth="100" 
      DataContext="{StaticResource MyImages}" />

note: there may be better ways to do this... if anyone sees a problem with my solution please speak up. :)

I hope this helps.


Answer 2

hi Eric

Thank you for your answer and sorry for my late reply. The idea of using a class to handle the random-pic is great!

Unfortunately I can't manage to try your code, because I have a problem in the App.xaml when I write  in <cls:RandomImagex:Key="MyImages"/>  between <Application.Resources> and </Application.Resources>. The failure-Message is:

The type 'cls:RandomImage' was not found. Verify that you are not missing an assembly reference and that all reference assemblies have been built.

I tried to include the RandomImage-Class to App.xaml, but unfortunately nothing works. What exactly means "cls:" and do you have an idea how to correct the error?

Thank you very much!

Greeting, casaout


Answer 3

Sorry about that, I was trying to keep the post consise and so didn't include the namespace definition.  You need to add a statement like the following one to the <Application ...> block at the top of App.XAML:


where "XXX" is the namespace in which you defined the RandomImage class.  Note: the namespace alias "cls" is of my own choosing, you can use a different alias if you want as long as it does not conflict with any other namespace alias in the same scope.


Answer 4

hi Eric

Sorry for asking you again, but unfortunately I'm not able to add the statement in the <Application ... > - Tag. I really see, that I'm a newbie ...

I tried this in the App.xaml:


The RandomImage.cs - File is saved on the same level (in the project) as the App.xaml. My current APP-Name is PackApp. So I thought  I should write  PackApp.RandomImage.

The error-message is: "Undefined CLR namespace. The 'clr-namespcae' URI refers to a namespace 'PackApp.RandomImage' that is not included in the assembly.

Unfortunately I couldn't figure out what is meant with the assembly...

In the <Application.Resources>-Tag I wrote: <cls:RandomImage x:Key="MyImages" />

What am I doing wrong?

Thousand thanks!

Greetigns casaout


Answer 5

the "clr-namespace" should refer to the "namespace" name used in the class definition.

For example, in my test projects "RandomImage.cs" file the namespace was "WPL_LKG5"

namespace WPL_LKG5
  publicclass RandomImage 

so in my App.xaml the clr-namespace declaration looks like this:


I hope this helps.


Answer 6

Hi Eric,

Thank you for your help. Now it works fine for me. Usually everything works perfectly.

Unfortunately, sometimes there appears no image. I could not figure out the error with debugging,... I solved it by choosing a default-image which appears when the RandomImage-Error occurs. I know this is not perfect, and so I would appreciate every tip to solve my problem.

Thanks, casaout


Answer 7

It could be that one or more image fails to load.  The sample code assumes the image loads immediately and without error.  Instead of adding the BitmapImage object to the list right away you could wait for the ImageOpened event.

  In this case you would also want to use "m_images.Count", instead of "NumImages", when generating the random index.



Answer 8

hi Eric

Luckily, I could solve my problem. There was a problem with the random-number. With the code (in the RandomImage.cs class)

                int item = m_rnd.Next(1, NumImages);
                return m_images[item - 1];

it works perfectly :-)


Thank you very much!

Greetings casaout!



<< Previous      Next >>

Microsoft   |   Windows   |   Visual Studio   |   Sharepoint   |   Azure