在XAML WINRT中尋找良好的薄滾動查看器樣式

Question

我已經在我的頁面中實現了語義縮放， 1）當我用HAND（我的電腦是觸摸啓用）從左到右移動屏幕時，如果應用程序保持空閒狀態，當我從左向右移動並在一段時間後消失時，橫向出現薄且良好的滾動查看器。 2）當我將鼠標懸停在語義縮放上時，我會看到默認/較大的較厚滾動條水平。但我想有一個看起來像滾動查看器scrollviewer看起來像第1步中提到的scrollviewer。讓我知道，如果有更好看的滾動查看器更薄

Answer 1

這聽起來像你想使ScrollViewer總是顯示薄的「平移指標」，而不是用可拖動的拇指顯示傳統的滾動條。這很容易做到，我會告訴你一個例子，但請記住你可能會創建一個可訪問性問題。如果用戶沒有支持觸摸的設備，則可拖動拇指的傳統滾動條允許用戶滾動。如果沒有這些，用戶必須求助於鍵盤或鼠標滾輪（假設用戶具有鼠標滾輪輸入設備，或者滾動查看器具有用戶可以選中的可聚焦內容）。這爲非觸摸用戶創建了潛在的可訪問性問題。

爲了確保我們指的是同一件事：

• traditional mouse scrollbar
• panning indicator

默認情況下，ScrollViewer中顯示平移指示燈，當用戶在執行觸摸手勢ScrollViewer，並顯示當用戶將鼠標移動到ScrollViewer上方或單擊ScrollBars/Thumbs時顯示的傳統鼠標滾動條。

爲了使ScrollViewer中顯示鼠標輸入平移指標，則需要執行以下步驟：

1. 在Expression Blend中打開項目。右鍵單擊ScrollViewer並選擇「編輯模板>編輯副本...」。
2. 挖掘ScrollViewer的模板並找到垂直ScrollBar。用鼠標右鍵單擊滾動條，然後選擇「編輯模板>編輯副本...」。
3. 打開創建新模板的XAML頁面，無論是在Blend中還是在VS中。找到您創建的ScrollBar模板。在裏面，找到這條線：<VisualStateGroup x:Name="ScrollingIndicatorStates">。

4. 裏面的「ScrollingIndicatorStates」 VisualStateGroup，複製代碼「TouchIndicator」的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> 
   

5. 這段代碼粘貼到「MouseIndicator」視覺狀態的身體，覆蓋什麼已經存在。

6. 此外，如果您還顯示水平滾動條，請確保在修改後的ScrollViewer模板中更新水平滾動條以使用您創建的滾動條模板。

所以，總體來說很簡單。我們只需將動畫從「TouchIndicator」狀態複製並粘貼到「MouseIndicator」狀態。完整的代碼示例如下： https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/ScrollViewer_PanningIndicatorsOnly