c# - WPF C#、マルチレベル ヘッダーを持つデータグリッド

Question

良い一日。

このスクリーンショットのようなデータグリッドを作成する必要があります

同様の方法を指示するコードをいくつか見つけましたが、実装に少し迷っています。

ここに私が編集しようとしているコードがあります

<DataGrid ItemsSource="{Binding }" Name="dataGrid1" AutoGenerateColumns="False" 
                          ColumnHeaderHeight="50" >
                <DataGrid.Resources>

                    <Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="VerticalContentAlignment" Value="Center" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                                    <Grid>
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

                </DataGrid.Resources>
                <DataGrid.Columns>
                        <DataGridTextColumn  Header="Main1" Width="60" 
                                            HeaderStyle="{StaticResource DataGridColumnHeader}">
                        <DataGridTextColumn.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock   Width="60"/>

                                    <DataGridColumnHeader Content="Nested1" Width="60"/>
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTextColumn.HeaderTemplate>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Nested2" Width="60"
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                        <DataGridTextColumn.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock FontWeight="Bold" Text="Main1"/>

                                    <DataGridColumnHeader Content="Nested2" Width="60" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTextColumn.HeaderTemplate>
                    </DataGridTextColumn>
                    <DataGridTextColumn Width="60"
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                        <DataGridTextColumn.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock />

                                    <DataGridColumnHeader Content="Nested3" Width="60"/>
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTextColumn.HeaderTemplate>
                    </DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>

私はこれにコードを編集しました

   <DataGrid Grid.Column="2" 
                  Grid.Row="1" Grid.RowSpan="2"
                  Height="100"
                  x:Name="assetListGrid"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Top"
                          Margin="10 10 20 20" 
                          Background="{StaticResource ForegroundLightBrush}"
                          LoadingRow="AddIndexNumberWhenLoadingRow" 
                          BorderThickness="1"
                                 VerticalScrollBarVisibility="Auto"
                          AutoGenerateColumns="False"
                          ItemsSource="{Binding AssetList, Mode=TwoWay}" 
                          >

            <DataGrid.Resources>

                <Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="Background" Value="{StaticResource WordBlueBrush}" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                                <Grid Background="{StaticResource WordBlueBrush}">
                                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

            </DataGrid.Resources>

            <DataGrid.Columns>
                <DataGridTextColumn  Header="Asset" 
                                            HeaderStyle="{StaticResource DataGridColumnHeader}">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock  FontSize="{StaticResource FontSizeLarge}"
                                            FontFamily="{StaticResource LatoBold}"
                                            />

                                <DataGridColumnHeader Content="Asset Number"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>


                <DataGridTextColumn Header="Name" 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock  FontSize="{StaticResource FontSizeLarge}"
                                            FontFamily="{StaticResource LatoBold}" Text="Asset"/>

                                <DataGridColumnHeader  Content="Name"  />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>

                <DataGridTextColumn 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock />

                                <DataGridColumnHeader Content="Role" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>

                <DataGridTextColumn 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock />

                                <DataGridColumnHeader Content="Comment" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>

                <DataGridTextColumn 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock />

                                <DataGridColumnHeader Content="Creation TimeStamp" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
            </DataGrid.Columns>

            <DataGridTextColumn 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock />

                            <DataGridColumnHeader Content="Location" />
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>

            <DataGridTextColumn 
                                             HeaderStyle="{StaticResource DataGridColumnHeader}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock />
                            <DataGridColumnHeader Content="Value" />
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>



        </DataGrid>

そして、これが結果です

次の一番上の列 (製造元とそのサブ列) を追加する方法がわかりません。「資産」のサブ列はギグザウのように見え、それらを均等にする方法がわかりません。すべての列ヘッダーに同じ高さを追加しようとしましたが、役に立ちませんでした。

さらに、セル テンプレートを変更してビューモデルの特定のプロパティにバインドするのも難しいと感じています。これは、一部のセルにテキスト ボックスとボタンの両方が含まれているためです。

誰か親切に私に方法を教えてくれませんか

1. サブカラム ヘッダーの高さを揃える
2. 2 番目の上部の列を追加します
3. 1 つの列のセル テンプレートを上書きして、ボタンとテキスト ブロックを含めますか?enter code here