Text Bevel Effect in Silverlight and WPF

If your a developer you may often over look design but there are some techniques you can use that take a small effort but produce big benefits. Here I'm going to show you how to use a Content Control to Create a Bevel Effect for your headers in your Silverlight or WPF Application. Lets get Started!

In Blend Add a Content Control where you would like your text to be.

 Now Edit The template of your Content Control by Right Clicking > Edit Template > Edit a Copy

Give Your Resource A Name I called mine BevelTextControlStyle and in this Case I will just add the definition in This Document.

First We will need to Group The [ContentPresenter] in A grid, Since Templates can only have one child. You can do this by Selecting the [ContentPresenter] and Hitting "Ctrl + G" or by Right Clicking the [ContentPresenter] and Sekecting Group Into > Grid

Inside Our The Grid we just created we are going to Add TWO text blocks behind the Header. One TextBlock We will call Shadow the other Highlight.

We now need to offset our Shadow text Box and our [ContentPresenter]. Using The Margin Property We will Offset the [ContentPresenter] by 1 from the top and the Shadow by 2 from the top.

Now we will Change the Foreground Brush of Our Highlight Text Box and Shadow Text Block using a Transparent White and Black. In this case I choose a 10% White for my Highlight or #19FFFFFF and a 40% Black for my Shadow or #66000000

Lastly, we just need to template bind the Text Property of Highlight and Shadow to Content. You can do that by clicking the box to the right of the text field under propertys and clicking Template Bind > Content.

By Editing the template and template binding all the text boxes to the Content you can now just select the content control and change its content as well as Font size, Font Family, and Font Weight and it will update both text boxes in the template and the [ContentPresenter].. You can still change the foreground color of Main Text without effecting the Shadow and Highlight .

I hope this makes you Applications more visually appealing!