如何在WPF DataGrid中组合多个标题

Question

我想将这两列“Stakes”和“Game”合并成一列。

我想使用wpf datagrid将两列合并为一列。

我的DataGrid如下。![enter image description here][2] ![enter image description here][3]

                <DataGrid.CellStyle>
                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Margin" Value="10,0,0,0" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
                    </Style>
                </DataGrid.CellStyle>
                <DataGrid.RowStyle>
                    <Style TargetType="{x:Type DataGridRow}">
                        <Setter Property="FontSize" Value="12"/>
                        <Setter Property="FontFamily" Value="Arial"/>
                        <Setter Property="Foreground" Value="#404040"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="DataContext">
                            <Setter.Value>
                                <TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
                                    </TextBlock.Effect>
                                </TextBlock>
                            </Setter.Value>
                        </Setter>

                    </Style>
                </DataGrid.RowStyle>
                <DataGrid.RowBackground >
                    <ImageBrush ImageSource="/ClientApplication;component/Images/second_row_bg.png"/>
                </DataGrid.RowBackground>
                <DataGrid.AlternatingRowBackground>
                    <ImageBrush ImageSource="/ClientApplication;component/Images/bonus_progress_bg.png"/>
                </DataGrid.AlternatingRowBackground>



                <DataGrid.ColumnHeaderStyle>
                    <Style TargetType="{x:Type DataGridColumnHeader}">



                        <Setter Property="VerticalContentAlignment" Value="Center" />
                        <Setter Property="ContentTemplate" >
                            <Setter.Value>
                                <DataTemplate>

                                        <TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}">
                                        <TextBlock.Effect>
                                            <DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
                                        </TextBlock.Effect>
                                    </TextBlock>

                                </DataTemplate>
                            </Setter.Value>
                        </Setter>

                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="/ClientApplication;component/Images/table_bg_header.png"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush">
                            <Setter.Value>
                                <ImageBrush   ImageSource="/ClientApplication;component/Images/titel_bg.png"/>
                            </Setter.Value>
                        </Setter>

                        <Setter Property="Foreground" Value="#404040" />
                        <Setter Property="BorderThickness" Value="0, 0, 1, 0"/>
                        <Setter Property="Height" Value="26" />
                        <Setter Property="FontSize" Value="14"/>
                        <Setter Property="FontFamily" Value="Arial"/>







                    </Style>
                </DataGrid.ColumnHeaderStyle>



                <DataGrid.Columns>


                    <DataGridTextColumn  Width="125" Header="Table" Binding="{Binding Path=Table}">

                    </DataGridTextColumn>





                    <DataGridTextColumn  Width="102"   Header="Stakes" Binding="{Binding Path=Stakes}"  />
                    <DataGridTextColumn  Width="95" Header="Game" Binding="{Binding Path=Game}" />
                    <DataGridTextColumn  Width="87" Header="Type" Binding="{Binding Path=Type}" />
                    <DataGridTextColumn  Width="83" Header="Players" Binding="{Binding Path=Players}"  />
                    <DataGridTextColumn  Width="117" Header="Average Pot" Binding="{Binding Path=Average}"   />
                    <DataGridTextColumn  Width="65" Header="H/Hr" Binding="{Binding Path=hhr}"  />
                </DataGrid.Columns>



            </DataGrid>

请在此留下重要评论。 感谢您的帮助。

- ujjaval

---

为什么不创建一个单列，它具有两个列的数据模板？ - D J

请问您能告诉我如何做吗？ - ujjaval

Answer 1

如果您可以接受只读模式，那么简单的方法是再绑定一个属性 - StakesAndGame:

public string StakesAndGame
{
   get { return string.Format("{0}   {1}", Stakes, Game); }
}

只需添加使用它的列：

<DataGridTextColumn  Width="102" Header="Stakes" Binding="{Binding StakesAndGame}"  />

当Stakes或Game改变时，不要忘记为该属性调用OnPropertyChanged。或者您可以编写一个值转换器，并将两列与其组合在一起，但与前面的方法相比，它需要更多的编码。

如果您需要使它们可写，则会更加困难，我真的不建议这种方法。但是，如果您无论如何都需要它，那么您可以像这个答案中所示，尝试使用DataGridTemplateColumn。

- icebat

Answer 2

您可以使用 DataGridTemplateColumn 来实现您想要的功能：

<DataGridTemplateColumn Header="Stakes">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Stakes}" />
                <TextBlock Text="{Binding Path=Game}" />
            </StackPanel>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

- Eirik