ScrollViewer Border (Windows Phone 7)

Question

I have a ScrollViewer on my Windows Phone page. I want to show expllicitly that there is a scrolling possibility. By default, the control itself doesn't show anything which can give a hint to the user that the space is scrollable. Is it possible, for example, to always show the scroll bar on the right side? Again, by default it is shown only when the user wants and tries to scroll.

Answer 1

<ScrollViewer VerticalScrollBarVisibility="Visible"> not working in windows phone. I think you can change ControTemplate for ScrollViewer and make scroll bar visible.

Edited:

Is sample how you can change control template for ScrolViewer. I got it from msdn

<Style x:Key="LeftScrollViewer" TargetType="ScrollViewer">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <ScrollContentPresenter Grid.Column="1"/>

                        <ScrollBar Name="PART_VerticalScrollBar"
        Value="{TemplateBinding VerticalOffset}"
        Maximum="{TemplateBinding ScrollableHeight}"
        ViewportSize="{TemplateBinding ViewportHeight}"
        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                        <ScrollBar Name="PART_HorizontalScrollBar"
        Orientation="Horizontal"
        Grid.Row="1"
        Grid.Column="1"
        Value="{TemplateBinding HorizontalOffset}"
        Maximum="{TemplateBinding ScrollableWidth}"
        ViewportSize="{TemplateBinding ViewportWidth}"
        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

apply this style to ScrolViewer

<ScrollViewer  Grid.Column="1" Style="{StaticResource LeftScrollViewer}">

this sample will not work in Windows Phone because this ScrollViewer ControlTemplate from descktop wpf. But you can use Expression Blend and get Windows Phone ScrolViewer ControlTemplate and change something like

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

on Visibility="Visible"

Answer 2

You can replace the default ScrollViewer template with one that always shows the scrollbar. Note that this isn't consistent with the windows phone design guidelines and you should think carefully before choosing to always display a scrollbar.

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ScrollStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="00:00:00.5"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Scrolling">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NotScrolling"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="{TemplateBinding Padding}">
                            <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                            <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="1" Orientation="Vertical" Visibility="Visible" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
                            <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

<ScrollViewer Style="{StaticResource ScrollViewerStyle1}">