Add Custom Rows at the top of DataGrid - WPF

问题

I am new in WPF and I have a project that needs to have this output below

Do you have any idea on how to do this. I just know a basic dataGrid code like this below

                              <DataGrid AutoGenerateColumns="False" Name="myGrid" Margin="10">
                                    <DataGrid.RowHeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Path=Item.Header}"/>
                                        </DataTemplate>
                                    </DataGrid.RowHeaderTemplate>
                                    <DataGrid.Columns>
                                        <DataGridTextColumn Header="Case Title" Binding="{Binding Path=Name}"  Width="160" />
                                        <DataGridComboBoxColumn Width="100" x:Name="dtgCbxColUnit" SelectedValueBinding="{Binding Unit, Mode=TwoWay}" DisplayMemberPath="{Binding Unit}" />
                                        <DataGridTextColumn Header="Case 1" Binding="{Binding Path=Case1}" Width="80"/>
                                        <DataGridTextColumn Header="Case 2" Binding="{Binding Path=Case2}" Width="80" />
                                        <DataGridTextColumn Header="Case 3" Binding="{Binding Path=Case3}" Width="80" />
                                        <DataGridTextColumn Header="Case 4" Binding="{Binding Path=Case4}" Width="80" />
                                        <DataGridTextColumn Header="Case 5" Binding="{Binding Path=Case5}" Width="80" />
                                        <DataGridTextColumn Header="Case 6" Binding="{Binding Path=Case6}" Width="80" />
                                    </DataGrid.Columns>
                             </DataGrid>

I hope you guys can help me with this. Thank you in advance.

回答1:

The DataGrid cell templating is done vertically (by columns) not horizontally (by rows). It means you can't make an exception for a few rows. If you want to have custom rows you have to apply it to all rows using DataGridTemplateColumn

<DataGrid.Columns>
    <DataGridTemplateColumn Header="People">
        <DataGridTemplateColumn.CellStyle>
            <Style TargetType="DataGridCell">
                <!-- normal template -->
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBlock Text="{Binding A}" Background="Green"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RowType}" Value="0">
                        <Setter Property="Template">
                            <Setter.Value>
                                <!-- first extra template -->
                                <ControlTemplate>
                                    <TextBlock Text="{Binding A}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RowType}" Value="1">
                        <Setter Property="Template">
                            <Setter.Value>
                                <!-- second extra template -->
                                <ControlTemplate>
                                    <CheckBox Content="{Binding A}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DataGridTemplateColumn.CellStyle>
    </DataGridTemplateColumn>
</DataGrid.Columns>

On the other hand DataGrid "styling" is done the opposite way using RowStyle. So you can write a trigger to customize one row completely with the cost of ignoring all cells (or columns) in that row:

<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RowType}" Value="0">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Button Content="{Binding A}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>

combined results:

Normally I would suggest to use your own implementation of the general ItemsControl if you think these customizations will grow in the future.

There is another workaround where you create a gap at the top of the grid and overlay stuff onto it using a Canvas or any control with ClipToBounds=False explained here

来源：https://stackoverflow.com/questions/62693340/add-custom-rows-at-the-top-of-datagrid-wpf

标签

wpf

xaml