Introduction

This article describes how you can make your background customizable in Windows Phone 7. In this article we'll see how color and image will change upon the click of a radiobutton.

Getting Started

Step 1: Open new Windows Phone Application named CustoBackGround

First we design the application by go to MainPage.xaml file, we added RadioButton's, TextBlock's, Button and PasswordBox. The RadioButton has event's handlers to manage selected states. When the RadioButton is selected, the background of the page will be change automatically according to the RadioButton event.

Step 2: Go to MainPage.xaml file and drag and drop five TextBlock's, six RadioButton's, one TextBox, one PassworBox and one Button. Arrange all the controls according to there positions looks like below

Design windows phone application

Here is the complete code of MainPage.xaml file

<phone:PhoneApplicationPage
x:Class="CustomBackground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<Grid x:Name="PhoneBackGround" Background="Transparent">
<TextBlock Height="69" HorizontalAlignment="Left" Margin="12,31,0,0" Name="textBlock1" Text="Welcome to Custom Background Application" FontSize="22" VerticalAlignment="Top" Width="444" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,82,0,0" Name="textBlock2" Text="Choose Back Ground Color" VerticalAlignment="Top" Width="381" />
<RadioButton Content="Blue" Height="72" HorizontalAlignment="Left" Margin="0,118,0,0" Name="BlueButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22" Checked="BlueButton_Checked" />
<RadioButton Content="Green" Height="72" HorizontalAlignment="Left" Margin="0,168,0,0" Name="GreenButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22" Checked="GreenButton_Checked" />
<RadioButton Content="Brown" Height="72" HorizontalAlignment="Left" Margin="0,216,0,0" Name="BrownButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22" Checked="BrownButton_Checked" />
<RadioButton Content="Orange" Height="72" HorizontalAlignment="Left" Margin="0,265,0,0" Name="OrangeButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22" Checked="OrangeButton_Checked"
/>
<TextBlock Height="56" HorizontalAlignment="Left" Margin="12,343,0,0" Name="textBlock3" Text="Choose Image for Form BackGround" VerticalAlignment="Top" FontSize="22" Width="422" />
<RadioButton Content="Flower's" Height="72" HorizontalAlignment="Left" Margin="1,375,0,0" Name="FlowerButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22"
Checked="FlowerButton_Checked" />
<RadioButton Content="Desert" Height="72" HorizontalAlignment="Left" Margin="0,423,0,0" Name="DesertButton" VerticalAlignment="Top" BorderThickness="0" FontSize="22" Checked="DesertButton_Checked"
/>

<Grid Height="255" HorizontalAlignment="Left" Margin="12,501,0,0" Name="LoginForm" VerticalAlignment="Top" Width="456">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="27,28,0,0" Name="textBlock4" Text="UserName" VerticalAlignment="Top" FontSize="25" Foreground="Olive" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="27,104,0,0" Name="textBlock5" Text="Password" VerticalAlignment="Top" FontSize="25" Foreground="Olive" />
<TextBox Height="72" HorizontalAlignment="Right" Margin="0,6,12,0" Name="textBox1" VerticalAlignment="Top" Width="282" Background="White" />
<PasswordBox Height="72" HorizontalAlignment="Left" Margin="162,84,0,0" Name="passwordBox1" VerticalAlignment="Top" Width="282" Background="White" />
<Button Content="OK" Height="72" HorizontalAlignment="Left" Margin="162,162,0,0" Name="button1" VerticalAlignment="Top" Width="160" BorderThickness="0" Background="Silver" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Now Come to the code

Step 3: Go to MainPage.xaml.cs file and modify the code like below
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;

namespace CustomBackground
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}

private void BlueButton_Checked(object sender, RoutedEventArgs e)
{
PhoneBackGround.Background = new SolidColorBrush(Colors.Blue);
}

private void GreenButton_Checked(object sender, RoutedEventArgs e)
{
PhoneBackGround.Background = new SolidColorBrush(Colors.Green);
}

private void BrownButton_Checked(object sender, RoutedEventArgs e)
{
PhoneBackGround.Background = new SolidColorBrush(Colors.Brown);
}

private void OrangeButton_Checked(object sender, RoutedEventArgs e)
{
PhoneBackGround.Background = new SolidColorBrush(Colors.Orange);
}

private void FlowerButton_Checked(object sender, RoutedEventArgs e)
{
BitmapImage bitmapImage = new BitmapImage(new Uri("Images/Flower.jpg", UriKind.Relative));
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = bitmapImage;
this.LoginForm.Background = imageBrush;
}

private void DesertButton_Checked(object sender, RoutedEventArgs e)
{
BitmapImage bitmapImage = new BitmapImage(new Uri("Images/Desert.jpg", UriKind.Relative));
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = bitmapImage;

this.LoginForm.Background = imageBrush;
}
}
}

What happen in code

In the Checked event handlers code of every RadioButton , we set the Background, respectively using the SolidColorBrush properly like below code we use for first RadioButton checked property

private void BlueButton_Checked(object sender, RoutedEventArgs e)
{
PhoneBackGround.Background = new SolidColorBrush(Colors.Blue);
}

For the login form background changing we use BitmapImage and ImageBrush like below code we use for first backgroung image

private void FlowerButton_Checked(object sender, RoutedEventArgs e)
{
BitmapImage bitmapImage = new BitmapImage(new Uri("Images/Flower.jpg", UriKind.Relative));
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = bitmapImage;
this.LoginForm.Background = imageBrush;
}

Step 4: Go to Project Add menu and add new folder and two images inside the folder

add new item in windows phone application

Step 5: Run the application

output of windows phone application

Click on Blue RadioButton the background will change in Blue color

blue background in windows phone application

Click on Green RadioButton the background will change in Green color

green background in windows phone application

Click on Brown RadioButton the background will change in Brown color

brown background in windows phone application

Click on Orange RadioButton the background will change in Orange color

orange background in windows phone application

Now choose Image for the login form background, now you see when you check on first Flower's RadioButton the hole background will not change only the form background will change

flower image background in windows phone application

Click on Desert RadioButton the background image will change in Desert image

desert image background in windows phone application

Thank You....