Reader Level:
ARTICLE

Customized TextBox Control in Silverlight 3

Posted by Diptimaya Patra Articles | XAML July 24, 2009
In this article we will see how to customized TextBox Control in Silverlight 3 using Blend 3.
  • 0
  • 0
  • 8084
Download Files:
 


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.gif

  1. Go ahead and draw a TextBox into your Grid and make it larger so that you can see the changes clearly.

    2.gif

    I have changed the Back ground color as black and the Foreground as Linear Gradient Brush. Here is the Xaml code for your reference.


    <
    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>

    3.gif


    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.

    4.gif

    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.

    5.gif

    Here is the XAML code for your reference.

    <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>


That's it you have successfully customized your TextBox control.

Enjoy Coding!

COMMENT USING

Trending up