如何实现滚动内容但静态轴(如excel)

时间:2014-08-11 12:40:45

标签: wpf xaml itemscontrol

这对我来说很难搜索,而且更容易说明,这就是我想要实现的目标:

enter image description here

我有一个列表(Y轴)列表中的每个项目都包含一个列表项属性(X轴),我想要内容上的滚动条并保持标题固定。到目前为止,我已经垂直尝试了Items控件,每行的模板都包含一个水平项目控件,当然这不会给我带静态标题,但我会用虚拟模型或其他东西来破解它。

任何人都可以告诉我,实现这一目标的最佳方法是使用现有控件。我遇到的问题是它是动态行和列。

这是当前嵌入式xaml无法实现我想要的目标:

<ItemsControl ItemsSource="{Binding Path=Items}">
            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Path=Description}"
                                   Width="150" />
                            <ItemsControl ItemsSource="{Binding Path=Weeks}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"></StackPanel>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <CheckBox Width="30" IsChecked="{Binding Path=IsSelected}"></CheckBox>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

2 个答案:

答案 0 :(得分:1)

我认为您可能只是在寻找DataGrid

如果没有,你可能只需要进行一些开发。

尝试将标头放在ScrollViewer中,并将其偏移属性绑定到内容的ScrollViewer。您可能无法简单地对它们进行数据绑定,因此您可能需要在后面的代码中执行此操作。

查看Grid.IsSharedSizeScope属性和SharedSizeGroup。这可能不是那么重要,因为所有列和行看起来都是相同的宽度和高度。

答案 1 :(得分:1)

我尝试了一个简单的解决方案,这是一个示例

<DataGrid FrozenColumnCount="1"
          HorizontalGridLinesBrush="{x:Null}"
          VerticalGridLinesBrush="{x:Null}"
          RowHeaderWidth="0">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background"
                    Value="White" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn IsReadOnly="True"
                            Binding="{Binding}" />
        <DataGridCheckBoxColumn Header="1" />
        <DataGridCheckBoxColumn Header="2" />
        <DataGridCheckBoxColumn Header="3" />
        <DataGridCheckBoxColumn Header="4" />
        <DataGridCheckBoxColumn Header="5" />
        <DataGridCheckBoxColumn Header="6" />
        <DataGridCheckBoxColumn Header="7" />
        <DataGridCheckBoxColumn Header="8" />
        <DataGridCheckBoxColumn Header="9" />
        <DataGridCheckBoxColumn Header="10" />
        <DataGridCheckBoxColumn Header="11" />
        <DataGridCheckBoxColumn Header="12" />
        <DataGridCheckBoxColumn Header="13" />
        <DataGridCheckBoxColumn Header="14" />
        <DataGridCheckBoxColumn Header="15" />
        <DataGridCheckBoxColumn Header="16" />
        <DataGridCheckBoxColumn Header="17" />
        <DataGridCheckBoxColumn Header="18" />
        <DataGridCheckBoxColumn Header="19" />
        <DataGridCheckBoxColumn Header="20" />
    </DataGrid.Columns>
    <sys:String>A</sys:String>
    <sys:String>B</sys:String>
    <sys:String>C</sys:String>
    <sys:String>D</sys:String>
    <sys:String>E</sys:String>
    <sys:String>F</sys:String>
    <sys:String>G</sys:String>
    <sys:String>H</sys:String>
    <sys:String>I</sys:String>
    <sys:String>J</sys:String>
    <sys:String>K</sys:String>
    <sys:String>AA</sys:String>
    <sys:String>AB</sys:String>
    <sys:String>AC</sys:String>
    <sys:String>AD</sys:String>
    <sys:String>AE</sys:String>
    <sys:String>AF</sys:String>
    <sys:String>AG</sys:String>
    <sys:String>AH</sys:String>
    <sys:String>AI</sys:String>
    <sys:String>AJ</sys:String>
    <sys:String>AK</sys:String>
</DataGrid>

结果

result

如果您对左上角的常规数据网格标记没问题,这里是一个没有冻结列的解决方案

<DataGrid HorizontalGridLinesBrush="{x:Null}"
          VerticalGridLinesBrush="{x:Null}">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background"
                    Value="White" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.RowHeaderStyle>
        <Style TargetType="DataGridRowHeader">
            <Setter Property="Background"
                    Value="White" />
            <Setter Property="Content"
                    Value="{Binding}" />
        </Style>
    </DataGrid.RowHeaderStyle>
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Header="1" />
        <DataGridCheckBoxColumn Header="2" />
        <DataGridCheckBoxColumn Header="3" />
        <DataGridCheckBoxColumn Header="4" />
        <DataGridCheckBoxColumn Header="5" />
        <DataGridCheckBoxColumn Header="6" />
        <DataGridCheckBoxColumn Header="7" />
        <DataGridCheckBoxColumn Header="8" />
        <DataGridCheckBoxColumn Header="9" />
        <DataGridCheckBoxColumn Header="10" />
        <DataGridCheckBoxColumn Header="11" />
        <DataGridCheckBoxColumn Header="12" />
        <DataGridCheckBoxColumn Header="13" />
        <DataGridCheckBoxColumn Header="14" />
        <DataGridCheckBoxColumn Header="15" />
        <DataGridCheckBoxColumn Header="16" />
        <DataGridCheckBoxColumn Header="17" />
        <DataGridCheckBoxColumn Header="18" />
        <DataGridCheckBoxColumn Header="19" />
        <DataGridCheckBoxColumn Header="20" />
    </DataGrid.Columns>
    <sys:String>A</sys:String>
    <sys:String>B</sys:String>
    <sys:String>C</sys:String>
    <sys:String>D</sys:String>
    <sys:String>E</sys:String>
    <sys:String>F</sys:String>
    <sys:String>G</sys:String>
    <sys:String>H</sys:String>
    <sys:String>I</sys:String>
    <sys:String>J</sys:String>
    <sys:String>K</sys:String>
    <sys:String>AA</sys:String>
    <sys:String>AB</sys:String>
    <sys:String>AC</sys:String>
    <sys:String>AD</sys:String>
    <sys:String>AE</sys:String>
    <sys:String>AF</sys:String>
    <sys:String>AG</sys:String>
    <sys:String>AH</sys:String>
    <sys:String>AI</sys:String>
    <sys:String>AJ</sys:String>
    <sys:String>AK</sys:String>
</DataGrid>