Как разместить ScrollViewer поверх содержимого, которое он должен прокручивать

Question

Я хотел бы разместить мой ScrollViewer таким образом, чтобы он перекрывал / располагался поверх содержимого, которое он прокручивал. Я бы установил Непрозрачность ScrollViewer так, чтобы содержимое было видно внизу.

Насколько я понимаю ScrollViewer по умолчанию, это не представляется возможным из коробки, так как содержимое вложено в ScrollViewer.

Есть идеи, как заставить это работать?

РЕДАКТИРОВАТЬ: я понимаю, что ScrollViewer является декоратором и что контент не знает о ScrollViewer. Это разделение хорошо, и я не хочу, чтобы контент знал о ScrollViewer. То, что я пытаюсь сделать, является чисто визуальной (версткой) вещью. Просто покажите ScrollViewer поверх содержимого. Поведение ScrollViewer должно остаться без изменений.

Answer 1

Я думаю, что теперь я понимаю, что вы подразумеваете под "сверху" - один из способов сделать это - использовать шаблон элемента управления, который заставляет ScrollContentPresenter охватывать две строки и столбца сетки, тогда как полосы прокрутки находятся во 2-х строках и столбцах. , Полосы прокрутки установлены как полупрозрачные. Теперь контент будет отображаться под полосами прокрутки!

Стиль, который я пробовал, работает следующим образом:

<Style x:Key="SVStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                        <ScrollBar Name="PART_VerticalScrollBar"
                            HorizontalAlignment="Right"
                            Opacity="0.5" 
                            Grid.Column="1"
                            Value="{TemplateBinding VerticalOffset}"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <ScrollBar Name="PART_HorizontalScrollBar"
                            VerticalAlignment="Bottom"
                            Orientation="Horizontal"
                            Opacity="0.5"
                            Grid.Row="1"
                            Value="{TemplateBinding HorizontalOffset}"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Пример использования:

<ScrollViewer HorizontalScrollBarVisibility="Auto" Style="{StaticResource SVStyle}" >
    <StackPanel>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >World World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
    </StackPanel>
</ScrollViewer>

Результат примерно такой:

Было бы просто изменить это так, чтобы полосы прокрутки изначально были очень прозрачными (скажем, непрозрачность = 0,2) и чтобы они стали более непрозрачными, когда мышь входит в полосу прокрутки. Это было бы хорошим эффектом и не позволяло бы прокручивать полосы до тех пор, пока они не понадобятся.

EDIT:

Я написал это в моем блоге для тех, кто хотел бы немного больше подробностей.

Answer 2

Я не уверен, хотите ли вы поместить полосу прокрутки средства просмотра прокрутки поверх содержимого - если да, ответьте 1, если вы хотите, чтобы весь scrollViewer был поверх содержимого, см. Ответ 2.

1) Вы можете изменить визуальное представление чего-либо в WPF, применив шаблон. Хитрость в этом случае состоит в том, чтобы найти существующее представление ScrollViewer, а затем, по существу, заново реализовать все те же визуальные элементы, просто изменив положение ScrollBar по мере необходимости. Есть несколько способов найти все визуальные элементы для элемента управления - самый простой - из WPF MSDN Samples - и, как ни странно, пример ScrollViewer , предоставленный Microsoft , показывает, как изменить положение полосы прокрутки.

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

2) Мой подход к размещению представления прокрутки поверх содержимого заключается в использовании двух средств просмотра прокрутки, расположенных друг над другом. «Верх» маленький, полупрозрачный (непрозрачность = 50) и обрабатывает прокрутку, нижний больше и содержит документ. Подключите событие прокрутки от верхнего ScrollViewer, чтобы оно также прокручивало нижнее.

Answer 3

Идея состоит в том, что ScrollViewer - это декоратор для того, что он прокручивает и обрезает. Прокручиваемая вещь совершенно не знает о прокрутке. Это просто и элегантно - почему в вашем случае этого недостаточно?

Сказав, что если ScrollViewer не делает то, что вы хотите, я предлагаю вам создать элементы управления ScrollBar и обрабатывать сгенерированные им события, перемещая содержимое, которое вы хотите прокручивать, в обработчиках событий. Вы можете даже сделать некоторую причудливую привязку данных, чтобы избежать написания обработчиков событий. Я не уверен, как вы собираетесь правильно обрезать содержимое, но это новая банка червей.

Если вам нужно расположить один элемент управления поверх другого, используйте элемент управления canvas.