C# WPF - Как разместить вертикальную прокрутку внутри горизонтальной прокрутки

Question

Редактировать Оказывается, полоса прокрутки там очень хорошо, но из-за внешней полосы прокрутки она не видна ... dump ..

Любая идея, как сохранить вертикальную полосу прокрутки видимой даже его вне поля зрения?

Вот как это выглядит на самом деле при прокрутке вправо:

Прототип

Я пытаюсь добиться чего-то вроде следующего:

Control1 - некоторый текст с максимумом примерно двух строк. 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. Ну, я все еще попробовал это. Я устанавливаю свойство height для каждого элемента, который я использую в данном коде. Никаких различий в просмотре прокрутки.

Я пытался заменить DockPanel на Grid, но это привело только к возможности вертикальной прокрутки (которая, как уже говорилось, работает с DockPanel, но только полоса прокрутки не отображается вверх).

Спасибо за любую помощь.

Answer 1

Сначала я использовал просмотр списка, в котором control1 помещается в заголовок просмотра прокрутки, используя headerTemplate, и размещая строки в области элементов, используя itemsTemplate для 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>

К сожалению, в каждой строке элементов слева и справа есть дополнительное пространство. Благодаря этому можно немного больше прокручивать влево, а также далеко вправо. Это сокращает текст внутри текстового поля примерно на 5 пикселей. Это не так много, но в этом случае было запрошено, чтобы заголовок и содержимое также были одинаково растянуты с помощью шрифта с фиксированной шириной.

Этот лишний пробел уничтожает равный текст между заголовком и содержимым.

Как и в приведенном выше коде, я обошел это с использованием некоторого отрицательного поля, которое не очень хорошо и не идеально работает при прокрутке в крайнее правое положение.