ScrollViewer 控件样式提示

可以使用内置的 ScrollViewer 控件模板创建自定义的 ScrollViewer 模板。默认情况下， ScrollViewer 控件如下所示：

ScrollViewer 模板的部件

ScrollViewer 模板包含以下部件：

部件名称	对象类型
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

提示：
若要查看模板的部件，请在修改模板的同时打开“部件”面板。

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)。

请务必注意，前面的图形尚不是滚动查看器，而是类似于滚动查看器的作品。

本例在以下过程的步骤 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. 单击“返回到范围” 以返回到“ScrollViewerStyle1(ScrollViewerTemplate)”。

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”。在美工板上，单击控件上方的蓝色边框，然后拖动橙色箭头，直到它刚好位于滚动条旁边，如下图中所示：

    

11. 对于右侧的列，单击“星形” 两次。“自动”图标 将会出现。

12. 在“对象和时间线”面板中，单击“ScrollContentPresenter”。在“属性”面板的“布局”类别中，在“ColumnSpan”右侧单击“高级选项”，然后单击“重置”。

13. 在“对象和时间线”面板中，单击“VerticalScrollBar”。在“属性”面板的“布局”类别中，在“Margin”右侧单击“高级选项”，然后单击“重置”。

14. 名为 content 的对象仍会保留在该模板中。此对象是 200 个像素见方的矩形，在其上计划滚动 146 个像素见方的 ScrollViewer 。下一步是从模板中剪切它，然后粘贴到“ScrollViewer”的“Content”属性中。“ScrollContentPresenter”随后将显示它。在“对象和时间线”面板中，右键单击“content”，然后单击“剪切”。

15. 单击“返回到范围”，然后按 Ctrl+V 将“content”粘贴到“ScrollViewer”的“Content”属性中。

16. 按 Ctrl+Shift+B 生成项目，然后按 F5 测试项目。

    重要须知：
    除非按照步骤 7 所述使用 ScrollBar 控件样式提示设置了 ScrollBar 的样式，否则 ListBox 将不会按预期方式工作。

有关向其他 ComboBox 对象应用新的 ComboBox 模板的信息，请参阅应用或删除资源。

引用

您可以在 MSDN 上的 Silverlight Control Gallery （Silverlight 控件库）中找到关于 Silverlight ScrollViewer 控件的属性和事件的详细信息。

另请参阅

概念

常用 Silverlight 控件的样式提示
设置支持模板的控件的样式
SimpleScrollBar

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。