Monday, December 10, 2012

How to create tiger textbox in silverlight

How to create tiger textbox in silverlight

I want to add the tiger textbox for message conversation in my project, I dont know how to apply styles or controls to get the tiger textbox in silverlight.

Sample image of tiger textbox

Is any way to get the above image in silverlight code / styles

Answers & Comments...

Answer: 1

Short of creating your own custom control in silverlight, there is no way you can have a textbox shaped like that.

However, there are 2 ways you can get what you want. 1) Either add a simple Border to your textbox. Change the opacity setting according to your needs. For example:

`<Border BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="49,33,0,0">             <TextBox Height="72" TextAlignment="Center"  Name="textBox1" Text="TextBox"  Width="270" Background="White" />  </Border>` 

2) Place the Image of the bubble, and place a textbox inside it. You would have to change a few opacity settings, but here is an example:

<Grid HorizontalAlignment="Left" Height="96" Width="316"  Margin="99,265,0,0" VerticalAlignment="Top">             <Image    Name="image1" Stretch="Fill"   Source="bubble.png" />             <TextBox   Name="textBox2" Text="TextBox"  SelectionBackground="#001BA1E2" SelectionForeground="Black" BorderBrush="Transparent" Background="Transparent" Margin="0,0,0,30" />         </Grid> 

You would have to made a few adjustments with the margins based on the image you use. But basically, this is how the above 2 textboxes would look:

enter image description here

If You wish to create your own Control for the Tiger Textbox, you could follow these steps:

1) Open the Project in Expression Blend

2) In the position where you wish to add the textbox, Draw an image which is in the Tiger Textbox format.

3) Right Click on this Image and Select "Make into Control..."

4) Choose the TextBox.

by : Prashant Vaidyanathanhttp://stackoverflow.com/users/1407277




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog