Learning Silverlight 2 Series (9): Using Control templates

This article is the Nineth article in the series, which describes how to customize the perception of a control using a control template. Silverlight provides an extremely powerful feature that allows users to fully customize the appearance of a control.

Customizing control content

In Silverlight, the WatermarkedTextBox control can provide a hint for the user's input, and if it's simply a bit of textual information, sometimes it seems monotonous, and if you add the corresponding picture to the effect will be better, as shown in the following figure a simple user login interface:

This looks like the interface is much more vivid, and the XAML declaration is as follows:

<canvas background= "#46461F" >
<watermarkedtextbox x:name= "UserName" canvas.top= "canvas.left=" 50 "
Width= "height=" >
<WatermarkedTextBox.Watermark>
<stackpanel width= "height=" orientation= "Horizontal" >
<image source= "Admin.png" horizontalalignment= "left" ></Image>
<textblock text= "Please enter user name" verticalalignment= "Center" foreground= "#999999"/>
</StackPanel>
</WatermarkedTextBox.Watermark>
</WatermarkedTextBox>
　　
<watermarkedtextbox x:name= "Password" canvas.top= "50" canvas.left= "
Width= "height=" horizontalalignment= "left" >
<WatermarkedTextBox.Watermark>
<stackpanel width= "height=" orientation= "Horizontal" >
<image source= "Lock.png" horizontalalignment= "left" ></Image>
<textblock text= "Please enter password" verticalalignment= "Center" foreground= "#999999"/>
</StackPanel>
</WatermarkedTextBox.Watermark>
</WatermarkedTextBox>
　　
<button canvas.top= "180" canvas.left= "100"
Width= "height=" >
<Button.Content>
<stackpanel orientation= "Horizontal" >
<image source= "Apply.png" horizontalalignment= "left" ></Image>
<textblock text= "Login" verticalalignment= "Center" margin= "0 0 0" ></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</Canvas>