Many times I want to make my WPF Controls have a 3D effect. For examples Headers of lists and such. Saddly there is no built in way to do it so we have to come up with a custom solution. I don’t want to use Bitmap effects due to performance reasons, I must say I don’t have much experience with them but from what I have I am not a big fan.

Here is my solution for a 3D effect on WPF Controls.

First of all a Quick demonstration. Which one looks better.

WPF 3D Border Style

I don’t know about you but the second one is much nicer with that 3D effect.

How is it done? As I said before I don’t like using Bitmap effects if I don’t have to, so this is done with combining 2 borders together. The simple upper  one is a regular border with TextBlock

   1: <Border Background="#acaeb5" Margin="10" 
   2:                 Width="150" Padding="10">
   3:             <TextBlock Padding="5" Width="130" 
   4:                        TextAlignment="Center" 
   5:                        Background="#92aeff"
   6:                        Text="Header Text">
   7:             </TextBlock>
   8:         </Border>

To create the 3D effect I wrapped the TextBlock with 2 borders one White and one Black and set the their with so the white Border is visible on top and the black Border is visible at the bottom.

Here is the code:

   1: <Border Background="#acaeb5" Margin="10" 
   2:                 Width="150" Padding="10">
   3:             <Border BorderBrush="White" 
   4:                     BorderThickness="2,2,0,0">
   5:                 <Border BorderBrush="Black" 
   6:                         BorderThickness="0,0,2,2">
   7:                     <TextBlock Padding="5" Width="130" 
   8:                        TextAlignment="Center" 
   9:                        Background="#92aeff"
  10:                        Text="Header Text">
  11:             </TextBlock>
  12:                 </Border>
  13:             </Border>
  14:         </Border>

Easy isn’t it? No Bitmap effects, only standard controls. You can easily customize the look and feel of it by changing colors and rounding the corners

Enjoy

Amit

Tags :

2 Trackback(s)

  1. Aug 27, 2008: Dew Drop - August 27, 2008 | Alvin Ashcraft's Morning Dew
  2. Sep 6, 2009: WPF: 90+ Miejsc kt√≥re warto zna? « Dawid Po?li?ski

Post a Comment