代码之家  ›  专栏  ›  技术社区  ›  Philipp Schmid

WPF工具包DataGrid:如何使ColumnHeader宽度与GridColumn宽度相同

  •  4
  • Philipp Schmid  · 技术社区  · 16 年前

    对于我的WPF Toolkit DataGrid,我使用以下自定义列标题样式:

    <Style x:Name="ColumnStyle" x:Key="ColumnHeaderStyle" TargetType="my:DataGridColumnHeader">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Background="LightYellow">
                        <TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" TextAlignment="Left" Background="LightGreen" />
                        <TextBlock Text="{Binding Data}" HorizontalAlignment="Stretch" TextAlignment="Right" Background="LightBlue" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

    标头的DataContext在代码中设置,并且使用DataGrid的初始宽度正确显示名称和数据字符串属性,如下所示:

    ---------------
    |Name         |
    |         Data|
    ---------------
    

    但是,当我调整列的大小时,标题显示不会回流,而是保持不变:

    --------------------
    |Name              |
    |         Data     |
    --------------------
    

    正如我所预料的那样:

    --------------------
    |Name              |
    |              Data|
    --------------------
    

    我需要做些什么才能获得上述所需的行为?

    类似地,标题内容似乎也不会在垂直方向上拉伸。

    添加

        <Setter Property="VerticalAlignment">
            <Setter.Value>Bottom</Setter.Value>
        </Setter>
    

    对样式而言,标题与底部似乎正确对齐。不幸的是,将时尚中的HorizontalAlignment属性设置为“Stretch”似乎并不能满足我的要求。

    下面是演示该行为的代码片段。

    Window1.xaml:

    <Window x:Class="GridTest.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
        <Window.Resources>
            <Style x:Name="ColumnStyle" x:Key="ColumnHeaderStyle" TargetType="my:DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <DockPanel>
                                <TextBlock DockPanel.Dock="Left" Text="{Binding Name}" />
                                <TextBlock DockPanel.Dock="Right" Text="{Binding Data}" />
                            </DockPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
            <Style x:Name="RowHeaderStyle" x:Key="RowHeaderStyle" TargetType="my:DataGridRowHeader">
                <Setter Property="Content" Value="{Binding}" />
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Path=Content.Name, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type my:DataGridRowHeader}}}" 
                                           VerticalAlignment="Center"/>
                                <TextBlock Padding="5">|</TextBlock>
                                <TextBlock Text="{Binding Path=Content.Data, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type my:DataGridRowHeader}}}"
                                           VerticalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <my:DataGrid Name="dg" 
                         ColumnHeaderStyle="{StaticResource ColumnHeaderStyle}"
                         RowHeaderStyle="{StaticResource RowHeaderStyle}"
                         HeadersVisibility="All">
            </my:DataGrid>
        </Grid>
    </Window>
    

    以及Window1.xaml.cs中的代码

    using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Data;
    using Microsoft.Windows.Controls;
    using SLModel;
    
    namespace GridTest
    {
        /// <summary>
        /// Interaction logic for Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
    
                this.Loaded += new RoutedEventHandler(Window1_Loaded);
            }
    
            void Window1_Loaded(object sender, RoutedEventArgs e)
            {
                Inputs = new List<Input>();
                Outputs = new List<Output>();
    
                Input i1 = new Input() { Name = "I 1", Data = "data 1" };
                Input i2 = new Input() { Name = "I 2", Data = "data 2" };
                Input i3 = new Input() { Name = "I 3", Data = "data 3" };
    
    
                Inputs.Add(i1); Inputs.Add(i2);
    
                Output o1 = new Output() { Name = "O 1", Data = "data 1" };
                Output o2 = new Output() { Name = "O 2", Data = "data 2" };
                Output o3 = new Output() { Name = "O 3", Data = "data 3" };
    
                Outputs.Add(o1); Outputs.Add(o2); Outputs.Add(o3);
    
                Relationship r1 = new Relationship() { Formula = "F1" };
                Relationship r2 = new Relationship() { Formula = "F2" };
                Relationship r3 = new Relationship() { Formula = "F3" };
                Relationship r4 = new Relationship() { Formula = "F4" };
                Relationship r5 = new Relationship() { Formula = "F5" };
                Relationship r6 = new Relationship() { Formula = "F6" };
    
    
                i1.Relationships.Add(r1);
                i1.Relationships.Add(r2);
                i2.Relationships.Add(r3);
                i2.Relationships.Add(r4);
                i3.Relationships.Add(r5);
                i3.Relationships.Add(r6);
    
                CreateColumn(o1, 0);
                CreateColumn(o2, 1);
                CreateColumn(o3, 2);
    
                dg.Items.Add(i1);
                dg.Items.Add(i2);
                dg.Items.Add(i3);
                dg.ColumnWidth = DataGridLength.SizeToHeader;
            }
    
            private void CreateColumn(Output output, int index)
            {
                Binding textBinding = new Binding();
                textBinding.Path = new PropertyPath(string.Format("Relationships[{0}].Formula", index));
                textBinding.Mode = BindingMode.TwoWay;
    
                DataGridTextColumn tc = new DataGridTextColumn();
                tc.Binding = textBinding;
                dg.Columns.Add(tc);
                tc.Header = output;
            }
    
            private List<Output> Outputs { get; set; }
            private List<Input> Inputs { get; set; }
        }
    }
    

    使用简单的类输入、输出和关系,例如:

    { 公共投入() { }

    public string Name { get; set; }
    public string Data { get; set; }
    
    public ObservableCollection<Relationship> Relationships { get; set; }
    

    }

    { 公共输出(){}

    public string Name { get; set; }
    public string Data { get; set; }
    

    }

    公共阶级关系 公共字符串公式{get;集合;}

    复制步骤:

    1. 启动应用程序

    2. 通过向右拖动列分隔符使第一列变宽

    3 回复  |  直到 16 年前
        1
  •  4
  •   devuxer    16 年前

    我建议换你的 StackPanel Grid :

    <Style x:Name="ColumnStyle" x:Key="ColumnHeaderStyle" TargetType="my:DataGridColumnHeader">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" Background="LightGreen" />
                        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Data}" Background="LightBlue" />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

    如果不起作用,您可能需要编辑 ControlTemplate 对于 DataGridColumnHeader ContentPresenter 网格 StackPanels 即使你告诉他们也不要伸展,所以一定要尝试伸展 网格 在你的 DataTemplate

    更新(固定)

    好吧,我查到了默认值 控件模板 对于 . 结果是 做 网格 认为 这就是问题所在。

    关键可能是 :

    <ContentPresenter
        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
    

    HorizontalContentAlignment="Stretch" 在你的 DataGridColumnHeader

        2
  •  3
  •   user690074    15 年前

    使用WPF4DataGrid,但也有同样的问题,只需在DataGridColumnHeader样式中设置HorizontalContentAlignment,我就解决了这个问题(这要归功于上面提出这个问题的DanM)。。。

    <Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
    
        3
  •  0
  •   Aran Mulholland JohnnyAce    16 年前

    改用坞面板

    <DockPanel Background="LightYellow">
       <TextBlock DockPanel.Dock="Left" Text="{Binding Name}" TextAlignment="Left" Background="LightGreen" />
       <TextBlock DockPanel.Dock="Right" Text="{Binding Data}" HorizontalAlignment="Right" TextAlignment="Right" Background="LightBlue" />
    </DockPanel >