C# .NET - problem understanding Margin Property

Asked By Fisher Ding on 17-Nov-11 07:40 AM

Margin property described by MSDN, quote :"The http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.margin.aspx property describes the distance between an element and its child (why not parent? ) or peers." But how to decide if the Margin describes the distance between an element and its child(parent) or peers? here are two examples:
first one:
<GroupBox Header="Experience" Height="200" Name="yearsExperience" Width="200">
  <StackPanel   Margin="0,0,0,0" >
     <RadioButton Content="Up to 1 year" Height="16" Name="novice" Width="120" Margin="0, 10, 0, 0" />
    <RadioButton Content="1 to 4 years" Height="16" Name="intermediate" Width="120" Margin="0, 20, 0, 0" />
     <RadioButton Content="5 to 9 years" Height="16" Name="experienced" Width="120" Margin="0, 20, 0, 0" />
     <RadioButton Content="10 or more" Height="16" Name="accomplished" Width="120" Margin="0, 20, 0, 0" />
     </StackPanel>
</GroupBox>

second one:
<GroupBox Header="Experience" Height="200" Name="yearsExperience" Width="200">
  <Grid Margin="0,0,0,0" >
     <RadioButton Content="Up to 1 year" Height="16" Name="novice" Width="120" Margin="0, 10, 0, 0" />
    <RadioButton Content="1 to 4 years" Height="16" Name="intermediate" Width="120" Margin="0, 20, 0, 0" />
     <RadioButton Content="5 to 9 years" Height="16" Name="experienced" Width="120" Margin="0, 20, 0, 0" />
     <RadioButton Content="10 or more" Height="16" Name="accomplished" Width="120" Margin="0, 20, 0, 0" />
     </Grid>
</GroupBox>
Apparently in the first example , the margin describes the distance between peers(RadioButtons), while in the second example ,the margin describles the distance between RadioButtons and Grid (parent) top, and RadioButtons shall overlap each other . that's really tricky, so what's really going on?

Kirtan Patel replied to Fisher Ding on 17-Nov-11 07:59 AM

Case1 :
by default Grid have only one column and one row so when you placed controls wrapped inside StackPanel it will consider only placement of StackPanel arrangement of conrols inside the stack panel is responsiblity of StackPanel it self so no controlled arranged correctly as you need .

Case 2 :

in this you tried to put controls directly inside the single grid cell so it stacked on overlapped inside that one cell of Grid if you want them correctly row by row you need to specify by <Grid.RowSpecification> that you want to show them in specific row like below code

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

Fisher Ding replied to Kirtan Patel on 17-Nov-11 08:40 AM

I don' think you answered my question. what I'm asking is the concept of Margin Property. In case 1, stackpanel is on top of GroupBox, and RadioButtons are on top of stackpanel, I don't see it has anything to do with Grid having one column or two columns. In case 2, If I want the RadioButtons line up in an even spacing, I can just simply change the Margin Property of RadioButtons, I don't have to specify <Grid.RowSpecification>. And again, what I'm asking is the concept of Margin Property, thank you.

Kirtan Patel replied to Fisher Ding on 17-Nov-11 08:45 AM

margin is used to set space around control.

but when you used Controls / Radio Buttons inside Single Gridcell it encountered more than one controls so it followed the margin property though but controls are stacked on each other due to fact that .you have not specified how to show them using Rows and Columns . in StackPanel case Cell having only one control that is stackPanel it self so it is showned with margins you specified in Stack Panel control and Controls inside stackpanel are managed by row wise automatically by stack panel's default layout .

Fisher Ding replied to Kirtan Patel on 17-Nov-11 09:01 AM

so you think in case 2, the Margin Property of Radio Buttons have no effect whatsoever on the spacing between the Radio Buttons ? that's so not true! you try changing the margin property of Radio Buttons ,the spacing will change accordingly.

Kirtan Patel replied to Fisher Ding on 17-Nov-11 09:06 AM

margin property have effect in second case too but ,when you set top margin 10 in first radio button it is setting it relative to GridCell Top border again when you set 20 to another radio button it set From Cell Top Border because second radio button was floating on RadioButton2 and it set margin in Relative to Top Border of the Grid Cell .

in case of Stackpanel RadioButtons are not floating on each other so Margin is Set in Relative to Uper RadioButton control

Fisher Ding replied to Kirtan Patel on 18-Nov-11 01:14 AM

What do you mean by "floating on "?

Kirtan Patel replied to Fisher Ding on 19-Nov-11 08:14 AM

look in dictionary friend ,you are even asking about some English word meaning to me .

Fisher Ding replied to Kirtan Patel on 19-Nov-11 11:14 AM

Do you think that I'm that stupid to not know the meaning of the word "float" literally? I just don't know if there's any figurative meaning behind it, especially when you said ,quote:"because second RadioButton was floating on RadioButton2 ". anyway I should thank you for your time and your patience, I really appreciate it , Kirtan .