Windows Phone 7 Control Design and Development

The design of the interface and interaction determines the user experience of applications on mobile devices. controls are an important part of the interface and the main interface for user interaction. This document introducesWindows Phone 7Common la S and controls, as well as methods for custom controls.

Just as every C # program uses the main () method as its entry point, the entry point in this article starts from creating a new Windows Phone application. Make sure that Microsoft Visual Studio 2010 express for Windows Phone beta is installed.

Windows PhoneApplication page

After creating the Windows Phone application, you can view the project file generated by Visual Studio according to the template in Solution Explorer. XAML and mainpage. XAML is the focus of this article, app. XAML is used to define the main entry point of an application, initialize resources within the application scope, and display the user interface of the application. Mainpage. XAML is used to define application pages with user interfaces. App. XAML. CS and mainpage. XAML. CS is the code file of the interaction logic. Silverlight and WPF both adopt the method of separating the interface and logic, so that designers focus on design, developers focus on development, and Silverlight for Windows Phone. Windows Phone application pages are inherited from phoneapplicationpage. phoneapplicationpage is the root node of mainpage. XAML and contains all the la S and controls on the current page.

L The following methods can be used to redirect to another page:

This. navigationservice. navigate (New uri ("TargetXmalFile", Urikind. Relative ));

L Goback () and goforward () methods can easily walk between different pages.

L add the following code to the page constructor to define the screen direction:

1. Supportedorientations = supportedpageorientation. Portrait | supportedpageorientation. landscape;

Copy code

L add the screen rotation event at the following position in the mainpage. XAML File

1. <Phone: phoneapplicationpage
2. ...
3. Orientationchanged = "phoneapplicationpage_orientationchanged">
4. ...
5. </Phone: phoneapplicationpage>

Copy code

In private void phoneapplicationpage_orientationchanged (Object sender, orientationchangedeventargs E), corresponding events can be processed.

After the screen is rotated, the control may need to be re-laid. The following describes several common la s of the Windows phone7 application.

Windows PhoneApplication Container Control

Some code of mainpage. XAML is as follows:

1. <Grid X: Name = "layoutroot" background = "Transparent">
2. <Grid. rowdefinitions>
3. <Rowdefinition Height = "Auto"/>
4. <Rowdefinition Height = "*"/>
5. </Grid. rowdefinitions>
6. <Stackpanel X: Name = "titlepanel" grid. Row = "0" margin = "24, 24, 0, 12">
7. <Textblock X: Name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/>
8. <Textblock X: Name = "pagetitle" text = "Page name" margin = "-3,-8, 0" style = "{staticresource phonetexttitle1style}"/>
9. </Stackpanel>
10. <Grid X: Name = "contentgrid" grid. Row = "1">
11. </GRID>
12. </GRID>

Copy code

1.
GridWidget

In the example, the grid control contains the stackpanel control. The Container Control used for layout can contain other container controls. A grid defines a grid layout composed of columns and rows. The grid. rowdefinitions and grid. columndefinitions Collections contain rowdefinition and columndefinition respectively to define the width and height of rows and columns. The number of rows and columns is defined based on the number of neutron objects in the set. The grid. Row and grid. Column attributes of each sub-object are used to define the position in the grid. The example defines two rows. Because there is only one column, grid. columndefinitions is not defined. Titlepanel is in the first row, grid. Row = "0", contentgrid is in the second row, grid. Row = "1 ".

2.
StackpanelWidget

The stackpanel control allows the sub-objects in the layout to be arranged horizontally or vertically. You can set orientation = "vertical" or orientation = "horizontal" to define the arrangement. By default, sub-objects are arranged vertically.

In addition to the grid control and stackpanel control in the example, there are other container controls.

3.
Canvas

Layout in an absolute position. By setting the sub-object canvas. left specifies the distance between the object and the left side of the canvas (x coordinate); canvas. top specifies the distance (Y coordinate) between the object and the top of the canvas ).

4.
Scrollviewer

The scrollviewer control is used to indicate the scrollable areas that can contain other visible elements. You can set the horizontalscrollbarvisibility and verticalscrollbarvisibility attributes to control the status of horizontal and vertical scroll bars.

5.
Border

The border control is not suitable for layout, but is indeed a container control. The border control can draw borders or backgrounds for its sub-objects. The border control is used when Microsoft Expression blend for Windows Phone is used.

Windows PhoneCommon application controls

1.
Text Control

<Textblock X: Name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/>

<Textblock X: Name = "pagetitle" text = "Page name" margin = "-3,-8, 0" style = "{staticresource phonetexttitle1style}"/>

The textblock control in the example is used to display a small amount of text. The text attribute corresponds to the text content. The text attribute can be dynamically defined in The XAML file or modified in the C # code at any time. Use the name defined by the X: Name attribute to determine the textblock control to be modified. In this example, you can set a new string for applicationtitle. Text to change the text content.

The textblock control cannot receive text input by users, and is not suitable for displaying too long text. The Textbox Control is competent for such tasks. The Code is as follows:

