Logo
PREGNANCY
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Phone

Windows Phone 8 : Designing for the Phone - Implementing the Look and Feel of the Phone

5/14/2013 6:07:03 PM

You’ve seen that building an application that works well on the phone requires you to understand the nature of how applications are used on phones. Driving this change in how you design the interaction with your applications doesn’t have to be that difficult. The Windows Phone platform can help you with built-in resources for many of the user interface elements. These resources are called system resources (also known as theme resources)

The system resources can change to accommodate different-sized screens and themes on the phone. For example, a newly created Windows Phone application contains use of these system resources by default:

<phone:PhoneApplicationPage ...
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  ...>
  <Grid x:Name="LayoutRoot"
        Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
      <TextBlock Text="MY APPLICATION"
                 Style="{StaticResource PhoneTextNormalStyle}"
                 Margin="12,0" />
      <TextBlock Text="page name"
                 Margin="9,-7,0,0"
                 Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">

    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

The system resources are part of the core framework and are not contained as code you would include in your project directly. These system resources actually change as the user picks the theme on his phone. For example, the PhoneBackgroundColor resource is a dark grey color (almost black) on a typical phone application. But if the user changes to the light theme (black text on white background), the PhoneBackgroundColor becomes white.

There are system resources of various kinds, including the following:

• Colors (for example, PhoneBackgroundColor)

• Brushes (for example, PhoneForegroundBrush)

• Font Faces (for example, PhoneFontFamilyNormal)

• Font Sizes (for example, PhoneFontSizeLarge)

• Thickness (for example, PhoneMargin)

• Text Styles (for example, PhoneTextNormalStyle)

• Theme Visibility (for example, PhoneDarkThemeVisibility)

You can find a complete list of the system resources in the documentation:

http://shawnw.me/wptheming

To use the system resources, you can use either Blend or Visual Studio. In both cases you can simply select the resource instead of using fixed values (see Figure 1).

Figure 1. Using Theme Resources (for example, System Resources)

Image

By clicking the small square next to a value, an option for System Resource displays that will show you the valid system resources that match the data-type you have selected. In Figure 1, the margin was selected and therefore the system resources available are all in the “thickness” category.

One system resource you should get comfortable working with is the PhoneAccentBrush. This particular system resource replaces the brush with the selected accent brush the user has chosen for the phone. In general, you should defer to use the PhoneAccentBrush anywhere you want to show a selection (instead of relying on bolding or a custom color).


System Resources Best Practices

In general, you should always use a system resource when one is available. By using the system resource for resource types such as thickness and font sizing, you can be sure that your application will adhere to the Windows Phone style guide. You can certainly use your own judgement when using the system resources or not, but by deviating, you’ll have to handle the different themes and phone sizes manually.

Other -----------------
- Windows Phone 8 : Designing for the Phone - Designing with Visual Studio
- Windows Phone 7 : 3D Game Development (part 4) - Rendering 3D Models
- Windows Phone 7 : 3D Game Development (part 3) - The Game Class
- Windows Phone 7 : 3D Game Development (part 2) - Rendering 3D Primitives
- Windows Phone 7 : 3D Game Development (part 1) - 3D Game Concepts
- Windows Phone 8 : Phone-Specific Design (part 3) - Using the Pivot Control in Blend
- Windows Phone 8 : Phone-Specific Design (part 2) - Using the Panorama Control in Blend
- Windows Phone 8 : Phone-Specific Design (part 1) - The ApplicationBar in Blend
- Windows Phone 7 : AlienShooter Enhancements (part 2) - Tombstone Support, Particle System
- Windows Phone 7 : AlienShooter Enhancements (part 1) - Load and Save Game State
- Windows Phone 7 Programming Model : Application Execution Model
- Windows Phone 7 Programming Model : Bing Maps Control
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 4) - Working with Behaviors
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 3) - Creating Animations
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 2) - Brushes
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 1) - Layout
- Windows Phone 8 : Designing for the Phone - Microsoft Expression Blend
- Windows Phone 7 Programming Model : Asynchronous Programming - Background Threads
- Windows Phone 8 : Designing for the Phone - Deciding on an Application Paradigm
- Windows Phone 8 : Designing for the Phone - The Third Screen
 
 
Most view of day
- Integrating SharePoint 2013 with the Office Applications (part 3) - Microsoft Excel
- Microsoft Exchange Server 2007 : Consolidating a Windows 2000 Domain to a Windows Server 2003 Domain Using ADMT (part 3) - Migrating Groups
- Plug and Play and Power Management : Device Enumeration and Startup (part 2) - Device Power-Down and Removal
- Extending Dynamics AX 2009 (part 3) - Creating Labels, Adding Content to the Wizard
- Microsoft Dynamics CRM 4 : Digital Phone Integration (part 3) - c360 CTI for Microsoft CRM
- Evaluating Applications for Windows 7 Compatibility : The Application Compatibility Toolkit (part 4) - Resolving Application Compatibility Issues with Shims
- Microsoft Systems Management Server 2003 : Filtering Status Messages (part 2) - Status Filter Rules
- Windows Server 2012 : Deploying Storage Spaces (part 2) - Understanding Storage Spaces - Fixed vs. thin provisioning
- Integrating BizTalk Server 2010 and Microsoft Dynamics CRM : Communicating from BizTalk Server to Dynamics CRM (part 1) - Building the BizTalk components
- Windows Server 2008 R2 high-availability and recovery features : Installing and Administering Network Load Balancing (part 1) - Adding Network Load Balancing feature
Top 10
- Sharepoint 2013 : Overview of The Client-Side Object Model and Rest APIs - Client-Side Object Model API Coverage
- Sharepoint 2013 : Overview of The Client-Side Object Model and Rest APIs - REST and OData (part 3) - Creating, Updating, and Deleting
- Sharepoint 2013 : Overview of The Client-Side Object Model and Rest APIs - REST and OData (part 2) - Filtering and Selecting
- Sharepoint 2013 : Overview of The Client-Side Object Model and Rest APIs - REST and OData (part 1) - Getting Started with REST and OData
- Sharepoint 2013 : Integrating Apps for Office with SharePoint (part 2) - Apps for Office Integrated with an App for SharePoint
- Sharepoint 2013 : Integrating Apps for Office with SharePoint (part 1) - Standalone Apps for Office
- Sharepoint 2013 : The Office JavaScript Object Model (part 3) - App Security
- Sharepoint 2013 : The Office JavaScript Object Model (part 2) - Functional Capabilities by Office Client,Mailbox-based Apps
- Sharepoint 2013 : The Office JavaScript Object Model (part 1) - Document-based Apps
- Windows Phone 8 : Playing Music Through the Phone (part 5) - Sharing Music, Playing Music Using Smart DJ, Accessing Playlists
 
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro