使用ScrollViewer XAML wp8横向滚动到末尾

Question

I have a ScrollViewer in my XAML. I want to scroll it horizontally to the end of right side so that user can see all the controls in ScrollViewer.

Here's my code:

<ScrollViewer x:Name="ScrollFilter" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
                <StackPanel HorizontalAlignment="Left">
                    <Rectangle x:Name="RecAntiqueFilter" Fill="Red" Height="100" Width="100" DoubleTapped="RecAntiqueFilter_DoubleTapped" Tapped="RecAntiqueFilter_Tapped"/>
                    <Rectangle x:Name="RecBlurFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-200,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHSTFilter" Fill="Blue" Height="100" Width="100" Margin="0,-100,-400,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecBFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-600,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHFilter" Fill="Blue" Height="100" Width="100" Margin="0,-100,-800,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-1000,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHcFilter" Fill="Yellow" Height="100" Width="100" Margin="0,-100,-1200,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecFake" Fill="Transparent" Height="100" Width="400" Margin="0,-100,-1400,0"/>

                </StackPanel>
            </ScrollViewer>

How to do it?

Answer 1

For horizontal scroll, you must use stack panel orientation property, Updated code is in the following.

<ScrollViewer x:Name="ScrollFilter" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
                <StackPanel  Orientation="Horizontal" HorizontalAlignment="Left">
                    <Rectangle x:Name="RecAntiqueFilter" Fill="Red" Height="100" Width="100" DoubleTapped="RecAntiqueFilter_DoubleTapped" Tapped="RecAntiqueFilter_Tapped"/>
                    <Rectangle x:Name="RecBlurFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-200,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHSTFilter" Fill="Blue" Height="100" Width="100" Margin="0,-100,-400,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecBFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-600,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHFilter" Fill="Blue" Height="100" Width="100" Margin="0,-100,-800,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecFilter" Fill="Green" Height="100" Width="100" Margin="0,-100,-1000,0" Tapped="RecBlurFilter_Tapped"/>
                    <Rectangle x:Name="RecHcFilter" Fill="Yellow" Height="100" Width="100" Margin="0,-100,-1200,0" Tapped="RecHSTFilter_Tapped"/>
                    <Rectangle x:Name="RecFake" Fill="Transparent" Height="100" Width="400" Margin="0,-100,-1400,0"/>
</StackPanel>
</ScrollViewer>