WPF 向 ListBox 添加 header ，使其像 DataGrid 一样滚动

Question

我正在尝试创建一个布局，它使用 ListBox 和我的自定义 header ，它看起来像一个标尺，但用于日期(具有明确的开始和结束日期)。目标是具有类似于 DataGrid 的外观和感觉，只是列标题行将被我的 DateTape 对象替换。当用户水平滚动时，DateTape 和 ListBox 都滚动，但是当用户垂直滚动时，只有 ListBox 滚动， DateTape 位于顶部(类似于 DataGrid 中的列标题行)。

到目前为止，我能做的最好的事情如下:

    <Window x:Class="ProjectNS.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:my="clr-namespace:ProjectNS"
            Title="MainWindow" Height="350" Width="600">
        <Window.Resources>
            <DataTemplate x:Key="itemTemplate">
                <my:CustomRectangle HorizontalAlignment="Left" VerticalAlignment="Top" />
            </DataTemplate>
        </Window.Resources>
        <DockPanel>
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="File" />
            </Menu>
            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                <DockPanel>
                    <my:DateTape DockPanel.Dock="Top" VerticalAlignment="Top">
                        <my:DateTape.Dates>
                            <CalendarDateRange Start="10/4/2011" End="11/4/2011" />
                        </my:DateTape.Dates>
                    </my:DateTape>
                    <ListBox ItemTemplate="{StaticResource itemTemplate}" />
                </DockPanel>
            </ScrollViewer>
        </DockPanel>
    </Window>

此解决方案的唯一问题是 ListBox 的垂直滚动条位于控件的最右侧，这意味着用户必须水平滚动才能显示滚动条。我需要滚动条始终可见。

我尝试将 DateTape 和 ListBox 放入 ScrollViewer 中，但随后 DateTape 滚出了 View 垂直滚动时。

仅供引用 - 我的 CustomRectangle 对象是一个 UserControl，它允许用户实时调整水平位置和宽度以根据需要根据 进行定位>数据磁带。

Answer 1

我最终不得不进行一些重组。 ListBox 现在是嵌套在 ScrollViewer 中的 ItemsControl，垂直滚动条隐藏(未禁用)。我还有一个独立的 ScrollBar 停靠在右侧，它与代码隐藏中 ScrollViewer 中的垂直滚动条相关联。这处理垂直滚动。最后，辅助 ScrollViewer 包含 DateTape 和设置为处理水平滚动的 ItemsControl。

XAML

    <DockPanel x:Name="dockPanel">
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="File" />
        </Menu>
        <ScrollBar x:Name="verticalScrollBar"
                   DockPanel.Dock="Right"
                   SmallChange="1"
                   LargeChange="3"
                   Scroll="verticalScrollBar_Scroll"
                   SizeChanged="verticalScrollBar_SizeChanged"
                   Style="{StaticResource scrollBarHiderStyle}"
                   Maximum="{Binding ElementName=listScroller, Path=ScrollableHeight}" />
        <ScrollViewer x:Name="dateScroller"
                      VerticalScrollBarVisibility="Disabled"
                      HorizontalScrollBarVisibility="Auto"
                      DockPanel.Dock="Top">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <my:DateTape x:Name="dateTape"
                             DockPanel.Dock="Top"
                             VerticalAlignment="Top"
                             Dates="{Binding Source={StaticResource dateRange}}" />
                <ScrollViewer x:Name="listScroller" VerticalScrollBarVisibility="Hidden" Grid.Row="1" Foreground="{x:Null}" Panel.ZIndex="1">
                    <ItemsControl x:Name="itemsList"
                                  ItemTemplate="{StaticResource itemTemplate}"/>
                </ScrollViewer>
            </Grid>
        </ScrollViewer>
    </DockPanel>

C#

        // this function merely sets the scroll bar thumb size
        private void verticalScrollBar_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            verticalScrollBar.Track.ViewportSize = itemsList.ActualHeight / 2;
        }

        // this function links the scroll bar to the scrollviewer
        private void verticalScrollBar_Scroll(object sender, System.Windows.Controls.Primitives.ScrollEventArgs e)
        {
            listScroller.ScrollToVerticalOffset(e.NewValue);
        }

我试图通过使用 ItemsPanelTemplate 将独立的 ScrollBar 绑定(bind)到 ItemsControl 中的滚动条，但我无法获得那个工作。