Understand silverlight grid units..

Basit
0 Comments »

OK Let me explain u grid unit types , There are three types of Units available in silverlight grid for managing layouts .

1.Pixel
2.Auto
3.Star

1.Pixel

All of us are familiar with Pixels, Pixels are used for absolute dimension where we need fixed column or row.

2.Auto

we use Auto to increase or decrease grid column or row according to the content place with in.

For example, take a grid with three rows take first row auto place any UI element(TextBlock,TextBox,Ellipse etc..) in first row u will see that your row height increases according to that ui element dimensions.


3.Star

Star unit is very usefull in case where we need to use any of the available space.

For example, we are going to build a basic Player structure using a grid unit Star.
So, take a grid make two rows with in first one will star second with abolute postion in pixels almost 50 Px place a rectangle in first row and another rectangle in second row both with different fill colors preview with in browser now resize your browser note that rectangl on first row will resize itself in available space .

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