Question

我在页面中实现了语义缩放， 1）当我用HAND（我的计算机启用了触摸）从屏幕左侧移动屏幕以便从屏幕上读取内容时，我看到从左到右移动时水平显示的细长滚动查看器在一段时间后消失，如果应用程序保持不变闲。 2）当我将鼠标和鼠标悬停在语义缩放上时，我看到默认/更大的更粗的滚动条水平。但我希望有一个看起来像滚动浏览器看起来像在Step1中提到的scrollviewer。如果有更好看的滚动浏览器哪个更薄

，请告诉我

Answer 1

听起来你想让ScrollViewer始终显示瘦＆＃34;平移指标＆＃34;当鼠标悬停在它上面而不是用可拖动的拇指显示传统的ScrollBars时。这样做很容易，我会向您展示一个示例，但请记住，您可能会创建一个辅助功能问题。如果用户没有启用触摸的设备，则具有可拖动拇指的传统ScrollBars允许用户滚动。如果没有这些，用户必须使用键盘或鼠标滚轮进行滚动（假设用户有鼠标滚轮输入设备，或者ScrollViewer具有用户可以选中的可聚焦内容）。这为非触摸用户创建了潜在的可访问性问题。

确保我们指的是同一件事：

默认情况下，当用户在ScrollViewer上执行触摸手势时，ScrollViewer会显示平移指示器，并显示当用户将鼠标移到ScrollViewer上方或点击ScrollBars / Thumbs时，会显示传统鼠标滚动条。

要使ScrollViewer显示鼠标输入的平移指示器，您需要执行以下步骤：

在Expression Blend中打开您的项目。右键单击ScrollViewer并选择＆＃34;编辑模板＆gt;编辑副本...＆＃34;。
深入了解ScrollViewer的模板，找到垂直的ScrollBar。右键单击ScrollBar并选择＆＃34;编辑模板＆gt;编辑副本...＆＃34;。
打开在Blend或VS中创建新模板的XAML页面。找到您创建的ScrollBar模板。在其中，找到以下行：<VisualStateGroup x:Name="ScrollingIndicatorStates">。

＆＃34; ScrollingIndicatorStates＆＃34; VisualStateGroup，复制＆＃34; TouchIndicator＆＃34;内的代码。的VisualState：

<Storyboard>
    <FadeInThemeAnimation TargetName="HorizontalPanningRoot"/>
    <FadeInThemeAnimation TargetName="VerticalPanningRoot"/>
    <FadeOutThemeAnimation TargetName="HorizontalRoot"/>
    <FadeOutThemeAnimation TargetName="VerticalRoot"/>
    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalRoot">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalRoot">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

将此代码粘贴到＆＃34; MouseIndicator＆＃34;的主体中。视觉状态，覆盖已存在的东西。
此外，如果您同时显示水平ScrollBar，请确保更新已修改的ScrollViewer模板中的水平ScrollBar以使用您创建的ScrollBar模板。

所以，整体上非常简单。我们只需要从＆＃34; TouchIndicator＆＃34;中复制动画。陈述并将它们粘贴到＆＃34; MouseIndicator＆＃34;州。完整的代码示例如下： https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/ScrollViewer_PanningIndicatorsOnly

在XAML WINRT中寻找良好的Scrollviewer风格

1 个答案: