C# WPF - 如何将垂直滚动查看器放置在水平滚动查看器中

Question

编辑事实证明，滚动条在那里非常好，但由于外部滚动条，它在视图之外...转储..

知道如何保持垂直滚动条可见吗？

这是向右滚动时的实际外观：

原型

我正在努力实现如下目标：

Control1 是一些最大约 2 行高的文本。 Control2 是一个文本行列表。

control1 和control2 都应该水平同步滚动。只有 control2 还应具有垂直滚动条。

代码

这是我到目前为止尝试过的代码：

    <Grid>
    <GroupBox Header="MyHeader" HorizontalAlignment="Stretch" Margin="5,5,5,0" VerticalAlignment="Stretch" Grid.ColumnSpan="2">
        <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ScrollViewer Grid.Column="0" Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                <DockPanel Margin="5,20,5,0">
                    <TextBlock DockPanel.Dock="Top" Text="{Binding Ruler}" Margin="6,0,0,0" FontFamily="Courier New"/>
                    <ScrollViewer DockPanel.Dock="Bottom" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Height="100">
                        <Border BorderThickness="0.5" BorderBrush="Black" Height="100">
                                <ItemsControl ItemsSource="{Binding PreviewRawList}" Height="100">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBox Text="{Binding Path=.}" FontFamily="Courier New"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                        </Border>
                    </ScrollViewer>
                </DockPanel>
            </ScrollViewer>
            [...]
        </Grid>
    </GroupBox>
</Grid>

预览

这就是它编译的内容。我可以使用鼠标滚轮垂直滚动，但滚动条就是不显示。

我试过的其他方法

我想问题是由于外部滚动查看器，内部滚动查看器变得无限 space 以至于它没有显示出来。在其他线程中，建议为内部滚动查看器设置高度。好吧，我仍然尝试过这个。我将 height-属性设置为我在给定代码中使用的每个元素。滚动查看器没有区别。

我尝试将 DockPanel 与 Grid 互换，但这只会导致垂直滚动功能消失（如前所述，它可以与 DockPanel 一起使用，但只有滚动条未显示）。

感谢您的帮助。

Answer 1

起初我最终使用列表视图，其中 control1 使用 headerTemplate 放置在滚动视图的 header 中，使用 [=12] 将行放置在 items-area 中=] 用于 Control2.

这几乎和预期的一样完美。

这是代码：

            <ListView Name="Ruler" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding PreviewRawList}">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="Margin" Value="0"/>
                        <Setter Property="Padding" Value="0"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.View>
                    <GridView>
                        <GridViewColumn>
                            <GridViewColumn.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.Ruler}" Margin="2,0,0,0" FontFamily="Courier New"/>
                                </DataTemplate>
                            </GridViewColumn.HeaderTemplate>
                            <GridViewColumn.HeaderContainerStyle>
                                <Style TargetType="{x:Type GridViewColumnHeader}">
                                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                                </Style>
                            </GridViewColumn.HeaderContainerStyle>
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <control:SelectionBindingTextBox Text="{Binding Path=.}" FontFamily="Courier New" Margin="-5,0,-5,0" BorderThickness="0" HorizontalContentAlignment="Left" BindableSelectionStart="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.RulerSelectionStart, Mode=OneWayToSource}" BindableSelectionLength="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.RulerSelectionLength, Mode=OneWayToSource}"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

不幸的是，每个元素行的左侧和右侧都有一些 extra-space。因此，可以向左滚动一点，也可以向右滚动一点。这样做会将文本框中的文本缩小大约 5 个像素。这并不多，但在这种情况下，要求 header 和内容同样使用 fixed-width-font.

进行拉伸

这个 extra-space 破坏了 header 和内容之间的相等 text-with。

在上面的代码中，我使用一些负边距解决了这个问题，这不是很好，并且在滚动到最右边时不能完美地工作。

C# WPF - 如何将垂直滚动查看器放置在水平滚动查看器中

C# WPF - How to place a vertical scrollviewer inside a horizontal scrollviewer

c#

wpf

scrollviewer