none
WPF实现一个横着的DataGrid RRS feed

  • 问题

  • 目前参考该链接wpf-horizontal-datagrid

    通过旋转90度的方式实现了功能,但是存在着一些问题。

    代码如下:

    <DataGrid.LayoutTransform>
    	<TransformGroup>
    		<RotateTransform Angle="90"/>
    		<MatrixTransform Matrix="-1,0,0,1,0,0"/>
    	</TransformGroup>
    </DataGrid.LayoutTransform>
    
    <Style TargetType="{x:Type DataGridRowHeader}" BasedOn="{StaticResource {x:Type DataGridRowHeader}}">
    	<Setter Property="IsEnabled" Value="False"/>
    	<Setter Property="LayoutTransform">
    		<Setter.Value>
    			<TransformGroup>
    				<RotateTransform Angle="-90"/>
    				<ScaleTransform ScaleX="1" ScaleY="-1"/>
    			</TransformGroup>
    		</Setter.Value>
    	</Setter>
    </Style>
    
    <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
    	<Setter Property="IsEnabled" Value="False"/>
    	<Setter Property="LayoutTransform">
    		<Setter.Value>
    			<TransformGroup>
    				<RotateTransform Angle="-90"/>
    				<ScaleTransform ScaleX="1" ScaleY="-1"/>
    			</TransformGroup>
    		</Setter.Value>
    	</Setter>
    </Style>
    
    <Style TargetType="DataGridCell">
    	<Setter Property="LayoutTransform">
    		<Setter.Value>
    			<TransformGroup>
    				<RotateTransform Angle="-90"/>
    				<ScaleTransform ScaleX="1" ScaleY="-1"/>
    			</TransformGroup>
    		</Setter.Value>
    	</Setter>
    </Style>

    当我拖动滚动条时,标题出现了先上下再左右裁剪的变化。如下图所示:

    请问是我的旋转代码有问题,还是说我整个的思路就是错的,谢谢了

    2019年5月5日 9:45

答案

  • 我参照你的代码并稍微改动了一下

    将datagrid放入scrollview容器中 效果还算是可以

    如果不放入其中,在datagrid很小的情况下,确实有类似的效果,不过应该属于正常的情况,毕竟设计当初在虚拟化时考虑的只有垂直滚动吧。



      <Window.Resources>
            <Style TargetType="DataGridRow" >
                <Setter Property="Height" Value="40" />
            </Style>
            <Style TargetType="DataGridCell">
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                            <RotateTransform Angle="90"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="DataGridColumnHeader">
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <RotateTransform Angle="-90"/>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid  >
            <ScrollViewer>
                <DataGrid ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"  HeadersVisibility="Column" x:Name="DG"   >
                    <DataGrid.LayoutTransform>
                        <TransformGroup>
                            <RotateTransform Angle="-90"/>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                        </TransformGroup>
                    </DataGrid.LayoutTransform>
                </DataGrid>
            </ScrollViewer>      
        </Grid>






    • 已标记为答案 shared_ptr 2019年5月6日 7:02
    2019年5月5日 11:22
  • Hello,

     正如ARM830所说的那样, 可能是由于DataGrid的虚拟化导致的这个问题, 你也可以尝试的禁用DataGrid的虚拟化来试一下。

    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding datas}" VirtualizingPanel.IsVirtualizing="False">
                <DataGrid.LayoutTransform>
                    <TransformGroup>
                        <RotateTransform Angle="90" />
                        <MatrixTransform Matrix="-1,0,0,1,0,0" />
                    </TransformGroup>
                </DataGrid.LayoutTransform>
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Id}" Header="Id" />
                    <DataGridTextColumn Binding="{Binding Column1}" Header="Column1" />
                </DataGrid.Columns>
            </DataGrid>

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2019年5月6日 1:34
    版主

全部回复

  • 我参照你的代码并稍微改动了一下

    将datagrid放入scrollview容器中 效果还算是可以

    如果不放入其中,在datagrid很小的情况下,确实有类似的效果,不过应该属于正常的情况,毕竟设计当初在虚拟化时考虑的只有垂直滚动吧。



      <Window.Resources>
            <Style TargetType="DataGridRow" >
                <Setter Property="Height" Value="40" />
            </Style>
            <Style TargetType="DataGridCell">
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                            <RotateTransform Angle="90"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="DataGridColumnHeader">
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <RotateTransform Angle="-90"/>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid  >
            <ScrollViewer>
                <DataGrid ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"  HeadersVisibility="Column" x:Name="DG"   >
                    <DataGrid.LayoutTransform>
                        <TransformGroup>
                            <RotateTransform Angle="-90"/>
                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                        </TransformGroup>
                    </DataGrid.LayoutTransform>
                </DataGrid>
            </ScrollViewer>      
        </Grid>






    • 已标记为答案 shared_ptr 2019年5月6日 7:02
    2019年5月5日 11:22
  • Hello,

     正如ARM830所说的那样, 可能是由于DataGrid的虚拟化导致的这个问题, 你也可以尝试的禁用DataGrid的虚拟化来试一下。

    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding datas}" VirtualizingPanel.IsVirtualizing="False">
                <DataGrid.LayoutTransform>
                    <TransformGroup>
                        <RotateTransform Angle="90" />
                        <MatrixTransform Matrix="-1,0,0,1,0,0" />
                    </TransformGroup>
                </DataGrid.LayoutTransform>
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Id}" Header="Id" />
                    <DataGridTextColumn Binding="{Binding Column1}" Header="Column1" />
                </DataGrid.Columns>
            </DataGrid>

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2019年5月6日 1:34
    版主
  • 非常的感谢你。

    的确如你所说的那样,而且这么改还能有一个意外收获,就是左右拉动滚动条不会卡了,之前就算有50条数据也卡的不要不要的。这么改动之后唯一的缺点就是第一次打开时间有点长,应该是不开虚拟化导致的吧,应该是避免不了了。

    2019年5月6日 6:57
  • 非常的感谢你,我用ARM830那种做法不仅解决了该问题,而且左右拉动滚动条也不会卡了,但是第一次打开时间有点长。通过这两个现象来看确实是你们所说的虚拟化的问题,但是我加上VirtualizingPanel.IsVirtualizing="False"却不能解决问题,我这水平看来是想不明白了。。。
    2019年5月6日 7:01
  • 大神,我每一列有32行,如果达到500列,Release下第一次从tab页打开需要20多秒,占用700多M,麻烦问一下还有没有别的方法解决一下,这是不是遇到了鱼与熊掌的问题了。。。
    2019年5月6日 7:15
  • 问题解决了,带来了首次打开太慢,占用内存过大的问题,不知道版主大大有方法解决吗。或者说有没有更好的方法实在这种横向的DataGrid
    2019年5月6日 7:37