Windows Phone 7 Series user Interface framework

WindowsThe Phone 7 Series CTP user interface is designed to provide an optimal visual experience for end users. This section will educate developers about full-screen mode, screen orientation (screens orientation), frame and page navigation (frame and pages navigation), and application scrolling (application scroling) and other topics.

User Interface Framework

Windows The Phone 7 Series CTP user interface is designed to provide an optimal visual experience for end users. This section will educate developers about full-screen mode, screen orientation (screens orientation), frame and page navigation (frame and pages navigation), and application scrolling (application scroling) and other topics.

The following topics will be discussed in this section:

Screen orientation (orientation)

Supports two types of screen orientations, vertical screens (portrait) and horizontal screens (landscape).

Frames and page constructs (frame and pages construction)

Windows The app for the Phone 7 Series CTP is based on Silverlight's web browsing mode, where users can navigate between different content pages.

Scrolling Viewer (Scroll Viewer)

Scrolling occurs when the content of the application is larger than the size of the screen.

Theme (Themes)

A theme is a resource that is used to personalize Windows phone visual elements.

Screen orientation

Windows Phone supports three kinds of screen orientations: vertical, horizontal, and right. The difference between the Zoo and the right horizontal screen is that the application toolbar and the system tray have different orientations.

Attention:

Applications cannot specify the location of only application toolbars and system trays that support the Zoo or the right horizontal screen, both of which are supported simultaneously.

Vertical Screen mode

In vertical mode, the page is larger in height than width in vertical direction. When the device rotates or slides out of the physical keyboard, the direction changes. When the screen direction changes, an application with directional awareness should also respond to that direction change.

Horizontal Screen mode

In horizontal mode, the page display is wider than the height. Here are some horizontal screen mode uses:

 
• When a user uses a horizontal pull-out keyboard for input, such as writing emails and texting.
  
• If a Web page is more suitable for horizontal browsing, the horizontal screen mode provides a better experience for the user.
• When you take a picture.
• When you view a single photo or watch a slide show.
• When you are watching movies or videos.
• When you play the game.

Considerations for Application design

When you design application horizontal and vertical screen mode, you need to consider the following factors.

• The application must support all of the screen orientations at the same time. If an application can support both horizontal and vertical modes, the screen display mode will change when the user flips the phone or slides out of the physical keyboard. Because the Orientation property is read-only, you cannot programmatically convert the display mode of the screen directly. But there is also an indirect way to implement this function, by assigning values to the supported orientations property.
• When changing to horizontal screen mode, application toolbars and system trays, application menus, user volume interface components, message notification modules and system dialogs (such as low battery notifications), etc. will become horizontal screen perception.
  Text input in either horizontal or vertical mode is done through the physical keyboard (if available) or on the soft keyboard on the screen.

Framework and Web page construction

This section details the architecture of the application framework and Web pages that you will describe. It will also include the design of a customized mobile UI framework that includes the Windows phone 7 Series CTP.

Note:
This section will be expanded in future versions.

Windows The Phone7 Series CTP application is a Web browsing mode based on Silverlight, where users can navigate and browse on different content screens. In addition, you can click on Windows phone's Back hardware button to return to the previous page. The goal of this model is to ease the development of browsing based applications and make it more natural for the navigation model of the Windows Phone 7 Series CTP.

The core element contains a top-level container control called a phoneapplicationframe (framework) that can host PhoneApplicationPage (pages). In the application, the page can be separated from the content. Windows The Phone 7 Series CTP provides framework and page classes to facilitate navigation into separate content chapters. In your application, you can create several different pages based on your requirements, which can be navigated through the framework. The following illustration shows the hierarchy of frames and pages in an application:

Client Screen UI interface

This is the state of a page content conversion, used to transform the normal browsing state and Full-screen state. The application can choose whether to include the system tray or the application toolbar. But developers should not be able to change these behaviors into automatic changes that require user touch to change, for example, when Windows phone starts a game that opens the Game Settings menu, and if the user chooses to start a new game, The page enters Full-screen mode to start.

Note:
These are considered best practices for using fully customized UI patterns. If the application is only running Full-screen mode, all visual notifications (including caller notifications) will be passed to the user interface normally.

When your application enters Full-screen mode, the system tray bar and the application toolbar become invisible. Developers can hide the application bar or display it on the surface layer. You can determine whether to display the application toolbar and the system tray by assigning values to display properties (Page.fullscreen).

Scrolling Viewer

The application scrolls when content is greater than the bounds of the scrolling viewer. The content is contained under the scrolling panel, which handles scrolling of the page. The scroll panel displays a scrolling indicator to indicate whether the content is longer or wider than the page, and to indicate where the current content is distributed throughout the page.

Considerations for Application design

• The scrolling indicator on the right is used for vertical scrolling, while the scroll indicator at the bottom is used to scroll horizontally, and the scrolling indicator appears only when you interact with the page.
• If there is no gesture (gesture) motion (for example, clicking or panning), the scroll indicator disappears over time. When a gesture motion event occurs, the scroll indicator appears again.
• The scrolling indicator indicates the user's position in the content. For example, if the user is at the top of the page, the scroll indicator appears at the top.
• Avoid using a list box control with a lot of content on the scrolling viewer, which can degrade performance.

Theme

The theme is a resource for personalized window phone visual elements. Windows The developer of the Phone 7 Series CTP can maintain the appearance of the original device UI and feel consistency from a stylistic perspective (stylistic standpoint) when creating the application. These style properties include background color and accent color (accent colors). Topics ensure consistency in user interface elements and control rendering to prevent an inconsistent user experience.

The objectives of this feature include:

• Developers in the Windows Phone 7 Series CTP can build applications and access the subject's properties directly in their code.
• Developers can explicitly change the properties of any subject to make it meet their own brand requirements.
  

The advantage of using themes is to maintain consistency and compatibility with Metro design principles. Developers can use the default control settings directly, without the need to change some of the common properties (such as color style), which will change the style at run time according to the settings in the theme file. Applications running under Windows Phone will automatically modify the visual effects based on the theme. In addition, developers can overwrite topics at the application level. For example, some companies can maintain their own color style when developing applications when they need to display their own strong color elements. Developers can use their own resources to overwrite the properties of any subject. But they can't close the subject.

Note:
Themes contain only color. Other elements, such as font or control size, cannot be changed.

Considerations for Application design

• Users can choose a bright or gloomy theme that developers should take into account when developing the UI. For example, if you have all backgrounds in the entire application selected as white. This may affect the battery life of the LED display. In the development process, you should always consider the effect of application background color on battery life.
• Users can choose from 5 different key color schemes in your application. If you support the focus color scheme in your application, these color schemes will change according to the user's preferences. These key color schemes include orange, blue, green and red. Handset manufacturers can customize the final color scheme.
• You cannot modify system-level topics, only your application-level topics.
• If you explicitly set the color of the control's foreground or background, you should also verify that it is visible in the black and white solution theme. If you choose a color that is not visible, either choose a more appropriate color or set the contrast for the background or foreground.