Search code examples
c#wpfuser-controlsgridinfragistics

WPF Custom grid control

I'm trying to figure out a way to define a custom usercontrol as the following image:

enter image description here

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.

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.

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

<ItemsControl  Name="SelectedSampleData"  Grid.Row="1" ItemsSource="{Binding SelectedSampleData}" ItemTemplate="{StaticResource DefaultTemplate}" />

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

                    <igDP:FieldLayout.Fields >

                        <igDP:Field Name="label1" IsReadOnly="True">
                            <igDP:Field.Settings>
                                <igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="100" AllowEdit="False" />
                            </igDP:Field.Settings>
                        </igDP:Field>

                        <igDP:Field Name="label2" IsReadOnly="True">
                            <igDP:Field.Settings>
                                <igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="70" AllowEdit="False" />
                            </igDP:Field.Settings>
                        </igDP:Field>

                        <igDP:Field Name="label3" IsReadOnly="True">
                            <igDP:Field.Settings>
                                <igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="70" AllowEdit="False" />
                            </igDP:Field.Settings>
                        </igDP:Field>

                        <igDP:Field Name="label3" IsReadOnly="True">
                            <igDP:Field.Settings>
                                <igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="95" AllowEdit="False" />
                            </igDP:Field.Settings>
                        </igDP:Field>

                        <igDP:Field Name="label4" IsReadOnly="True">
                            <igDP:Field.Settings>
                                <igDP:FieldSettings LabelTextWrapping="Wrap" LabelMaxWidth="180" AllowEdit="False" />
                            </igDP:Field.Settings>
                        </igDP:Field>

                    </igDP:FieldLayout.Fields>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>

        </igDP:XamDataGrid>
        <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}" />
        <Separator Grid.Row="3"/>
    </Grid>
</DataTemplate>

which plays like this:

enter image description here

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.

Have you got any thoughts?

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.

I'm using Infragistics, if it helps.

Thanks in advance

Solution

  • Inner rows, component not aligned within a standard column (your text fields), and multiple row headers will force you to "hijack" the basis concepts of the DataGrid. I recommand you to develop your own user control without DG.

    Otherwise, you will have to redefine the whole DataGrid's template and you will surely need some custom behaviors/logics, so you also need to extend the DataGrid control itself.

    The following article can gives you a good entry point https://www.codeproject.com/articles/586132/wpf-datagrid-custommization-using-style-and-templa