How to set background image in windows phone 7 application

Posted on by Naga Harish M

Apply background image in windows phone 7 application

In this post I am going show how we can apply an image in your app background. This we can do in XAML and also using C# code.

Video :-
[youtube=http://www.youtube.com/watch?v=FfJqEK4kEzY]

Image :-
Apply background image in you window phone 7 app
XAML code:-

If we want to set image using XAML, it is easy. Just we need to set background for top parent element, in my Demo Grid (default) is top parent element. So, I am applying background image to that.

Just add the below code after <Grid> tag

<Grid.Background>
<ImageBrush ImageSource=”images/bg.png” Stretch=”UniformToFill” />
</Grid.Background>

C#.net Code:-

Some time we need to change the background using your code. For example if the user selected one movie we need set that film image we need to show in background.

In my example I am use PhotoChooserTask user to select his image for background.

For this we need to do flowing things

*Note: – Please not apply background for grid

// create the PhotoChooserTask object with page scope.

PhotoChooserTask photoChooserTask;

Then

Then in Constructor just add the below highlighted code

InitializeComponent(); photoChooserTask = new PhotoChooserTask();

photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);

In button click event I am just showing PhotoChooserTask

private void imageBrowseBtn_Click(object sender, RoutedEventArgs e)
{
photoChooserTask.Show();
}

In photoChooserTask_Completed event

void photoChooserTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
System.Windows.Media.Imaging.BitmapImage bmp =new System.Windows.Media.Imaging.BitmapImage();
bmp.SetSource(e.ChosenPhoto);
var app = Application.Current as App;
if (app == null)
return;
var imageBrush = new ImageBrush {
ImageSource= bmp,Opacity=0.5d
};
app.RootFrame.Background = imageBrush;
//app.RootFrame.Background = new SolidColorBrush(Colors.Blue);  — we can apply just color too like this
}
}

I hope, it will be helpful for beginners!!!!!

Enjoy while coding..!

Thanks,

Naga Harish.