Wie ein Scroll oben auf den Inhalt platzieren sie bewegen sollte

Question

Ich möchte meine Scroll so setzen, dass es Überschneidungen / oben auf den Inhalt sitzt es scrollt. Ich würde die Undurchsichtigkeit des Scroll so eingestellt, dass der Inhalt sichtbar darunter ist.

Soweit ich die Standard-Scroll verstehen, dies scheint nicht aus der Box möglich zu sein, da der Inhalt innerhalb des Scroll verschachtelt ist.

Alle Ideen, wie diese Arbeit zu machen?

EDIT: Ich verstehe, dass die Scroll ein Decorator ist und dass der Inhalt ist nicht bekannt, die Scroll. Diese Trennung ist gut und ich will nicht der Inhalt sich der Scroll sein. Was ich versuche zu tun ist, um eine rein visuelle (Layout) Sache. Zeigen Sie einfach den Scroll auf dem Inhalts.Verfahren Verhalten des Scroll sollte unverändert bleiben.

Answer 1

Ich glaube, ich verstehe jetzt, was Sie mit „on top“ bedeuten - einer Möglichkeit, es zu tun ist, eine Steuervorlage zu verwenden, die die Scroll Spannweite zwei Zeilen und Spalten eines Gitters macht, während die Bildlaufleisten in den zweiten Zeilen und Spalten sind . Die Scroll-Leisten sind gesetzt semi-transparent sein. Der Inhalt wird nun unter den Scrollbalken ziehen!

Der Style Ich habe versucht, die funktioniert, ist wie folgt:

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

Beispiel Nutzung:

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

Das Ergebnis ist entlang der Linien folgt aus:

Es wäre so einfach ändern, so dass die Scroll zunächst sehr transparent sind (sagen wir, Opazität = 0,2) und sie undurchsichtiger werden, wenn die Maus den ScrollBar eintritt. Das wäre ein schöner Effekt sein und die Scrollbars aus dem Weg halten würde, bis sie gebraucht werden.

EDIT:

ich das oben geschrieben habe auf meinem Blog für diejenigen, die würde wie ein wenig mehr Details.

Answer 2

Die Idee ist, dass die Scroll ein Dekorateur für die Sache ist, dass es rollt und Clips. Die Sache gescrollt wird, ist völlig unbeeindruckt von dem Bildlauf. Das ist einfach und elegant - warum ist es in Ihrem Fall nicht ausreichend

Having said that, wenn die Scroll nicht tun, was Sie wollen, schlage ich vor, dass Sie ScrollBar Steuerelemente erstellen und die Ereignisse von ihm erzeugten Griff, Bewegen der Inhalte, die Sie wollen in den Event-Handler blättern. Sie können sogar in der Lage sein, einige ausgefallenen Daten zu tun Bindung Event-Handler zu vermeiden, zu schreiben. Ich bin mir nicht sicher, wie Sie den Inhalt richtig befestigen gehen, aber das ist eine neue Dose Würmer.

Wenn Sie eine Kontrolle auf einem anderen Layout benötigen, verwenden Sie eine Leinwand Kontrolle.

Answer 3

Ich bin nicht sicher, ob Sie die Scrollbar des Scroll oben auf den Inhalt platzieren wollen -. Wenn ja 1 beantworten, wenn Sie die ganze Scroll ontop des Inhalts siehe 2 Antwort wollen

1) Sie können die visuelle Darstellung von irgendetwas in WPF ändern, indem Sie eine Vorlage anwenden. Der Trick ist in diesem Fall zu finden, was die bestehende Darstellung der Scroll ist, und dann im Wesentlichen der gleichen Visuals neu implementieren nur die Position der ScrollBar changeing nach Bedarf. Es gibt ein paar Möglichkeiten zu finden, alle Visuals für eine Kontrolle - die einfachste ist aus der Beispiel bereitgestellt von Microsoft zeigt, wie die Position der Scrollbar ändern.

BTW Microsoft neigt dazu, ihre Beispiele mit vielen Extra-XAML zu laden, die Sie nicht wirklich brauchen -. Spielen (rücksichtslos Code ausgeschnitten) mit der Vorlage, bis es nicht genau das, was Sie wollen, und nicht mehr

2) Mein Ansatz ontop des Inhalts der Bildlaufansicht zu platzieren, wäre zwei scrollviewers übereinander gelegt zu verwenden. Die ‚oben‘ ist klein, durchscheinend (Opazität = 50) und Handles Scrollen, der Boden größer ist und das Dokument. Verdrahten Sie das Scroll-Ereignis von oben Scroll so, dass sie auch den Boden eines blättern.