Flexible Dropshadow in silverlight

Basit
1 Comment »

Wan't a flexible drop shadow in Silverlight that grows when your layout changes..
  1. We take grid layout for this purpose , grid should have 2 columns and two rows.
  2. At first column and row we put a rectangle
  3. Now we have to prepare images for shadow , Open up Photoshop create a new layer , select rectangle from tools choose radius of 10 and then draw a rectangle.
  4. Now give this rectangle a layer style , select dropshadow of 10 px , Opacity 55 , distance of 5.
  5. Now hide the background layer , now u should have rectangle and it's shadow with transparent background.
  6. Now we have to cut out only the shadow from left , bottom,bottom Left and bottom Right like this...
  7. Like this cut all the shadow images , you should have five images .(Note: Images must be in PNG format...)
  8. Now silverlight Part , In second cloumn place the right 1 px height image and set it's fill property to Stretch and Vertical Alignment to miiddle .
  9. Second column and second row place the right bottom corner image .
  10. Second row column one Place the botoom shadow image and set it's fill property to Stretch and Horizontal Alignment to center .
  11. Like wise Place bottom left shadow image at second row column one And align it to left...
  12. Now u should see the Perfect shadow arround your reactangle
To Adjust the shadows perfectly i play with margins of right and bottom shadow images ... Now remove width and height of your Usercontrol and preview your xaml code in browser and resize the browser window...