Question

我的Windows Phone页面上有一个ScrollViewer。我想明确地表明存在滚动的可能性。默认情况下，控件本身不会显示任何可以向用户提示空间可滚动的提示。例如，是否可以始终在右侧显示滚动条？同样，默认情况下，它仅在用户想要并尝试滚动时显示。

Answer 1

<ScrollViewer VerticalScrollBarVisibility="Visible">无法在Windows手机中使用。我认为您可以更改ControTemplate for ScrollViewer并使滚动条可见。

编辑：

示例如何更改ScrolViewer的控件模板。我是从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>

将此样式应用于ScrolViewer

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

此示例在Windows Phone中不起作用，因为来自descktop wpf的ScrollViewer ControlTemplate。但您可以使用Expression Blend并获取Windows Phone ScrolViewer ControlTemplate并更改类似

的内容

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

on Visibility="Visible"

Answer 2

您可以将默认ScrollViewer模板替换为始终显示滚动条的模板。请注意，这与Windows手机设计指南不一致，在选择始终显示滚动条之前，您应该仔细考虑。

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

ScrollViewer Border（Windows Phone 7）

2 个答案: