Jak uzyskać ScrollViewer z wewnątrz prostokątem, aby zatrzymać przewijanie po dojściu do końca prostokąta?

Question

Stworzyłem prostokąt wewnątrz ScrollViewer jak ten

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

Podczas korzystania z aplikacji, wielkości zmian MusicBg, czasem coś około 3000 pikseli szerokości.

musicBG.Width = _songLength*PixelsPerSecond 

Jednak przewijanie scrollViewera pozwala mi przewijać prostokąt poza ekran.

Na przykład ten wiersz kodu podaje mi następujące wartości, gdy przesunąłem prostokąt tak daleko, jak chcę go przesunąć.

if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth) 

HorizontalOffset ma wartość ~ 1200, a ScrollableWidth ma wartość około ~ 2900.

Jak mogę zrobić to poprawnie, aby prostokąt nie był całkowicie przewinięty z ekranu?

Oczekuję, że HorizontalOffset o wartości około 1200 popchnie prostokąt w połowie odległości do miejsca docelowego i nie spowoduje, że zacznie znikać z ekranu.

ODPOWIEDŹ:

Po wielu frustracji, udało mi się rozwiązać ten problem za pomocą Canvas zamiast granicy lub prostokąta. Będę przyznawać punkty, jeśli ktoś będzie mógł wyjaśnić, dlaczego wystąpił ten problem, i czy jest mniej intensywny procesor, który działałby lepiej niż płótno.

Edit: Ekranów:

Bad Kod:

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

Obraz złej zwoju ze złym kodzie:

Dobry kod roboczych:

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

Dobrej Przewiń: zauważ, że mówi 170 sek skraca się w prawym dolnym rogu, zamiast mniejszej liczby 118 sekund w nieprawidłowym przewijaniu.

Answer 1

Wierzę, że twoje prawo, wp7 nie będzie renderować kształtów większych niż 2048 pikseli. Powodem, dla którego przewija się stronę, jest to, że traktuje ją tak, jakby była większa niż 2048, ale można zobaczyć tylko do szerokości 2048 pikseli i tylko przewija do części "ducha" prostokąta.

Nie jestem pewien, czy można to zmienić, ale najlepszym rozwiązaniem, z jakim mogłem wymyślić (bez przesłonięcia), jest podzielenie prostokąta na uchwyty, które są mniejsze niż 2000 (tylko dla bezpieczeństwa), a następnie ich wyświetlenie bezproblemowo w poziomym panelu stosu wewnątrz przeglądarki przewijania. Problem polega na tym, że w zależności od tego, jak je zakodowałeś, rozwiązanie to może być trudne do wdrożenia; ale możesz go po prostu podzielić na swój ViewModel podczas wyświetlania go, a twoja logika zobaczyłaby tylko jedną dużą porcję.