Are there unwritten limitations of the silverlight RowDetailsTemplate? - silverlight

Question

I've been staring at some code for a RowDetailsTemplate definition in one of my Silverlight datagrids and thought about refactoring it because it looked like it had repeating grids. I thought, after looking at this, that I would only need one datagrid, but as it turns out, this wierd, mysterious double grid is required to get all the items to line up:
<data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="20" />
<RowDefinition MinHeight="25" />
<RowDefinition MinHeight="25" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Attendee Cap" Margin="0,0,50,0" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding AttendeeCap}"/>
<TextBlock Text="Start Date" Grid.Row="1" Grid.Column="0" Margin="0,0,50,0" />
<controls:DatePicker SelectedDate="{Binding StartDate, Mode=TwoWay}" Grid.Row="1" Grid.Column="1"/>
<input:TimePicker Value="{Binding StartDate, Mode=TwoWay}" Grid.Row="1" Grid.Column="2" MinWidth="65" />
<TextBlock Text="End Date" Grid.Row="2" Grid.Column="0" Margin="0,0,50,0" />
<input:TimePicker Value="{Binding EndDate, Mode=TwoWay}" Grid.Row="2" Grid.Column="2" MinWidth="65" />
<controls:DatePicker SelectedDate="{Binding EndDate, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" />
</Grid>
</Grid>
</DataTemplate>
I thought I could get rid of the first grid definition and just keep the one that is right before the content. The problem is, if I get rid of that grid, the textbox, data picker, and timepicker don't show up.
Am I missing some unwritten rule about the RowDetailsTemplate that is causing this voodoo behaviour?

Answer 1

You can possibly get rid of the third ColumnDefinition entry in the first grid as there is nothing assigned to it, the only purpose at the moment of column definitions two and three will be to divide the available width into three portions. If you do this though you may want to apply a width to the first column definition and leave the second column as auto sizing to fill the remaining space.
When you have items inside a grid, they are automatically placed in column 0, row 0, unless you specify otherwise. This means your inner grid is being placed in the first column (column 0) of the outer grid because it doesn't have a Grid.Column="" entry. This column is currently using 1/3 of the available width of its parent container. IOW, the outer grid is being used to constrain the inner grid.
You could try using Snoop to determine what is going on with your current and modified layouts, or you could add borders to the grids so you can see their exact positions once rendered.