WPF Custom grid control
<p>I'm trying to figure out a way to define a custom usercontrol as the following image:</p>

<p><a href="https://i.stack.imgur.com/FcbEl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FcbEl.jpg" alt="enter image description here"></a></p>

<p>Whereas the first column highlights the row, the second column highlights the "inner row" and for every outer row there should be a textbox field where user can input data into.</p>

<p>What I'm struggling with is to understand if this is at all possible.
All the solutions I'm coming up with puts another label on the second outer row (where TextField 2.1.1) is.</p>

<p>The nearest I could come is a bad mock which basically comes down to an ItemsControl binding to a DataTemplate defined like:</p>

<pre><code>&lt;ItemsControl  Name="SelectedSampleData"  Grid.Row="1" ItemsSource="{Binding SelectedSampleData}" ItemTemplate="{StaticResource DefaultTemplate}" /&gt;

&lt;DataTemplate x:Key="DefaultTemplate"&gt;
    &lt;Grid x:Name="GridItem" MaxWidth="{Binding ElementName=Container,Path=ActualWidth}" &gt;
        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition /&gt;
            &lt;RowDefinition /&gt;
            &lt;RowDefinition /&gt;
            &lt;RowDefinition /&gt;
        &lt;/Grid.RowDefinitions&gt;
        &lt;Viewbox Height="20"  HorizontalAlignment="Left"&gt;
            &lt;TextBlock Grid.Row="0" Text="{Binding Path=field1}" Margin="5,1,0,0" Background="LightBlue" /&gt;
        &lt;/Viewbox&gt;
        &lt;igDP:XamDataGrid Name="GridConsuntivi" Grid.Row="1" DataSource="{Binding Path=field2List}" Margin="25,0,0,0"&gt;
            &lt;igDP:XamDataGrid.FieldLayouts&gt;
                &lt;igDP:FieldLayout Key="DefaultLayout"&gt;

                    &lt;igDP:FieldLayout.Fields &gt;

                        &lt;igDP:Field Name="label1" IsReadOnly="True"&gt;
                            &lt;igDP:Field.Settings&gt;
                                &lt;igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="100" AllowEdit="False" /&gt;
                            &lt;/igDP:Field.Settings&gt;
                        &lt;/igDP:Field&gt;

                        &lt;igDP:Field Name="label2" IsReadOnly="True"&gt;
                            &lt;igDP:Field.Settings&gt;
                                &lt;igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="70" AllowEdit="False" /&gt;
                            &lt;/igDP:Field.Settings&gt;
                        &lt;/igDP:Field&gt;

                        &lt;igDP:Field Name="label3" IsReadOnly="True"&gt;
                            &lt;igDP:Field.Settings&gt;
                                &lt;igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="70" AllowEdit="False" /&gt;
                            &lt;/igDP:Field.Settings&gt;
                        &lt;/igDP:Field&gt;

                        &lt;igDP:Field Name="label3" IsReadOnly="True"&gt;
                            &lt;igDP:Field.Settings&gt;
                                &lt;igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="95" AllowEdit="False" /&gt;
                            &lt;/igDP:Field.Settings&gt;
                        &lt;/igDP:Field&gt;

                        &lt;igDP:Field Name="label4" IsReadOnly="True"&gt;
                            &lt;igDP:Field.Settings&gt;
                                &lt;igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="180" AllowEdit="False" /&gt;
                            &lt;/igDP:Field.Settings&gt;
                        &lt;/igDP:Field&gt;

                    &lt;/igDP:FieldLayout.Fields&gt;
                &lt;/igDP:FieldLayout&gt;
            &lt;/igDP:XamDataGrid.FieldLayouts&gt;

        &lt;/igDP:XamDataGrid&gt;
        &lt;TextBox Margin="25,10,0,0" AcceptsReturn="True"  MaxWidth="{Binding ElementName=parent,Path=ActualWidth}"  TextWrapping="Wrap" IsEnabled="True" Grid.Row="2" Text="{Binding Path=note}" /&gt;
        &lt;Separator Grid.Row="3"/&gt;
    &lt;/Grid&gt;
&lt;/DataTemplate&gt;
</code></pre>

<p>which plays like this:</p>

<p><a href="https://i.stack.imgur.com/67QsF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/67QsF.jpg" alt="enter image description here"></a></p>

<p>Other than the visual uglyness which I think can be fixed with some artistic touch (which I don't have) I hate the fact that there are two headers with the same information. I would like it to feel like it was a single uniform component.</p>

<p>Have you got any thoughts?</p>

<p>I was thinking about putting a converter of some sort on the header visibility of the xamdatagrid that would hide it if it was not the first row shown but I was trying to avoid this kind of nifty tricks.</p>

<p>I'm using Infragistics, if it helps.</p>

<p>Thanks in advance</p>