使用虚拟面板和水平项目控制滚动垂直项目控制，虚拟面板作为行子项 [英] Scrolling vertical Items Control with Virtual Panel and horizontal items control with virtual panel as a row child

问题描述

我写了一个自定义虚拟固定高度自定义面板。 效果很棒！ 但是我的行数很多，包含大量数据。 所以我也必须虚拟化行。 我不确定将水平滚动事件转发到
子虚拟面板的最佳方式。  

父垂直模板

< pre class ="prettyprint">< ItemsControl x：Name =" PART_DataRowItemsControl"
VirtualizingStackPanel.VirtualizationMode =" Recycling"
VirtualizingStackPanel.IsVirtualizing =" True"
ClipToBounds =" True"
ItemsSource =" {TemplateBinding RowData}"
ScrollViewer.CanContentScroll =" True">
< ItemsControl.ItemsPanel>
< ItemsPanelTemplate>
< ganttChart：FixedHeightVirtualItemsPanel
TimeLineIncrementType =" {Binding TimeLineIncrementType}"
StartTime =" {Binding StartTime}"
EndTime =" {Binding EndTime}"
PixelsBetweenTimeIncrements =" {Binding PixelsBetweenTimeIncrements}"
RowHeight =" {Binding DataContext.RowHeight，ElementName = PART_DataRowItemsControl}" />
< / ItemsPanelTemplate>
< /ItemsControl.ItemsPanel>
< ItemsControl.Template>
< ControlTemplate>
< Border BorderThickness =" {TemplateBinding Border.BorderThickness}"
Padding =" {TemplateBinding Control.Padding}"
BorderBrush =" {TemplateBinding Border.BorderBrush}"
Background =" {TemplateBinding Panel.Background}"
SnapsToDevicePixels =" True">
< ScrollViewer Horizo​​ntalScrollBarVisibility =" Auto"
VerticalScrollBarVisibility =" Auto"
Padding =" {TemplateBinding Control.Padding}"
Focusable =" False">
< ItemsPresenter SnapsToDevicePixels =" {TemplateBinding UIElement.SnapsToDevicePixels}" />
< / ScrollViewer>
< / Border>
< / ControlTemplate>
< /ItemsControl.Template>
< / ItemsControl>

水平模板

< ; ganttChart：GanttRowItemDisplay Visibility =" {Binding DisplayDetails，Converter = {StaticResource InvertedBooleanToVisibilityConverter}}" 
 NumRows =" {Binding NumRows}" 
 StartTime =" {Binding StartTime}" 
 EndTime =" {Binding EndTime}" 
 ItemsSource =" {Binding RowItems}"> 
 
< ganttChart：GanttRowItemDisplay.ItemsPanel> 
< ItemsPanelTemplate> 
< ganttChart：GanttRowItemPanel 
 RowHeight =" {Binding RowHeight}" 
 TimeLineIncrementType =" {Binding TimeLineIncrementType}" 
 StartTime =" {Binding StartTime}" 
 EndTime =" {Binding EndTime}" 
 PixelsBetweenTimeIncrements =" {Binding PixelsBetweenTimeIncrements}" /> 
< / ItemsPanelTemplate> 
< / ganttChart：GanttRowItemDisplay.ItemsPanel> 
 
< / ganttChart：GanttRowItemDisplay> 

自定义项控件用于拖放。 垂直也有一个，但我把它作为测试的标准项目控件。  

此控件的上一次迭代没有水平行的虚拟化，所以父级的水平滚动不是问题，但现在由于面板控制滚动我没有办法显示超过视口宽度
而不知道如何告诉子面板可以水平滚动。 我使用从网上某处抓取的行为来实现此目的，以便将行标题保持在单独的位置。项目列控制同步，但模板位于单独的
文件中。 我猜测有一种方法可以从顶部面板中的setHorizo​​ntal偏移处理程序转发滚动事件，但不知道如何做到这一点。 请帮助！

解决方案

