ScrollViewer 边框 (Windows Phone 7)答案

【问题标题】：ScrollViewer Border (Windows Phone 7)ScrollViewer 边框 (Windows Phone 7)
【发布时间】：2013-03-01 06:42:03
【问题描述】：

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

【问题讨论】：

标签： c# windows-phone-7 scrollviewer

【解决方案1】：

<ScrollViewer VerticalScrollBarVisibility="Visible"> 在 windows phone 中不工作。我认为您可以更改 ScrollViewer 的 ControTemplate 并使滚动条可见。

已编辑：

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

将此样式应用于 ScrollViewer

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

此示例无法在 Windows Phone 中运行，因为此 ScrollViewer ControlTemplate 来自 descktop wpf。但是您可以使用 Expression Blend 并获取 Windows Phone ScrollViewer ControlTemplate 并更改类似

的内容

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

在Visibility="Visible"

【讨论】：

【解决方案2】：

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

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

【讨论】：