Comment placer un ScrollViewer sur le dessus du contenu, il doit défiler

Je pense que maintenant, je comprends ce que tu veux dire par "en haut" - une façon de le faire est d'utiliser un modèle de contrôle qui rend le ScrollContentPresenter durée de deux lignes et de colonnes de la grille, tandis que les Barres de défilement sont dans la 2e lignes et de colonnes. Les Barres de défilement sont configurés pour être semi-transparent. Le contenu sera désormais dessiner sous les barres de défilement!

Le Style, j'ai essayé et qui fonctionne comme suit:

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

Exemple d'utilisation:

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

Le résultat est le long des lignes de cette:

Il serait simple de modifier cela pour que les Barres de défilement sont d'abord très transparent (par exemple, l'Opacité = 0.2) et de devenir plus opaque lorsque la souris entre dans la barre de Défilement. Ce serait un bel effet et de garder les Barres de défilement en dehors de la voie jusqu'à ce qu'ils sont nécessaires.

EDIT:

J'ai écrit ce mon blog pour ceux qui voudraient un peu plus de détails.

OriginalL'auteur Daniel Paull

Je ne suis pas sûr si vous souhaitez placer la barre de défilement de la scrollviewer sur le dessus du contenu - si réponse 1, si vous voulez tout le scrollViewer ontop du contenu, voir la réponse 2.

1) Vous pouvez modifier la représentation visuelle de quoi que ce soit dans WPF par l'application d'un modèle. L'astuce dans ce cas est de trouver ce que la représentation de la ScrollViewer, et puis l'essentiel, de mettre en œuvre tous les mêmes visuels juste changeing la position de la barre de Défilement en tant que de besoin. Il ya un couple de façons de trouver tous les visuels pour un contrôle le plus simple est de le WPF Échantillons MSDN - et bien assez le ScrollViewer exemple fourni par Microsoft montre comment modifier la position de la barre de défilement.

BTW Microsoft ont tendance à charger leurs exemples avec beaucoup de Xaml que vous n'avez pas vraiment besoin - play (impitoyablement coupé du code) avec le modèle jusqu'à ce qu'il fait exactement ce que vous voulez et rien de plus.

2) Mon approche de la passation de la faire défiler la vue ontop du contenu, serait d'utiliser deux scrollviewers placé sur le dessus les uns des autres. Le sommet est petit, translucide (opacity = 50) et gère le défilement, le fond est large et dispose le document. Fil de l'événement scroll à partir du haut ScrollViewer de sorte qu'il sera aussi un défilement vers le bas.

OriginalL'auteur MrTelly