Wie bekomme ich einen ScrollViewer mit einem Rechteck nach innen, um den Bildlauf zu stoppen, wenn das Ende des Rechtecks ​​erreicht ist?

Question

Ich habe innerhalb eines Scroll wie diese

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Center" Width="728" Canvas.Top="20" d:LayoutOverrides="HorizontalMargin" > 
    <Rectangle x:Name="musicBG" Fill="#FF0692FD"/> 
</ScrollViewer> 

Bei der Nutzung der App, die eine Größe von MusicBg Veränderungen, die manchmal etwas rund 3.000 Pixel Breite ein Rechteck erstellt.

musicBG.Width = _songLength*PixelsPerSecond 

Beim Scrollen des ScrollViewers kann ich das Rechteck jedoch vollständig vom Bildschirm abrollen.

Zum Beispiel gibt mir diese Codezeile die folgenden Werte, wenn ich das Rechteck so weit verschoben habe, wie ich es verschieben möchte.

if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth) 

Horizontal hat einen Wert von ~ 1200 und ScrollableWidth hat einen Wert von etwa ~ 2900.

Wie kann ich das richtig machen, damit das Rechteck nicht vollständig vom Bildschirm gescrollt wird?

Ich würde erwarten, dass ein HorizontalOffset von etwa 1200 das Rechteck nur etwa auf halbem Weg zum Ziel verschiebt und es nicht vom Bildschirm verschwinden lässt.

ANTWORT:

Nach viel Frustration, ich war in der Lage, dieses Problem zu lösen, indem Leinwand anstelle von Border oder Rechteck. Ich werde Punkte vergeben, wenn jemand erklären kann, warum dieses Problem aufgetreten ist, und ob es eine weniger prozessorintensive Steuerung gibt, die besser funktioniert als die Arbeitsfläche.

Edit: Screenshots:

Bad Code:

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" > 
            <Border x:Name="musicBG" Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" /> 

      </ScrollViewer> 

Bild von schlechten Blättern mit schlechten Code:

Gute Arbeitscode:

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" > 
       <Canvas x:Name="musicBG" Background ="#FF0692FD" Height="270" > 
        <Border Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" /> 
       </Canvas> 
      </ScrollViewer> 

Gut Scroll: Beachten Sie, dass es 170 Se sagt Conds unten rechts statt der kleineren Zahl von 118 Sekunden in der schlechten Scroll.

Answer 1

Ich glaube, Ihr Recht, wp7 wird keine Formen rendern, die größer als 2048 Pixel sind. Der Grund dafür ist, dass die Seite so behandelt wird, als wäre sie größer als 2048, aber Sie können nur bis zu einer Breite von 2048 Pixel sehen und einfach zum "Geister" -Teil des Rechtecks ​​scrollen.

Ich bin mir nicht sicher, ob Sie dies außer Kraft setzen können, aber die beste Lösung (ohne Überschreiben) wäre, indem Sie Ihr Rechteck in Chucks aufteilen, die kleiner als 2000 sind (nur um sicher zu gehen) und dann anzeigen nahtlos in einem horizontalen Stack Panel innerhalb der Scroll-Viewer. Das Problem dabei ist, dass diese Lösung, je nachdem, wie Sie sie codiert haben, schwer zu implementieren sein könnte. aber Sie könnten es vielleicht in Ihrem ViewModel aufteilen, wenn es angezeigt wird und Ihre Logik würde es nur als einen großen Brocken sehen.