在IScrollInfo.SetHorizo​​ntalOffset实现中的父自定义项控件中，我循环访问子项的面板，然后调用SetHorizo​​ntalOffset。 这似乎有效，但希望有一个更好的内置方式来做到这一点。 
希望有人能在自定义控件中获得更好的答案。 实际上我所做的一切都应该是一个内置功能......

I wrote a custom virtual fixed height custom panel.  Works great!  However I have very wide rows with a lot of data.  So I'm having to virtualize the rows as well.  I'm not sure the best way to forward horizontal scroll events to the child virtual panel.  

Parent Vertical template

<ItemsControl x:Name="PART_DataRowItemsControl"
                                                    VirtualizingStackPanel.VirtualizationMode="Recycling"
                                                    VirtualizingStackPanel.IsVirtualizing="True"
                                                    ClipToBounds="True" 
                                                    ItemsSource="{TemplateBinding RowData}"
                                                    ScrollViewer.CanContentScroll="True">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ganttChart:FixedHeightVirtualItemsPanel
                                    TimeLineIncrementType="{Binding TimeLineIncrementType}"
                                    StartTime="{Binding StartTime}"
                                    EndTime="{Binding EndTime}"
                                    PixelsBetweenTimeIncrements="{Binding PixelsBetweenTimeIncrements}"
                                    RowHeight="{Binding DataContext.RowHeight, ElementName=PART_DataRowItemsControl}" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.Template>
                            <ControlTemplate>
                                <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                                    Padding="{TemplateBinding Control.Padding}"
                                    BorderBrush="{TemplateBinding Border.BorderBrush}"
                                    Background="{TemplateBinding Panel.Background}"
                                    SnapsToDevicePixels="True">
                                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                                VerticalScrollBarVisibility="Auto"
                                                Padding="{TemplateBinding Control.Padding}"
                                                Focusable="False">
                                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </ItemsControl.Template>
                    </ItemsControl>

Horizontal Template

<ganttChart:GanttRowItemDisplay Visibility="{Binding DisplayDetails, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                                        NumRows="{Binding NumRows}"
                                        StartTime="{Binding StartTime}"
                                        EndTime="{Binding EndTime}"
                                        ItemsSource="{Binding RowItems}">

            <ganttChart:GanttRowItemDisplay.ItemsPanel>
                <ItemsPanelTemplate>
                    <ganttChart:GanttRowItemPanel 
                        RowHeight="{Binding RowHeight}"
                        TimeLineIncrementType="{Binding TimeLineIncrementType}"
                        StartTime="{Binding StartTime}"
                        EndTime="{Binding EndTime}"
                        PixelsBetweenTimeIncrements="{Binding PixelsBetweenTimeIncrements}" />
                </ItemsPanelTemplate>
            </ganttChart:GanttRowItemDisplay.ItemsPanel>
           
        </ganttChart:GanttRowItemDisplay>

The custom items controls are for drag and drop.  The vertical has one as well, but I made it a standard items control for testing.  

The previous iteration of this control didn't have virtualization of the horizontal rows so the horizontal scrolling of the parent wasn't a problem, but now since the panels are in control of scrolling I have no way of showing more than the viewport width without somehow telling the child panels to scroll horizontal.  I've achieved this using a behavior I grabbed from somewhere off the web for keeping the row headers in separate  columns of items controls sync'ed but the templates are in separate files for this.  I'm guessing there's a way to forward scroll events from the setHorizontal offset handler in the top panel, but not sure how to do that.  Please help!

解决方案

In the parent custom items control in the implementation of IScrollInfo.SetHorizontalOffset I cycled through the children's panels and then called SetHorizontalOffset.  This seems to work, but wish there was a better built in way to do this.  Was hoping someone would have a better answer than having to do this in a custom control.  Actually everything I'm doing should be a built in feature.....

这篇关于使用虚拟面板和水平项目控制滚动垂直项目控制，虚拟面板作为行子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！