WPF 自定义网格控件

Question

我正在尝试找出一种方法来定义自定义用户控件，如下图所示：

虽然第一列突出显示行，第二列突出显示 "inner row" 并且对于每个外行都应该有一个文本框字段，用户可以在其中输入数据。

我正在努力了解这是否可能。我提出的所有解决方案都在第二个外行（TextField 2.1.1 所在的位置）上放置了另一个标签。

最接近我的是一个糟糕的模拟，它基本上归结为 ItemsControl 绑定到 DataTemplate 定义如下：

<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>

这样玩的：

除了我认为可以通过一些艺术触觉（我没有）来解决的视觉丑陋之外，我讨厌有两个 header 具有相同信息的事实。我希望它感觉像是一个统一的组件。

你有什么想法吗？

我正在考虑在 xamdatagrid 的 header 可见性上放置某种转换器，如果它不是显示的第一行，它将隐藏它，但我试图避免这种巧妙的技巧。

如果有帮助，我正在使用 Infragistics。

提前致谢

Answer 1

内部行、未在标准列（您的文本字段）内对齐的组件和多行 headers 将迫使您 "hijack" DataGrid 的基本概念。我建议你在没有DG的情况下开发自己的用户控件。

否则，您将不得不重新定义整个 DataGrid 的模板，您肯定需要一些自定义 behaviors/logics，因此您还需要扩展 DataGrid 控件本身。

下面这篇文章可以给你一个很好的切入点 https://www.codeproject.com/articles/586132/wpf-datagrid-custommization-using-style-and-templa

WPF 自定义网格控件

WPF Custom grid control

c#

wpf

grid

user-controls

infragistics