WPF 水平数据网格

WPF horizontal DataGrid

提问by eriksmith200

I would like to have a WPF DataGrid with a horizontal orientation, does anyone know a solution?

我想要一个水平方向的 WPF DataGrid，有人知道解决方案吗？

采纳答案by Fredrik Hedblad

I've done this earlier since we wanted to be able to use the same control for a DataGridand a PropertyGrid. Alot of things have to be changed (like alignment, scrolling, positioning of sort-arrows etc.). There is way to much code to post the whole solution but this should get you started. This is an example with Autogenerated TextColumns but you can easily modify it to use other column types.

我之前已经这样做了，因为我们希望能够对 aDataGrid和 a使用相同的控件PropertyGrid。许多事情必须改变（如对齐、滚动、排序箭头的定位等）。有很多代码可以发布整个解决方案，但这应该可以帮助您入门。这是自动生成的 TextColumns 的示例，但您可以轻松修改它以使用其他列类型。

<ScrollViewer Name="c_dataGridScrollViewer"
              Loaded="c_dataGridScrollViewer_Loaded"
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Auto">
    <DataGrid x:Name="c_dataGrid"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              AutoGeneratedColumns="c_dataGrid_AutoGeneratedColumns"
              HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Hidden">
        <DataGrid.ColumnHeaderStyle>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <RotateTransform Angle="90"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.ColumnHeaderStyle>
        <DataGrid.LayoutTransform>
            <TransformGroup>
                <RotateTransform Angle="-90"/>
            </TransformGroup>
        </DataGrid.LayoutTransform>
    </DataGrid>
</ScrollViewer>

And when the Columns are generated, we reverse their positions and rotates the TextBlocks and TextBoxes (This is better than rotating the DataGridCellin terms of alignment, blur etc.)

当 Columns 生成时，我们反转它们的位置并旋转 TextBlocks 和 TextBoxes（这DataGridCell在对齐、模糊等方面比旋转更好）

private void c_dataGridScrollViewer_Loaded(object sender, RoutedEventArgs e)
{
    // Add MouseWheel support for the datagrid scrollviewer.
    c_dataGrid.AddHandler(MouseWheelEvent, new RoutedEventHandler(DataGridMouseWheelHorizontal), true);
}

private void DataGridMouseWheelHorizontal(object sender, RoutedEventArgs e)
{
    MouseWheelEventArgs eargs = (MouseWheelEventArgs)e;
    double x = (double)eargs.Delta;
    double y = c_dataGridScrollViewer.VerticalOffset;
    c_dataGridScrollViewer.ScrollToVerticalOffset(y - x);
}

private void c_dataGrid_AutoGeneratedColumns(object sender, EventArgs e)
{
    TransformGroup transformGroup = new TransformGroup();
    transformGroup.Children.Add(new RotateTransform(90));
    foreach (DataGridColumn dataGridColumn in c_dataGrid.Columns)
    {
        if (dataGridColumn is DataGridTextColumn)
        {
            DataGridTextColumn dataGridTextColumn = dataGridColumn as DataGridTextColumn;

            Style style = new Style(dataGridTextColumn.ElementStyle.TargetType, dataGridTextColumn.ElementStyle.BasedOn);
            style.Setters.Add(new Setter(TextBlock.MarginProperty, new Thickness(0, 2, 0, 2)));
            style.Setters.Add(new Setter(TextBlock.LayoutTransformProperty, transformGroup));
            style.Setters.Add(new Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center));

            Style editingStyle = new Style(dataGridTextColumn.EditingElementStyle.TargetType, dataGridTextColumn.EditingElementStyle.BasedOn);
            editingStyle.Setters.Add(new Setter(TextBox.MarginProperty, new Thickness(0, 2, 0, 2)));
            editingStyle.Setters.Add(new Setter(TextBox.LayoutTransformProperty, transformGroup));
            editingStyle.Setters.Add(new Setter(TextBox.HorizontalAlignmentProperty, HorizontalAlignment.Center));

            dataGridTextColumn.ElementStyle = style;
            dataGridTextColumn.EditingElementStyle = editingStyle;
        }
    }
    List<DataGridColumn> dataGridColumns = new List<DataGridColumn>();
    foreach (DataGridColumn dataGridColumn in c_dataGrid.Columns)
    {
        dataGridColumns.Add(dataGridColumn);
    }
    c_dataGrid.Columns.Clear();
    dataGridColumns.Reverse();
    foreach (DataGridColumn dataGridColumn in dataGridColumns)
    {
        c_dataGrid.Columns.Add(dataGridColumn);
    }
}

