Question

我正在尝试像这个图像一样实现DataGrid标头：

如何完成这种布局？

Answer 1

我总是更喜欢这种方法，它在DataGrids中使用DataGrid。

XAML

<Window x:Class="WpfStackOverflow.Window8"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window8" Height="300" Width="300">
    <Grid>
        <DataGrid Loaded="Dgrd_Loaded_1" CanUserAddRows="False" CanUserResizeRows="False" VerticalGridLinesBrush="Transparent" HorizontalGridLinesBrush="Transparent" x:Name="Dgrd" ItemsSource="{Binding .}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid BorderThickness="1" HorizontalScrollBarVisibility="Auto" VerticalGridLinesBrush="Transparent" HeadersVisibility="Column" AutoGenerateColumns="False" ItemsSource="{Binding SupplierIDCol}">                               
                                <DataGrid.Columns>
                                    <DataGridTextColumn Header="Supplier ID" Binding="{Binding SupplierID}" MinWidth="100" Width="*"/>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn MinWidth="300" Width="*">
                    <DataGridTemplateColumn.Header>
                        <Grid>
                            <TextBlock Text="Product Details" HorizontalAlignment="Center" />
                        </Grid>
                    </DataGridTemplateColumn.Header>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid BorderThickness="1" HorizontalScrollBarVisibility="Auto" AutoGenerateColumns="False" MinWidth="300" ItemsSource="{Binding SupplierIDCol}" HorizontalContentAlignment="Stretch" HeadersVisibility="Column">
                                <DataGrid.CellStyle>
                                    <Style TargetType="DataGridCell">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="3">
                                                <Setter Property="BorderThickness" Value="0"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </DataGrid.CellStyle>
                                <DataGrid.Columns>
                                    <DataGridTextColumn Header="ProductID" Binding="{Binding ProductID}"/>
                                    <DataGridTextColumn Header="ProductName" Binding="{Binding ProductName}"/>
                                    <DataGridTextColumn Header="QuantityPerUnit" Binding="{Binding QuantityPerUnit}"/>
                                    <DataGridTextColumn Header="Price" Binding="{Binding Price}"  MinWidth="75" Width="*"/>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn MinWidth="100" Width="*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid BorderThickness="1" VerticalGridLinesBrush="Transparent" HeadersVisibility="Column" AutoGenerateColumns="False" ItemsSource="{Binding SupplierIDCol}">
                                <DataGrid.Columns>
                                    <DataGridTextColumn  Header="Units In Stock" Binding="{Binding UnitsInStocks}" MinWidth="100" Width="*"/>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

CODE

using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace WpfStackOverflow
{
    /// <summary>
    /// Interaction logic for Window8.xaml
    /// </summary>
    public partial class Window8 : Window
    {
        public Window8()
        {
            InitializeComponent();

            var records = new[] { 
                new { SupplierID = 123, ProductID = 12, ProductName = "ProductName1", QuantityPerUnit = 45, Price = 451, UnitsInStocks = 123 },
                new { SupplierID = 123, ProductID = 12, ProductName = "ProductName1", QuantityPerUnit = 45, Price = 451, UnitsInStocks = 123 },
                new { SupplierID = 123, ProductID = 12, ProductName = "ProductName1", QuantityPerUnit = 45, Price = 451, UnitsInStocks = 123 },
                new { SupplierID = 123, ProductID = 12, ProductName = "ProductName1", QuantityPerUnit = 45, Price = 451, UnitsInStocks = 123 },
                new { SupplierID = 123, ProductID = 12, ProductName = "ProductName1", QuantityPerUnit = 45, Price = 451, UnitsInStocks = 123 }
            }.ToList();

            this.DataContext = new[] { new { SupplierIDCol = records } }.ToList();
        }

        private void Dgrd_Loaded_1(object sender, RoutedEventArgs e)
        {
            DataGrid dgrid = sender as DataGrid;
            DataGridColumn col = dgrid.Columns[1];
            Grid header = col.Header as Grid;

            DataGridRow row = dgrid.ItemContainerGenerator.ContainerFromIndex(0) as DataGridRow;

            ContentPresenter cp = col.GetCellContent(row) as ContentPresenter;
            header.Width = cp.ActualWidth;
        }
    }
}

如何自定义DataGrid Headers类似于这个图像？

1 个答案: