Come inserire un ScrollViewer in cima al contenuto dovrebbe scorrere

Question

Vorrei mettere il mio ScrollViewer in modo che si sovrapponga/si trova sulla cima del contenuto di essa scorre.Vorrei impostare l'Opacità del ScrollViewer in modo che il contenuto non è visibile al di sotto.

Da quanto ho capito l'impostazione predefinita ScrollViewer, questo non sembra essere possibile, fuori dalla scatola, poiché il contenuto è nidificato all'interno del ScrollViewer.

Tutte le idee su come fare questo lavoro?

EDIT:Capisco che il ScrollViewer è un Decoratore e che il contenuto non è a conoscenza di ScrollViewer.Questa separazione è buono e non voglio che il contenuto di essere a conoscenza del ScrollViewer.Quello che cerco di fare è una questione puramente visiva (layout) cosa.Semplicemente, ScrollViewer in cima al contenuto.Il comportamento del ScrollViewer dovrebbe rimanere invariato.

Answer 1

Credo di capire cosa intendi per "in cima" - un modo per farlo è quello di utilizzare un modello di controllo che rende il ScrollContentPresenter span due righe e colonne di una griglia, mentre le Barre di scorrimento sono in 2 righe e colonne.Le Barre di scorrimento sono impostati per essere semi-trasparente.Il contenuto sarà ora di disegnare sotto le barre di scorrimento!

Lo Stile che ho provato che funziona è il seguente:

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

Esempio di utilizzo:

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

Il risultato è lungo le linee di questo:

Sarebbe più semplice modificare questo in modo che le Barre di scorrimento sono inizialmente molto trasparente (per dire, Opacità = 0.2) e farli diventare più opaco, quando il mouse entra la barra di Scorrimento.Che sarebbe un bello l'effetto sarebbe mantenere le Barre di scorrimento fuori fino a quando non sono necessari.

EDIT:

Ho scritto questo su il mio blog per coloro che vorrebbero un po ' più in dettaglio.

Answer 2

L'idea è che il ScrollViewer è un decoratore per la cosa che scorre e clip.La cosa da scorrere è completamente all'oscuro di scorrimento.Questo è semplice ed elegante, perché non è sufficiente nel tuo caso?

Detto questo, se il ScrollViewer non fare quello che vuoi, io suggerisco di creare controlli ScrollBar e gestire gli eventi generati da esso, spostando il contenuto che si desidera scorrere i gestori di eventi.Si può anche essere in grado di fare qualche fantasia di associazione dati per evitare di scrivere i gestori di eventi.Io non sono sicuro di come si sta andando a clip il contenuto correttamente, ma un nuovo barattolo di vermi.

Se avete bisogno di un layout di controllo sulla parte superiore di un altro, utilizzare una tela di controllo.

Answer 3

Non sono sicuro se si desidera posizionare la barra di scorrimento del scrollviewer in cima al contenuto - se è così la risposta 1, se si desidera che l'intera scrollViewer oltre al contenuto di vedere la risposta 2.

1) È possibile modificare la rappresentazione visiva di qualcosa in WPF applicando un modello.Il trucco in questo caso è quello di trovare quello esistente rappresentazione del ScrollViewer è, e quindi essenzialmente re-implementare tutti la stessa grafica changeing la posizione della barra di Scorrimento, come richiesto.Ci sono un paio di modi per trovare tutte le immagini per un controllo - il modo più semplice è da WPF Campioni MSDN - e bene, basta il ScrollViewer l'esempio fornito da Microsoft mostra come modificare la posizione della barra di scorrimento.

BTW Microsoft tendono a caricare i loro esempi con un sacco di extra Xaml che non si ha realmente bisogno - play (spietatamente tagliare codice) con il modello fino a quando non fa proprio quello che vuoi e non di più.

2) il Mio approccio all'immissione della scorrere oltre al contenuto, sarebbe utilizzare due scrollviewers posto sulla parte superiore di ogni altro.Il 'top' è piccolo, traslucido (opacity = 50) e gestisce lo scorrimento, la parte inferiore è più grande e ha il documento.Legare l'evento scroll dall'alto ScrollViewer in modo che anche scorrere in basso.