Create custom controls on Windows Phone 7

Create a custom control:
The control class must be derived from the control (or contentcontrol). At least, to inherit basic control functions, the control class should be derived from the Silverlight system. Windows. Controls. control class. However, it can also

Contentcontrol, itemscontrol, and other control derived classes. Many built-in controls can be derived directly or indirectly from the contentcontrol with the content attribute added, and this attribute allows the control content (such as pressing

Button content. The ListBox control is derived from itemscontrol. itemscontrol can be used to provide users with the basic behavior of controls in the project set. Because we want to implement the button

Contentcontrol is derived.
CodeThe structure is as follows:
Namespace simplebuttondemo
{
Public class simplebutton: contentcontrol
{
}
}

In this case, you have implemented a simple custom control, which can be instantiated by declaration in the XAML document. To illustrate this problem, add the following statements to page. XAML:
<Local: simplebutton/>
To enable Silverlight to recognize this declaration, you also need to add the following attributes to the root usercontrol element of page. XAML:
Xmlns: Local = "CLR-namespace: simplebuttondemo ;"
You can see that CLR-namespace can recognize the namespace in which simplebutton class is defined, whileProgramSet to identify the Assembly containing this control.
The control can be called in XAML. The code structure is as follows:
<Grid X: Name = "layoutroot" background = "white">
<Local: simplebutton/>
</GRID>

Instance:

Naivegradientbutton class

 Using  System;
  Using  System. windows;
  Using System. Windows. controls;
  Using  System. Windows. Media;

  Namespace  Naivegradientbuttondemo
{
  Public     Class  Naivegradientbutton: button
{
Gradientstop gradientstop1, gradientstop2;

  Public  Naivegradientbutton ()
{
Lineargradientbrush brush  =    New  Lineargradientbrush ();
Brush. startpoint  =     New  Point (  0  ,  0  );
Brush. endpoint  =     New  Point (  1  ,  0 );

Gradientstop1  =     New  Gradientstop ();
Gradientstop1.offset  =     0  ;
Brush. gradientstops. Add (gradientstop1 );

Gradientstop2  =     New  Gradientstop ();
Gradientstop2.offset  =    1  ;
Brush. gradientstops. Add (gradientstop2 );

Foreground  =  Brush;
}

  Public  Color color1
{
  Set  {Gradientstop1.color  =  Value ;}
  Get  {  Return (Color) gradientstop1.color ;}
}

  Public  Color color2
{
  Set  {Gradientstop2.color  =  Value ;}
  Get  {  Return  (Color) gradientstop2.color ;}
}
}
} 

Add reference in XAML

Xmlns: Local = "CLR-namespace: naivegradientbuttondemo"

 <! -- Layoutroot is the root grid where all page content is placed  -->  
  <  Grid  X: Name  = "Layoutroot"  Background  = "Transparent"  >  
  <  Grid. rowdefinitions  >  
  < Rowdefinition  Height  = "Auto"  />  
  <  Rowdefinition  Height  = "*"  />  
  </  Grid. rowdefinitions  >  

  <! -- Titlepanel contains the name of the application and page title  -->  
  <  Stackpanel  X: Name  = "Titlepanel"  Grid. Row  = "0"  Margin  ="  >  
  <  Textblock  X: Name = "Applicationtitle"  Text  = "Naivegradientbutton Demo"  Style  ="  {Staticresource phonetextnormalstyle}  "  />  
  <  Textblock  X: Name  = "Pagetitle"  Text  = "Main page"  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"  >  
  <  Stackpanel  >  
  <  Local: naivegradientbutton  Content = "Naive gradient button #1"  
Horizontalalignment  = "Center"     />  

  <  Local: naivegradientbutton  Content  = "Naive gradient button #2"  
Color1  = "Blue"  Color2  = "Red" 
Horizontalalignment  = "Center"     />  

  <  Local: naivegradientbutton  Content  = "Naive gradient button #3"  
Color1  ="  {Staticresource phoneforegroundcolor}  " 
Color2  ="  {Staticresource phonebackgroundcolor}  "  
Horizontalalignment  = "Center"     />  

  <  Local: naivegradientbutton  Content  = "Naive gradient button #4" 
Style  ="  {Staticresource gradientbuttonstyle}  "     />  
  </  Stackpanel  >  
  </  Grid  >  
  </ Grid  >