Working with Margins in WPF

Hi all,

As we know, that WPF has come up with a new Concept of XAML, the thing which irritated me most while I as learning it, is working with Margins. I, being an average guy, certainly took pretty long to understand how Margin Works.

     When I start learning WPF, I thought that previous version(Win Forms) is pretty easy and effective as compared to new WPF. But more familiar I got with WPF, I found it more and more effective.



Q. What are Margins?
A. Margins are mere numbers, which decide how far your control will be placed from the boundaries of the parent control/container.




Example:

  

  
< Grid >
      < Image Height="40" Margin="0,1,0,0" Name="imgTop" Opacity="1" Stretch="Fill" Style="{DynamicResource formHeaderImageStyle}" VerticalAlignment="Top" />

   < / Grid >

Now here, in the above line, it says vertical alignment = Top, that means, the margin will be considered from the top only. Margin 0,1,0,0 means 1 point away from top. Suppose if you want to increase and decrease the height of the control propotionate to the parent container then you can use following code.

< Grid >
      < Image Height="40" Margin="0,10,0,10" Name="imgTop" Opacity="1" Stretch="Fill" Style="{DynamicResource formHeaderImageStyle}" VerticalAlignment="Strech" />

   < / Grid >

The above code says Vertical alignment = strech. It means that the image control will be streched according to the margin set and the actual height of the container. The image control will be ten-ten points away from the top and the bottom of the container(Grid in the current case). If the Grid's height is increased, the image's height will be increased to ensure that the bottom is only 10 points aways from the Grid's lower bottom.

Thanks,
Vikas