C＃WPF-如何在水平滚动查看器内放置垂直滚动查看器

Question

编辑原来，滚动条在那里很好，但是由于外部滚动条，它不在视线范围内...转储..

任何想法如何使垂直滚动条即使在看不见的情况下也保持可见？

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

Prototype

我正在尝试实现以下目标：

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>

预览

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

我尝试过的其他事情

我猜问题是，由于外部滚动查看器，内部滚动查看器获得了无限的空间，因此它没有显示出来。在其他线程中，建议为内部scrollviewer设置高度。好吧，我仍然尝试过。我将给定代码中要使用的每个元素的高度属性设置为。关于scrollviewer没什么区别。

[我试图用网格交换DockPanel，但这仅导致垂直滚动的能力消失了（如上所述，它与DockPanel一起使用，但仅滚动条未显示）。

感谢您的帮助。

Answer 1

首先，我使用listview，其中将control1使用headerTemplate放置在滚动视图的标题内，并使用Control2的itemsTemplate将行放置在项目区域中。

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

这是代码：

            <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>

不幸的是，每个元素行的左侧和右侧都有一些多余的空间。因此，它可以向左滚动更多，也可以向右滚动更远。这样做会将文本框内的文本缩小大约5个像素。数量不多，但在这种情况下，要求头和内容也以固定宽度字体同样地拉伸。

此多余空间破坏了标题和内容之间的相等文本。

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