水平方向のWPFDataGridが欲しいのですが、解決策を知っている人はいますか?
DataGrid
と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>
また、列が生成されると、位置が逆になり、TextBlockとTextBoxが回転します(これは、配置やぼかしなどの点で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);
}
}
私はここで本当に巨人の肩の上に立っています:-)しかし、私には追加の機能強化があります。
@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>
以前のソリューションを少し簡略化しました。スクロールビューアを追加した黒魔術は好きではないので、使用しません。しかし、代わりに私は追加のスケール変換を使用します。
<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>
事前定義された列のリストの場合、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>
これにより、コードビハインドを完全に回避できます。
このアプローチは非常に便利だと思いましたが、回転とミラーリングを行いました。
TransformGroup transformGroup = new TransformGroup();
transformGroup.Children.Add(new RotateTransform(90));
transformGroup.Children.Add(new MatrixTransform(-1, 0, 0, 1, 0, 0));
または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>
ミラーリングを使用することにより、列リストの上部ではなく下部にフィールドがあります。