<Textbox Height = "72" horizontalalignment = "Left" margin = "10, 10, 460 "name =" textbox1 "text =" textbox "verticalalignment =" TOP "width =" "/>

The maxlength attribute controls the length of a text string.

You can also use the passwordbox Control for password input. The Code is as follows:

<Passwordbox Height = "72" horizontalalignment = "Left" margin = "460," name = "passwordbox1" verticalalignment = "TOP" width = ""/>

The passwordbox control can also use passwordchar to define characters displayed by passwords.

2.
Button Control

The button control contains the button control and hyperlinkbutton control. Compared with the button control, the hyperlinkbutton control can automatically navigate to the URI specified for navigateuri without having to process the click event.

<Button content = "button" Height = "72" horizontalalignment = "Left" margin = "10,174, 160 "name =" button1 "verticalignment =" TOP "width =" "/>

<Hyperlinkbutton content = "hyperlinkbutton" Height = "30" horizontalalignment = "Left" margin = "176,195, 200 "name =" hyperlinkbutton1 "verticalignment =" TOP "width =" "/>

Both the button control and hyperlinkbutton control can use the content attribute to set text on the button. In addition, the hyperlinkbutton control supports the navigateuri attribute to define the target Uri.

3.
Select Control

Radiobutton is used to select an option from a set of options. radiobutton can combine multiple radiobutton controls into one group. Place it in the same parent control or set the groupname attribute. The groupname attribute can also be used to divide radiobutton in the same parent control into multiple groups. Radiobutton in the same group will be mutually exclusive, that is, the user can only set the status of one button to the selected status.

<Radiobutton content = "radiobutton" Height = "72" horizontalalignment = "Left" margin = "10, 10, 0, 0" name = "radiobutton1" verticalignment = "TOP"/>

Radiobutton can be set to selected, unselected, or disabled. The default status is unselected. If ischecked = "true" is set, the status can be changed to selected. If isenabled = "false" is set, the status can be changed to disabled.

Checkbox is used to select multiple options. Like radiobutton, you can set ischecked and isenabled to control the status.

<Checkbox content = "checkbox" Height = "72" horizontalalignment = "Left" margin = "10,166," name = "checkbox1" verticalignment = "TOP"/>

After isthreestate = "true" is set in the checkbox, an uncertain state can be added.

Slider is suitable for selecting a value within a range.

<Slider Height = "84" horizontalalignment = "Left" margin = "0,326, 460" name = "slider1" verticalignment = "TOP" width = ""/>

The maximum and minimum attributes are used to define the maximum and minimum values. The value attribute is a value between maximum and minimum, used to define the current value of the slider. By default, minimum = "0" Maximum = "10 ". You can drag to change the slider value. The smallchange attribute can define the dragging precision, or you can click to change the slider value. The largechange attribute defines the precision of the value change. You can set the horizontal and vertical directions using the orientation attribute based on the needs of the interface layout.

Custom button control appearance

If you find that the appearance of the ordinary controls on Windows Phone 7 is incompatible with that on your application interface, you can use Microsoft Expression blend for Windows Phone Beta to redesign the display of the controls. Find mainpage. XAML in the Solution Explorer of Visual Studio, right-click and choose open in expression blend from the menu. Create a control template before creating a custom control appearance. In the objects and Timeline panel, find button1, right click, and select Edit template | select create empty from the pop-up menu. The template is named buttoncontroltemplate. You can see that there is a grid layout control under the Template under objects and timeline. For buttons, the border control is more suitable for drawing borders and backgrounds. Right-click grid and choose change layout type | border from the shortcut menu.

Blank border cannot display any content. Set the Border Width of border to 2 pixels and the rounded corner to 10 pixels on the Appearance panel under the properties panel.

Set the background color on the brushes panel and select gradient brush to achieve gradient effect. Set both ends to white and purple respectively.

Next, set borderbrush and use solid color brush to implement a gray border.

At this point, the button has been designed, but there is no text. Make sure that border is selected on the objects and Timeline panel because you need to add a textblock control from the assets panel to border.

Set the layout of textblock in border.

Set horizontalalignment and verticalignment to center textblock in border. Next, you need to bind the text attribute of textblock to the content attribute of the button. In this way, the content attribute of the button is changed along with the text attribute. In the common properties directory, locate advanced property options and select template binding | content in the pop-up menu to complete binding.

Currently, this button does not change when you click or get the focus. The following uses the click as an example to create an animation for responding to the click.

Make sure that the border control is selected on objects and timeline. Switch to the States panel and click pressed under commonstates. The recording starts automatically. Change the background of a border at the time point of 1 second and restore it to the Initial State at the location of 2 seconds. The dynamic effect triggered when you click the button is complete.

Conclusion: In Windows Phone 7, selecting appropriate layout and controls helps design and develop better user interfaces. The use of XAML and CS files can be the separation of interface and logic. In control development, the emphasis should be placed on the description of XAML. In combination with expression blend, it can also create a more gorgeous and vivid user experience.