programming4us
         
 
 
Windows Phone

User Interface : Detecting Changes in the Theme Template

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
8/10/2011 9:24:43 AM

1. Problem

You need to detect when the user changes the Windows Phone 7 theme from Dark to Light or vice versa so you can change icons, buttons, and background colors accordingly.

2. Solution

You can use the ResourceDictionary class provided by the Resources property from the Application class.

3. How It Works

The Application class has a static property called Resources that returns a ResourceDictionary object filled with Windows Phone resources representing, for example, the chosen fonts, the background color, the foreground color, and so on.

In this recipe, you will use the PhoneBackgroundBrush resource to retrieve the chosen background theme color. If the theme is set to Dark, this value will be equal to the black color (Red Green Blue values set to 0). Otherwise, it will be set to the white color (Red Green Blue values set to 255) for the Light theme.

4. The Code

To demonstrate this recipe, you will create the DetectingThemeChanging Silverlight for Windows Phone application. The application has a main page on which two application bar buttons are set with the dark image version. During the Loaded event handler, the application checks what color is stored in the PhoneBackgroundBrush key within the Resources dictionary. Based on the returned value, the icons are taken from either the dark or the light relative path.

In the MainPage.xaml file, the application bar is defined with two buttons:

. . .
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False" Opacity="0">
<shell:ApplicationBarIconButton x:Name="btnPlay"
IconUri="/Images/dark/appbar.transport.play.rest.jpg" Text="Play"/>
<shell:ApplicationBarIconButton x:Name="btnStop"
IconUri="/Images/dark/appbar.stop.rest.jpg" Text="Stop"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
. . .


In the MainPage.xaml.cs code file, the Loaded event handler is hooked so you can call the UpdateUI method, which is the core method of this recipe. The IsDarkTheme static property from the ThemeDetector class is checked to retrieve whether the current background theme is the Dark theme. If it is, the icons are picked from the dark directory; otherwise, the icons are picked from the Light directory.

private void UpdateUI()
{
if (ThemeDetector.IsDarkTheme)
{
btnPlay.IconUri = new Uri("/Images/dark/appbar.transport.play.rest.jpg",
UriKind.Relative);
btnStop.IconUri = new Uri("/Images/dark/appbar.stop.rest.jpg",
UriKind.Relative);
PageTitle.Text = "Dark Theme";
}
else
{
btnPlay.IconUri = new Uri("/Images/light/appbar.transport.play.rest.jpg",
UriKind.Relative);
btnStop.IconUri = new Uri("/Images/light/appbar.stop.rest.jpg",
UriKind.Relative);
PageTitle.Text = "Light Theme";
}
}


The ThemeDetector class has only one property, which returns a Boolean value indicating when the Dark background theme is in use:

public class ThemeDetector
{
public static bool IsDarkTheme
{
get
{
SolidColorBrush backgroundBrush =
Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;
if (backgroundBrush.Color == Color.FromArgb(255, 0, 0, 0)) // Black color
return true;
else
return false;
}

}
}


You can use the ThemeDetector class in your projects to retrieve the current background theme and to change your buttons' colors, icons, and so forth.


5. Usage

From Visual Studio 2010, select the Windows Phone 7 Emulator as your target output and then press Ctrl+F5. The emulator starts, briefly displaying the application with the application bar shown in Figure 1. As you can see, the application uses the page title to inform the user about the background theme it has found in the operating system.

Figure 1. The application has detected the Dark theme.

Press the hardware Start button and then go to the application list by pressing the right arrow at the top-right corner of the screen. Select the Settings tile, tap the Theme list item, and change the Background value from Dark to Light.

Now the emulator has the white background color; go back to the application either by pressing the hardware Back button until you reach it or by running a new application instance. The application retrieves the current background theme as the Light theme and changes the icon accordingly (see Figure 2).

Figure 2. The application detects the new background and changes the icons and page title.
Other -----------------
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 6) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 5) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 4) - Building a Game Lobby
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 3) - Creating a Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 2) - Main Menu and State Management
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 1) - Getting Ready for Networking Development
- User Interface : Using the ApplicationBar Control
- User Interface : Creating an Animated Splash Screen
- Windows Phone 7 Game Development : The World of 3D Graphics - Vertex and Index Buffers
- Windows Phone 7 Game Development : The World of 3D Graphics - Hidden Surface Culling
- Windows Phone 7 Game Development : The World of 3D Graphics - The Depth Buffer
- Windows Phone 7 Game Development : The World of 3D Graphics - Rendering 3D Objects
- Windows Phone 7 Game Development : The World of 3D Graphics - Perspective Projection
- Developing for Windows Phone and Xbox Live : Let the 3D Rendering Start
- Developing for Windows Phone and Xbox Live : Reach and HiDef Graphics Profiles
- Developing for Windows Phone and Xbox Live : Graphics Pipeline
- Developing for Windows Phone and Xbox Live : Graphics Pipeline
- Programming Windows Phone 7 : Elements and Properties - More on Images
- Programming Windows Phone 7 : TextBlock Properties and Inlines
- Programming Windows Phone 7 : The Phone’s Photo Library
 
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.