Introduction
In my previous article “Customizing Slider Control In Silverlight 3” we saw some customization of Slider control. In this article we will see how can we customize our common TextBox Control. In this sample I will show you how you can change the Text ForeGround and the CaretBrush.
Creating Silverlight 3 Application
Open up Blend 3 and create a Silverlight 3 Application.
1) Go ahead and draw a TextBox into your Grid and make it larger so that you can see the changes clearly.
I have changed the Back ground color as black and the Foreground as Linear Gradient Brush. Here is the Xaml code for your reference.
{codecitation class="brush: xml; gutter: true;" width="650px"}
<TextBox Height="40" Margin="111,119,217,0" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap" Width="300" FontSize="21.333" Background="Black" BorderThickness="1">
<TextBox.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF600707" Offset="0"/>
<GradientStop Color="#FF0700FF" Offset="1"/>
<GradientStop Color="#FF00FF81" Offset="0.384"/>
<GradientStop Color="#FFE7D918" Offset="0.5"/>
<GradientStop Color="#FFFF00C5" Offset="0.595"/>
</LinearGradientBrush>
</TextBox.Foreground>
</TextBox>
{/codecitation} 
Now we will change the CaretBrush, Caret is nothing but a vertical line. When you type something in the TextBox one thin line used to blink. The default color for it is Black. Now we will modify to match to our Foreground Text.
2) Select the CaretBrush and change the Brush to LinearGradient Brush. 
Of course you can’t see the Caret while you design. So run your application and now try to type something in the TextBox. You will be able to see the Caret changed to its Linear Gradient Color that we have provided. 
Here is the XAML code for your reference. {codecitation class="brush: xml; gutter: true;" width="650px"}
<TextBox.CaretBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF600707" Offset="0"/>
<GradientStop Color="#FF0700FF" Offset="1"/>
<GradientStop Color="#FF00FF81" Offset="0.384"/>
<GradientStop Color="#FFE7D918" Offset="0.5"/>
<GradientStop Color="#FFFF00C5" Offset="0.595"/>
</LinearGradientBrush>
</TextBox.CaretBrush>
{/codecitation} That’s it you have successfully customized your TextBox control. Enjoy Coding. Thank you
| About the Author |
 | | Diptimaya Patra |
Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.
Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra
|
|
|