WPF中DataGrid的多级列标题

WPF中DataGrid的多级列标题

本文介绍了WPF中DataGrid的多级列标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 DataGrid ,需要看起来像这样:

I have a DataGrid which needs to look like this:

我们可以看到,有多列以及多-level列头,
,它们包含值
,我需要在wpf中执行此操作,所以请只提供相关的xaml代码
,它将创建多级列标题以及包含价值观。

As we can see, there are multiple columns as well as multi-level columns header,and they contains valuesand i need to do this in wpf, so kindly provide only the relevant xaml code,which will create multi level column header as well as contain values.

提前感谢

推荐答案

据我所知,标准的 DataGrid 不支持它,因此您需要寻找替代方案。我可以提供使用 Grid 功能,例如:,。为了说明这个功能,我创建了一个需要完成的示例:

As far as I know, the standard DataGrid does not support it, so you need to look for alternatives. I can offer the use of a Grid capabilities, such as: Grid.RowDefinitions, Grid.ColumnDefinitions. To illustrate this feature, I created a sample, who need to complete:

<Window x:Class="MultiHeaderDataGrid.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    WindowStartupLocation="CenterScreen">

<Window.Resources>
    <Style TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Bisque" />
        <Setter Property="TextBlock.FontSize" Value="14" />
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Window.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <Border Grid.Column="1" Grid.ColumnSpan="4">
            <TextBlock Text="Main application" TextAlignment="Center" />
        </Border>
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0">
            <TextBlock Grid.Column="1" Text="Experiment 1" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="1">
            <TextBlock Grid.Column="1" Text="Experiment 2" TextAlignment="Center" />
        </Border>
    </Grid>

    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0">
            <TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="1">
            <TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="2">
            <TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="4">
            <TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
        </Border>
    </Grid>

    <Grid Grid.Row="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0">
            <TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="1">
            <TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="2">
            <TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
        </Border>

        <Border Grid.Column="4">
            <TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
        </Border>
    </Grid>

    <DataGrid Name="datagrid1" AutoGenerateColumns="False" Grid.Row="3" RowHeaderWidth="10" Loaded="datagrid1_Loaded">
        <DataGrid.Columns>
            <DataGridTextColumn x:Name="Column1" Binding="{Binding Name}" Header="column 1" Width="100" />
            <DataGridTextColumn x:Name="Column2" Binding="{Binding Age}"  Header="column 2" Width="80" />
            <DataGridTextColumn x:Name="Column3" Binding="{Binding Sample}" Header="column 3" Width="80" />
            <DataGridTextColumn x:Name="Column4" Binding="{Binding Sample}" Header="column 4" Width="*" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>
</Window>

输出

如果需要,您可以设置 Grid ColumnDefinition Width ,如 DataGrid 列:

If you want, you can set the ColumnDefinition Width of a Grid, like a DataGrid column:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding ElementName=SampleDataGrid, Path=RowHeaderWidth}" />
    <ColumnDefinition Width="{Binding ElementName=Column1, Path=ActualWidth}" />
    <ColumnDefinition Width="{Binding ElementName=Column2, Path=ActualWidth}" />
</Grid.ColumnDefinitions>

此外,您需要定义相同的 Style Grid 头和 DataGrid

Also, you need to define the same Style for the Grid header and DataGrid.

这篇关于WPF中DataGrid的多级列标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 19:13