回答by GilShalit

I am truly standing on the shoulders of giants here :-) but, I have an additional enhancement.

我真的站在巨人的肩膀上:-) 但是，我还有一个额外的增强。

@dimaKudr suggested a way to transform predefined columns without code behind, and @FrankE refined the order of the columns. What i am adding is a way to transform, automatically generated columns (AutoGenerateColumns="True"), by using the DataGrid.CellStyletemplate. So the complete (and quite elegant) solution is:

@dimaKudr 提出了一种无需代码即可转换预定义列的方法，@FrankE 改进了列的顺序。我要添加的是一种AutoGenerateColumns="True"使用DataGrid.CellStyle模板转换自动生成的列 ( ) 的方法。所以完整（而且非常优雅）的解决方案是：

<DataGrid ItemsSource="{Binding YourObservableCollection}"
        AutoGenerateColumns="True"
        AutoGeneratingColumn="OnAutoGeneratingColumn">
    <DataGrid.LayoutTransform>
        <TransformGroup>
            <RotateTransform Angle="90"/>
            <MatrixTransform Matrix="-1,0,0,1,0,0"/>
        </TransformGroup>
    </DataGrid.LayoutTransform>
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}"
                BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform Angle="-90"/>
                        <ScaleTransform ScaleX="1" ScaleY="-1" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.CellStyle>
        <Style  TargetType="DataGridCell">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform Angle="-90"/>
                        <ScaleTransform ScaleX="1" ScaleY="-1" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.CellStyle>
</DataGrid>

回答by dimaKudr

I've simplified a little bit previous solution. I do not like black magic with additional scrollviewer, so I do not use it. But instead I use additional scale transformation.

我已经简化了一点以前的解决方案。我不喜欢带有额外滚动查看器的黑魔法，所以我不使用它。但相反，我使用了额外的比例转换。

<DataGrid.LayoutTransform>
    <TransformGroup>
        <RotateTransform Angle="-90"/>
        <ScaleTransform ScaleX="1" ScaleY="-1" />
    </TransformGroup>
</DataGrid.LayoutTransform>

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}"
           BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <TransformGroup>
                    <RotateTransform Angle="-90"/>
                    <ScaleTransform ScaleX="1" ScaleY="-1" />
                </TransformGroup>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

In case of predefined list of colums it is possible to transfom cells content directly in XAML:

对于预定义的列列表，可以直接在 XAML 中转换单元格内容：

<Style x:Key="TextCellStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <TransformGroup>
                <RotateTransform Angle="-90"/>
                <ScaleTransform ScaleX="1" ScaleY="-1" />
            </TransformGroup>
        </Setter.Value>
    </Setter>
</Style>

This allows you completely escape codebehind.

这允许您完全转义代码隐藏。

回答by FrankE

I found this approach very useful, I however did a rotation and a mirroring:

我发现这种方法非常有用，但是我进行了旋转和镜像：

TransformGroup transformGroup = new TransformGroup();
transformGroup.Children.Add(new RotateTransform(90));
transformGroup.Children.Add(new MatrixTransform(-1, 0, 0, 1, 0, 0));

or in Xaml:

或在 Xaml 中：

<!-- we rotate the whole DataGrid by -90 degree and then mirror via y-Axis so that it is docked vertically to the left side-->
<DataGrid.LayoutTransform>
    <TransformGroup>
        <RotateTransform Angle="90"/>
        <MatrixTransform Matrix="-1,0,0,1,0,0"/>
    </TransformGroup>
</DataGrid.LayoutTransform>

By using the mirroring I have the field at the end of the column list at the bottom instead of at the top.

通过使用镜像，我将字段放在底部而不是顶部的列列表末尾。