Windows Phone 7 custom control-imagebutton

Today we will discuss how to create a different button control, called imagebutton.

Compile the Windows Phone 7 ApplicationProgramWe often encounter this requirement, that is, to create some image buttons. I believe some friends have tried to use the image control as the content of the standard button control, but what is the result? It should be unsatisfactory. The biggest problem is that the system's default button style will allow the button to be pressed to make the filled color take the system's foreground color, making the pictures in the button invisible, and there is an uncomfortable "blinking" effect. Since such requirements are common, we are better off customizing a control.

 

Before getting started, let's take a look at the actual effect after running:

 

The effect of the entire button is: when a user clicks a button, the button icon decreases slightly and fades. At the same time, another icon on the background of the button spreads and fades out.

Download the code, and then we will start to create such an imagebutton control.

Step 1: Write a custom control class

To create a custom control, you must first compile the control class. Now that we want to create a button control, let it inherit from the standard button control to obtain all the functions that the button has implemented (such as the Click Event of the button ).

In Visual Studio, create (or open) a Windows Phone 7 project and add a class.CodeAs follows:

Public Class   Imagebutton: button
{
Public Static Readonly Dependencyproperty imagesourceproperty =
Dependencyproperty. Register (
" Imagesource " ,
Typeof (Imagesource ),
Typeof (Imagebutton ),
Null );

Public Imagesource
{
Get {Return (Imagesource) getvalue (imagesourceproperty );}
Set {Setvalue (imagesourceproperty, value );}
}
}

In the imagebutton class defined above, we only declare an attribute, that is, imagesource, which is used to specify image resources for our imagebutton control. For more information about dependencyproperty, see how to declare an attribute using two pieces of code.

 

Step 2: design the appearance and behavior of Custom Controls

Re-compile in Visual Studio to make the declared control class take effect. Open the project in expression blend. In the assets area in the upper left corner of the expression blend interface, search for the imagebutton text to see the imagebutton control we just declared.

 

Double-click the control to add it to the current page.

 

So far, we have found that the appearance of the imagebutton control is actually no different from that of the standard button control. This is because we have not defined any template for this control, so the system will find its base class template for display. Next, we will generate and define the imagebutton template.

In the status of the imagebutton control selected, click [imagebutton]-> [edit TEMPLATE]-> [edit a copy...] at the top of the interface.

Extension description:

Select [create empty] to generate an empty template. If you need to write a fully custom control from the beginning, you can select this option.
Selecting [edit a copy...] means to copy the template of the current control (if it does not exist, select the template of the base class) and modify the template accordingly. Since we are doing the expansion based on the standard button control, this option is more suitable.

 

In the displayed dialog box, select [apply to all] and [application].

Extension description:

When defining a template for a control, you can specify a key for the template. When using this template, You need to explicitly) specify its keywords for reference. If we select the [apply to all] method, it means that no keyword (key) is specified for this template, then such a template is the default template (implicit style ). Within an application range, only one default template is allowed for the same control. In the preceding dialog box, the [Define in] area is used to specify the storage location of the template. If [application] is selected, the template is placed in the app. XAML file of the current project and globally visible. Generally, the default template should be placed here. If you select [This document], the template is placed in the current page file and only valid on the current page.

 

Click OK to go to the template editing page.

 

 

Extension description:

In the upper-left corner of the page, select the [States] Page to view a series of visual States related to the button control. (For more information about visual State, see)
In the lower-left corner of the interface, you can see the internal structure of the default button control provided by the system: a grid control is nested with a border control named [buttonbackground, A contentcontrol Control named [contentcontainer] is nested.
The principle is that the content attribute of the contentcontrol (red circle in the lower right of the Interface) is bound to the content attribute of the button control, so when we use the button control, whether you fill in any text on the Content property or place any image, you can see them in the content area of the button control.

 

Next, we can delete [contentcontainer] and [buttonbackground] in the template. During the deletion process, expression blend will prompt "the normal operation of visual State is affected due to the deletion of some interface elements". ignore this. Only the grid control is left.

 

Next, we place two image controls in the grid, which overlap with each other. Select two image controls at the same time, click the white box (advanced options) on the right of the margin attribute, and then select reset to clear all the margin values.

 

Still, when two image controls are selected, click the Browse button on the right of the [Source] attribute to specify the image resources for them (preferably a PNG Image of no more than X pixels ). After the image is loaded, if the size of the image control changes significantly, adjust the [view percentage] below the preview area to adjust the field of view, however, do not directly adjust the width and height of the image control. During the entire template definition process, the width and height of the two image controls should both display auto (a number ).

Tip:

In this step, the image resource is specified by hard encoding only for visual template editing. After the template is edited, We will bind the image resource of the image control to the imagesource variable declared in the imagebutton class.

 

Next, we name the two image controls imageback and imagefront respectively (the more in XAML, the higher the code, it means that the lower the runtime is displayed ). Set the opacity of imageback to 0% so that it is invisible by default.

 

 

On the [States] page in the upper-left area of the interface, select [pressed] Status (visual state) under [commonstates ). Select the imagefront control, set the x and y values of its size (sacle) to 0.8, and set its transparency to 50%. This step defines the changes in the appearance of a button when it is pressed.

 

Select the imageback control in [pressed] mode. Click the [show timeline] button to display the storyboard editing bar. In the story version, we create two key frames at an interval of about 0.3 seconds. In the previous key frame, set the opacity of the imageback control to 50%. In the second key frame, set the transparency of the imageback control to 0% and scale it) the X and Y values of are set to 2.

Tip:

The effect of the entire button is: when a user clicks a button, the button icon decreases slightly and fades. At the same time, another icon on the background of the button spreads and fades out.

 

Next, select the imagefront control, click the white square on the right of the [Source] property, and set template binding to imagesource. Select the imageback control and perform the same operation on it. This step binds the image resources of the two imagebutton controls to the imagesource attribute we declared at the beginning, so that the imagebutton control can be used in actual scenarios, specify different icons as needed. The image control in the template is not "hard-coded" to a specific image, but is bound to display the value provided by the actual imagesource attribute, therefore, we can implement a button control that can be reused.

 

Save the work result, and click the navigation bar at the top of the page to return to the page editing page using the imagebutton control.

 

On this page, select the imagebutton control. In the attribute bar, locate the [imagesource] attribute and specify any image resource for it. After the image is specified, you can see the effect after the image is loaded in the preview area.

 

Adjust the size and position of the imagebutton control, run the program, and view the effect in the simulator. When you click this button, the following results are displayed. (Deploy the service on a mobile phone device for better experience)

 

OK. So far, we have completed the whole process of customizing the imagebutton control.

Download Code

 

In the next articleArticle, I will introduce how to integrate a list control (ListBox) and related control buttons more rationally.

Thank you!