Windows Phone 7 custom control-switchbutton

In developmentWindows Phone 7ApplicationProgramOccasionally, you need to implement buttons with two States. click the button to switch between the two States, and the appearance of each State is also different. ActuallySDKDefault built-inCheckboxControls andSilverlight ToolkitProvidedToggleswitchControls can meet the preceding requirements to some extent. They are relatively fixed in appearance and are not easy to customize. Today, we will introduce you to a new custom control called:Switchbutton.

 

First, let's take a look at the actual running effect:

ClickSwitchbuttonThe button appears smoothly from the left to the right.CodeTriggerChecked/uncheckedEvent and update it in real timeIscheckedThe property isTrueOrFalse.

Download Code

Next, we will start to implement it.

 

Step 1: Write a custom control class

to create a custom control, you must first compile the control class. switchbutton and checkbox there is a difference, but its main behavior and attributes should be consistent with checkbox . Therefore, let's first check the definition of checkbox . In visualstudio , we can find out through the trace base class, checkbox inherited from system. windows. controls. primitives togglebutton class in the namespace. For more information, see togglebutton class definition. You can see most of the attributes and events required by a status button, all are defined here. In this case, our switchbutton classes must inherit togglebutton classes.

InVisual Studio, Create (or open)Windows Phone 7Project, and then addSwitchbuttonClass. The Code is as follows:

Public Class Switchbutton: togglebutton
{
Public Static Readonly Dependencyproperty switchonimagesourceproperty =
Dependencyproperty. Register (
" Switchonimagesource " ,
Typeof (Imagesource ),
Typeof (Switchbutton ),
Null );

Public imagesource switchonimagesource
{< br> Get {< span style =" color: # 0000ff; "> return (imagesource) getvalue (switchonimagesourceproperty );}
set {setvalue (switchonimagesourceproperty, value) ;}< BR >}

Public static readonly dependencyproperty switchoffimagesourceproperty =
dependencyproperty. register (
" switchoffimagesource " ,
typeof (imagesource),
typeof (switchbutton ),
null );

PublicImagesource switchoffimagesource
{
Get{Return(Imagesource) getvalue (switchoffimagesourceproperty );}
Set{Setvalue (switchoffimagesourceproperty, value );}
}
}

InSwitchbuttonTwo attributes are declared in the class:SwitchonimagesourceAndSwitchoffimagesource. These two attributes are used to specifySwitchbuttonThe exterior image to be displayed when the widget is in two states. For more information about the control attribute declaration, seeDependencyproperty.

 

Step 2: design the appearance and behavior of Custom Controls

InPhone pageDrag and DropSwitchbuttonControl. Then use[Right-click]-> [Edit TEMPLATE]-> [edit a copy]To generate a template. Next, we will edit this template.

(for more information about Expression blend for more information about how to design custom control templates, see Article :

Windows Phone 7Custom Controls-Imagebutton)

ForSwitchbuttonSpecific content.

 

SwitchbuttonThe template of is inherited fromTogglebuttonControl template, with threeVisualstategroup, Respectively:Commonstates,Checkstates,Focusstates. What we mainly care about isCheckstatesThree status groupsVisualstate, Respectively:Checked,UncheckedAndIndeterminate. Where,IndeterminateThe status corresponds"Uncertain"Status, that is, in some special application scenarios, you can use the buttons that implement three states. In this example, we will not consider it.

 

Briefly describe the design ideas:SwitchbuttonInCheckedWhen it is inUncheckedStatus, we need it to display another image.

OKThe following describes the procedure:

 

Operation2.1:

Since two images need to be switched successivelyGridAnd add twoImageControl, respectively named:ImageonAndImageoff.

 

Operation2.2:

Selected Imageon Control, in the property panel, Click [Source] The small square on the right of the attribute ( Advanced options ), Set Template binding Is Switchonimagesource . Similarly Imageoff Control Source Bind Switchoffimagesource Attribute. In this step Image The image resources of the control are bound to the two attributes declared at the beginning, so that they can be used in reality. Switchbutton You can specify different images as needed to reuse them.

Tip:

The pictures in the two States should follow the principle of "similar", that is, the size and color of the two images are basically the same, only a certain part changes slightly in displacement, size, or brightness. Some may worry that "the change is not big enough, and users are afraid to ignore it. Remember that when a user's implementation is centralized, it is sensitive to changes in even one pixel.

 

Operation2.3:

By defaultStatesSelectBaseStatus ),ImageoffOfOpacitySet the value0%, That is, invisible.

 

Operation2.4:

InStatesPanel, selectUncheckedStatus, SetImageonOfOpacitySet0%, AndImageoffOfOpacitySet100%. ThenCheckstatesUnderDefault transitionSet to a reasonable duration, for example0.3Seconds, making switching between States more natural.

 

Step 3: Use Custom Controls

InPhonepage, PlaceSwitchbuttonControl, and then selectMiscellaneousRegion, findSwitchonimagesourceAttributes andSwitchoffimagesourceAttribute. Decibel sets different images for them to represent two states.

 

Run the program and clickSwitchbuttonButton, you can see that it switches between the two States.

 

 

OK. Now we have finished the customization.SwitchbuttonControl.

Download Code