Two special properties of the button control in Silverlight!

Before introducing the content attribute, remember the following inheritance tree:

View code

1 Control(abstract)
2     ContentControl
3           Frame
4                PhoneApplicationFrame
5      UserControl
6           Page
7                PhoneApplicationPage

Note that the content attribute in contentcontrol is an object!
In Silverlight, a button is derived from contentcontrol and indirectly from control. Because the original cause of property inheritance, the button control has the content attribute of the contentcontrol control, where the content attribute is an object, the following code defines the content of the button control:

View code

1 <Button>
2     <Button.Content>
3          Click this Button!
4     <Button.Content>
5  <Button>

On the surface, the above Code is correct, but this is not allowed in Silverlight. In addition, the content attribute element of a control derived from the contentcontrol control can be ignored. Therefore, the changed code is as follows:

View code

1 xmlns:system="clr-namespace;assembly=mscorlib"
2  <Button>
3     <system:String>Click this Button</system:String>
4  <Button>

If you do not like the button control to display only common text content, you can set its content attribute content to other elements, but this element must be a frameworkelement derived object. For example, set the content attribute of the button control to an image:

View code

1 <Button>
2     <Image Source="***.png"
3                 Stretch="none"/>
4 </Button>

Because the button control is a contentcontrol derived element, the syntax form of the button. content attribute element can be omitted ......

You can also set a special text format in the buton control. For example, the following code sets the italic text content:

View code

1 <Button>
2      <TextBlock>
3          <Run FontStyle="Italic">Click Me！</Run>
4      <TextBlock>
5  <Button>

If you want to set the content attribute of the button control to an elliptic with a gradient Paint Brush, you need to use the contenttemplate attribute. As shown above, if you want to set the content attribute content of the button control to non-text content, you need to set its content attribute content to a derived element of the frameworkelement class. Here, the content is an elliptic that includes a gradually changing image, the gradient painter is not a derivative element of frameworkelement, so it is necessary to control the contenttemplate content template of the button control .....

The relevant XAML code is:

View code

 1 <Button>
 2      <Button.Content>
 3           <RadialGradientBrush>
 4                <GradientStop Offset="0“ Color="Blue"/>
 5               <GradientStop Offset="1" Color="AliceBlue"/>
 6           </RadialGradientBrush>
 7      </Button.Content>
 8      <Button.ContentTemplate>
 9           <DataTemplate>
10                 <Elipse Width="100"
11                            Height="100"
12                            Fill="{Binding}"/>
13           </DataTemplate>
14      </Button.ContentTemplate>
15  </Button>

The result is as follows:

The above XAML code has a special binding syntax tag, neither set source nor set the elementname or path attribute, only "{binding}", this indicates that the bound content is the gradient Paint Brush. The code above actually changes some visual trees of the button control. The visual tree of the standard button control is in the following form:

After setting the contenttemplate, the visual tree of the control has become the following format:

The value of the contenttemplate attribute of the button control is of the datatemplate type. Setting the datatemplate can change some visual trees of the control!