c# - ScrollViewer ボーダー (Windows Phone 7)

Question

Windows Phone ページに ScrollViewer があります。スクロールの可能性があることを明示的に示したいと思います。デフォルトでは、コントロール自体には、スペースがスクロール可能であるというヒントをユーザーに与えることができるものは何も表示されません。たとえば、スクロールバーを常に右側に表示することは可能ですか? 繰り返しますが、デフォルトでは、ユーザーがスクロールを希望して試行した場合にのみ表示されます。

Answer 1

デフォルトの 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}">

Answer 2

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

デスクトップ wpf. ただし、Expression Blend を使用して Windows Phone ScrollViewer ControlTemplate を取得し、次のように変更できます。

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

の上 Visibility="Visible"