WPF中DataGrid的多级列标题

plupiseo  于 2023-02-25  发布在  其他
关注(0)|答案(3)|浏览(300)

我有一个DataGrid，它需要看起来像这样：

如您所见，有多个列和多级列标题，有些标题跨越多个列。
我需要在WPF中这样做，所以请只提供将创建多级列标题的XAML解决方案。

wpf

3条答案

按热度按时间
hfyxw5xn

hfyxw5xn1#

据我所知，标准的DataGrid并不支持它，所以你需要寻找替代品。我可以提供使用Grid的功能，例如：Grid.RowDefinitions，Grid.ColumnDefinitions .为了说明这个功能，我创建了一个示例，需要谁完成：

<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>

Output

如果需要，可以设置Grid的ColumnDefinition Width，如DataGrid列：

<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>

此外，您需要为Grid头文件和DataGrid定义相同的Style。

赞(0）分享  回复(0）举报  2023-02-25
smdnsysy

smdnsysy2#

<DataGrid>
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="400">
                                        <DataGridTemplateColumn.Header>
                                            <StackPanel Width="400" HorizontalAlignment="Center">
                                                <Label HorizontalContentAlignment="Center" FontWeight="Bold">EXPERIMENT 1</Label>
                                                <Line Stroke="Black"
                                                      X1="0"
                                                      X2="400"
                                                      Y1="0"
                                                      Y2="0" />
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <Label Width="200" HorizontalContentAlignment="Center">MODE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="200" HorizontalContentAlignment="Center">MODE 2</Label>
                                                </StackPanel>
                                                <Line Stroke="Black"
                                                      X1="0"
                                                      X2="400"
                                                      Y1="0"
                                                      Y2="0" />
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
                                                </StackPanel>
                                            </StackPanel>
                                        </DataGridTemplateColumn.Header>
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="400">
                                        <DataGridTemplateColumn.Header>
                                            <StackPanel Width="400" HorizontalAlignment="Center">
                                                <Label HorizontalContentAlignment="Center" FontWeight="Bold">EXPERIMENT 2</Label>
                                                <Line Stroke="Black"
                                                      X1="0"
                                                      X2="400"
                                                      Y1="0"
                                                      Y2="0" />
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <Label Width="200" HorizontalContentAlignment="Center">MODE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="200" HorizontalContentAlignment="Center">MODE 2</Label>
                                                </StackPanel>
                                                <Line Stroke="Black"
                                                      X1="0"
                                                      X2="400"
                                                      Y1="0"
                                                      Y2="0" />
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
                                                    <Line Stroke="Black"
                                                          X1="1"
                                                          X2="1"
                                                          Y1="0"
                                                          Y2="26" />
                                                    <Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
                                                </StackPanel>
                                            </StackPanel>
                                        </DataGridTemplateColumn.Header>
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Width="400" Orientation="Horizontal">
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                    <ComboBox Width="100" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
赞(0）分享  回复(0）举报  2023-02-25
wgxvkvu9

wgxvkvu93#

重写DataGridColumnHeadersPresenter模板。
这将创建具有正常行为的标题行，即它们随数据网格水平滚动，但在垂直滚动时保持固定。

<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                        <Grid Background="Red">
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.ColumnSpan="4" Text="MAIN APPLICATION"></TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="Experiment 1"></TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Text="Experiment 2"></TextBlock>
                            <DataGridColumnHeader x:Name="PART_FillerColumnHeader" 
                                                  Grid.Row="2" Grid.ColumnSpan="4"
                                IsHitTestVisible="False" />
                            <ItemsPresenter Grid.Row="2" Grid.ColumnSpan="4" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
赞(0）分享  回复(0）举报  2023-02-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com