WPF 将标题添加到 ListBox，使其像 DataGrid 一样滚动

Question

我正在尝试创建一个布局，该布局使用ListBox 和看起来像标尺的自定义标题，但用于日期（具有明确的开始和结束日期）。目标是具有类似于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 滚动出视图。

仅供参考 - 我的 CustomRectangle 对象是一个 UserControl，它允许用户实时调整水平位置和宽度，以根据需要根据 DateTape 定位它。

Answer 1

我最终不得不进行一些重组。 ListBox 现在是 ItemsControl 嵌套在 ScrollViewer 中，垂直滚动条隐藏（未禁用）。我还有一个独立的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 绑定到ItemsControl 中的滚动条，但我无法让它工作。