ScrollViewer 控制項樣式提示

  • 發行項

Ee341456.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-tw,Expression.40).png

您可以使用內建的 ScrollViewer 控制項範本來建立自訂 ScrollViewer 範本。 ScrollViewer 控制項的預設外觀如下：

Ee341456.0fb6390c-a631-4f14-8f23-be3723f99405(zh-tw,Expression.40).png

ScrollViewer 範本的組件

ScrollViewer 範本包含下列組件：

組件名稱 物件類型

ScrollContentPresenter

ScrollContentPresenter

HorizontalScrollBar

ScrollBar

VerticalScrollBar

ScrollBar
tip note秘訣：

若要檢視範本的組件，請在修改範本時開啟 [組件] 面板。

ScrollViewer 提示

ScrollViewer 是由受水平 ScrollBar 和垂直 ScrollBar 控制的可捲動內容所組成。 ScrollBar 可設定成一律顯示、一律隱藏或是只在需要時顯示。

ScrollViewerPresenter 組件

ScrollContentPresenter 組件為強制項目。 ScrollContentPresenter 會顯示可捲動的內容。

HorizontalScrollBar 組件

HorizontalScrollBar 組件為選用項目。請進行範本繫結，將此組件的 Visibility 屬性繫結至 ComputedHorizontalScrollBarVisibility 、將其 Maximum 屬性繫結至 ScrollableWidth 、將其 Value 屬性繫結至 HorizontalOffset ，並將其 ViewportSize 屬性繫結至 ViewportWidth 。

VerticalScrollBar 組件

VerticalScrollBar 組件為選用項目。請進行範本繫結，將此組件的 Visibility 屬性繫結至 ComputedVerticalScrollBarVisibility 、將其 Maximum 屬性繫結至 ScrollableHeight 、將其 Value 屬性繫結至 VerticalOffset ，並將其 ViewportSize 屬性繫結至 ViewportHeight 。

範本繫結

您可以對 [Background]、[BorderThickness] 或 [Padding] 屬性進行範本繫結。如需詳細資訊，請參閱完成範本的物件屬性。

將物件轉換成 ScrollViewer 控制項

下圖是設計人員建立之捲動檢視器的詳細設計圖 (comp)。

ScrollViewer

請特別注意，前面的圖形還不是捲動檢視器，而是看似捲動檢視器的圖案。

此範例使用下列程序步驟 2 中的 XAML 程式碼。

  1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

    <Grid x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
      <Rectangle.Fill>
      <RadialGradientBrush>
         <GradientStop Color="White"/>
         <GradientStop Color="Black" Offset="1"/>
      </RadialGradientBrush>
      </Rectangle.Fill>
   </Rectangle>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" HorizontalAlignment="Right">
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
         VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
      Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" VerticalAlignment="Bottom" />
   </Grid>
</Grid>

  3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

  4. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [root]，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [ScrollViewer]，然後按一下 [確定]。

    在這個步驟中，Expression Blend 會移除 root 及其中的所有內容，並在同一個位置放入新的 ScrollViewer 。接著，Expression Blend 會將 root 變成新 ScrollViewer 樣式的範本，並將該新樣式套用到新的 ScrollViewer 。

  5. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [ContentPresenter]，然後按一下 [刪除]。

  6. 在 [物件與時間軸] 面板中，按一下 [root]。在 [組件] 面板中，按兩下 [ScrollContentPresenter]。

  7. 以滑鼠右鍵按一下 [verticalscrollbar]，指向 [變成 ScrollViewer 的組件]，然後按一下 [VerticalScrollBar]。按一下 [確定]。

    若要設定 VerticalScrollBar 的樣式，請參閱 ScrollBar 控制項樣式提示。

  8. 按一下 [將範圍傳回] Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png，回到 [ScrollViewerStyle1 (ScrollViewer template)]。

  9. VerticalScrollBar 必須能夠捲動可捲動區域的檢視區。若要提供這項功能，您可以使用 [屬性] 面板中 [進階選項] 功能表上的 [自訂運算式] 選項。請將 [Visibility] 設定為 {TemplateBinding ComputedVerticalScrollBarVisibility}，將 [Maximum] 設定為 {TemplateBinding ScrollableHeight}，將 [Value] 設定為 {TemplateBinding VerticalOffset}，並將 [ViewportSize] 設定為 {TemplateBinding ViewportHeight}。

    或者，請在 [分割] 檢視中，選取 [物件與時間軸] 面板中的 [VerticalScrollBar]，找出以 <ScrollBar x:Name="VerticalScrollBar 開頭的程式碼行，然後將下列程式碼貼到剛找到的程式碼行尾。

    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"

  10. [ScrollContentPresenter] 和 [VerticalScrollBar] 必須並排放置，且各自放在一欄內。在 [物件與時間軸] 面板中，按一下 [root]。在畫板上，按一下控制項上方的藍色框線，然後拖曳橘色箭號，讓它位於捲軸右邊，如下圖所示：

    包含欄的 ScrollViewer

  11. 針對右欄，按一下 [星號]** **Ee341456.1b4edaf6-b6a8-4498-80dc-949375fa610d(zh-tw,Expression.40).png 兩次。[自動] 圖示 Ee341456.aa9ec064-22f8-4b62-9eed-3f4772362d22(zh-tw,Expression.40).png 隨即出現。

  12. 在 [物件與時間軸] 面板中，按一下 [ScrollContentPresenter]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [ColumnSpan] 右邊的 [進階選項]，然後按一下 [重設]。

  13. 在 [物件與時間軸] 面板中，按一下 [VerticalScrollBar]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Margin] 右邊的 [進階選項]，然後按一下 [重設]。

  14. 名為 content 的物件仍然包含在範本中。這個物件是 200 像素平方的 [Rectangle]，146 像素平方的 ScrollViewer 會在這個物件上面捲動。下一個步驟是從範本剪下這個物件，並將它貼到 [ScrollViewer] 的 [Content] 屬性中。[ScrollContentPresenter] 將會顯示它。請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [content]，然後按一下 [剪下]。

  15. 按一下 [將範圍傳回]** **Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png，然後按 CTRL+V，將 [content] 貼到 [ScrollViewer] 的 [Content] 屬性中。

  16. 建置專案 (CTRL+SHIFT+B)，然後按 F5 來測試您的專案。

    important note重要訊息：

    除非按照步驟 7 所述，使用 ScrollBar 控制項樣式提示來設定 ScrollBar 的樣式，否則 ListBox 將無法依預期運作。

如需將新 ComboBox 範本套用至其他 ComboBox 物件的詳細資訊，請參閱套用或移除資源。

參照

您可以在 MSDN 上的 Silverlight Control Gallery Ee341456.xtlink_newWindow(zh-tw,Expression.40).png (Silverlight 控制項陳列庫) 找到有關 Silverlight  ScrollViewer 控制項之屬性與事件的詳細資訊。

另請參閱

概念

一般 Silverlight 控制項的樣式提示
設定支援範本之控制項的樣式
SimpleScrollBar

Copyright © 2011 by Microsoft Corporation. All rights reserved.