|
In my last article how to Detect Theme, we discussed how to detect theme and change the color of text. Theme plays a crucial role when you are working with colors in Windows Phone 7. Windows Phone 7 theme is combination of ascent and background color. Windows Phone 7 has option of selectiong background as Black or White and ten ascent colors to choose from.
Let's write some code and find out what will happen if don't consider theme when working with colors in Windows Phone 7.
Step 1: Create a new Windows Phone Application project. Select Silverlight for Windows Phone installed templates.
Step 2: Replace TitlePanel StackPanel of MainPage.xaml with
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Working With Theme" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
Step 3: Add a Rectangle in the ContentPanel Grid of MainPage.xaml.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Rectangle Height="110" HorizontalAlignment="Left" Margin="249,137,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="156" />
</Grid>
Step 4: Right click on MainPage.xaml and select View Code. Place below code in the MainPage method to add a ellipse in the content panel.
public MainPage()
{
InitializeComponent();
Ellipse e = new Ellipse();
e.Width = 100.0;
e.Height = 120.0;
e.StrokeThickness = 2.0;
e.HorizontalAlignment = HorizontalAlignment.Left;
e.VerticalAlignment = VerticalAlignment.Top;
Color backgroundColor = Color.FromArgb(255, 255, 255, 255);
e.Fill = new SolidColorBrush(backgroundColor);
e.Margin = new Thickness(10, 300, 10, 10);
ContentPanel.Children.Add(e);
}
Now run the application
In the above screen shot rectangle is not visible.
Now change the theme, Press the Windos Button, Start screen will appear -> Press the arrow key -> Press the setting options -> Press theme -> Change background to light from dark.
Press start button again -> Go to application list and run the application again.
In the above screen shot ellipse is not visible.
The rectangle is drawn using black border so it is visible only when background is white and ellipse is drawn using white border and white fill so it is visible only when color is black.
Let's see how to overcome this problem.
Step 5: Stop the application, if it is running. Open MainPage.xaml and select the rectangle and press F4. Click on diamond symbol of stroke property
Step 6: Select Apply Resource from the popup. Now from the next dialog double click the PhoneAccentBrush option
Now rectangle will be drawn using currently selected asscent color.
Step 7: Now to draw the ellipse using currently selected Accent color, following code needs to be changed in the code behind.
Replace
Color backgroundColor = Color.FromArgb(255, 255, 255, 255);
to
Color backgroundColor = (Color)Application.Current.Resources["PhoneAccentColor"];
Now run the application. The rectangle and ellipse will be drawn using currently selected accent.
One can read Theme Resources for Windows Phone. This ends the article of working with theme in Windows Phone 7.
|