2.7 ScrollViewer与ViewBox
通常情况下，当元素添加到面板之后，面板会提供尽可能大的空间来显示子元素中的内容。但是，在有些场合，由于子元素的内容过多，或者其他子元素占据的空间过大，可能会出现部分子元素的内容没有足够的空间来显示。这样，会出现部分内容被剪辑（Clipping）或被截断（Trimming）的现象。为了让用户能够看到全部内容，尤其是要在有限的手机屏幕上显示出更多的内容，让内容滚屏或者缩放显示是不错的选择。
可用于滚屏和缩放的控件分别是ScrollViewer和ViewBox。
2.7.1 ScrollViewer
ScrollViewer控件提供了垂直滚动条和水平滚动条，允许用户上下或左右滚动显示大容量内容。如以下代码对比了未使用ScrollViewer和使用ScrollViewer后，大段文字显示情况的差别。
XAML代码：Scrollviewer.xaml
<Grid x：Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="20" Text="面板给了元件提供了存放的空间与放置的方式，但是子元素还可以决定自己在面板空间中的对齐方式。如同Windows Form或Asp.NET网页设计中一样，控件在Form窗口或表单中可以自己设置对齐方式，Silverlight for Windows Phone中的子元件可以通过设置属性HorizontalAlign ment与VerticalAlignment的值来确定在面板中位置的对齐方式，还可以通过HorizontalContent Alignment和VerticalContentAlignment来设置子元件中内容的对齐方式。
HorizontalAlignment表示子元件的水平对齐方式，可以取的值包括Left、Center、Right和Stretch，分别表示在水平方向子元件左对齐、中间对齐、右对齐和两端对齐。
VerticalAlignment表示子元件的垂直对齐方式，可以取的值包括Top、Center、Bottom和Stretch，分别对应顶端对齐、居中对齐、底边对齐和上下两端对齐。" TextWrapping="Wrap">
</TextBlock>
<ScrollViewer Grid.Row="1" Margin="2" BorderBrush="Blue" Border Thickness="1" VerticalScrollBarVisibility="Hidden">
<TextBlock Text="面板给了元件提供了存放的空间与放置的方式，但是子元素还可以决定自己在面板空间中的对齐方式。如同Windows Form或Asp.NET网页设计中一样，控件在Form窗口或表单中可以自己设置对齐方式，Silverlight for Windows Phone中的子元件可以通过设置属性HorizontalAlignment与VerticalAlignment的值来确定在面板中位置的对齐方式，还可以通过HorizontalContentAlignment和VerticalContentAlignment来设置子元件中内容的对齐方式。
HorizontalAlignment表示子元件的水平对齐方式，可以取的值包括Left、Center、Right和Stretch，分别表示在水平方向子元件左对齐、中间对齐、右对齐和两端对齐。
VerticalAlignment表示子元件的垂直对齐方式，可以取的值包括Top、Center、Bottom和Stretch，分别对应顶端对齐、居中对齐、底边对齐和上下两端对齐。" TextWrapping="Wrap"></TextBlock>
</ScrollViewer>
</Grid>
程序执行的效果如图2-19所示。第一个TextBlock由于空间不足，剩余的文字内容被截断，没有显示出来；第二个TextBlock放在ScrollViewer控件中，用户可以通过上下滚动来显示后续文字内容。
ScrollViewer的重要属性有如下两个：
HorizontalScrollBarVisibility。用于设置是否显示水平滚动条，可以设置的值有Auto、Disabled、Hidden、Visible。
VerticalScrollBarVisibility。用于设置是否显示垂直滚动条，可以设置的值也包括Auto、Disabled、Hidden、Visible。
➢Auto。表示自动显示滚动条，系统根据内容的量和元素的高度（Height）、宽度（Width）设置值，自动计算，在需要时显示滚动条。
➢Disabled。表示滚动条不可用，与没有使用ScrollViewer情况是相同的。
➢Hidden。表示滚动条不可见，但内容可以滚动显示。
➢Visible。显示滚动条。当空间足够时，也显示滚动条。
图2-19 ScrollViewer的使用
2.7.2 ViewBox
ViewBox提供了一种缩放机制，用于对放置于其中的子元素进行缩放。缩放的方式取决于属性Stretch的取值。Stretch是System.Windows.Media.Stretch类的枚举类值，可以取的值包括None、Fill、Uniform、UniformToFill4种，其中Uniform是默认值。这些取值的含义如下：
- None。不对子元素进行缩放，这与没有使用ViewBox效果是一样的。
- Fill。拉伸子元素，使子元素填充满整个ViewBox，这时子元素的高度和宽度分别是ViewBox的高度和宽度。这种情况有可能造成比例失调。
- Uniform。在保持子元素高度与宽度比例的前提下，放大或缩小子元素并填充到ViewBox中。因此，有可能在ViewBox的水平或垂直方向出现多余空间。
- UniformToFill。同样在保持子元素高度与宽度比例的前提下，缩放填充子元素到ViewBox中，但是可能会出现某一方向填满，而另一方向出现空间不足被截断的情况。
如以下代码，将同一图片放到4个ViewBox中，由于Stretch的设置值不同，出现了4种不同的显示效果。
XAML代码：ViewBox.xaml
<Grid x：Name="ContentPanel" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Stretch="None" Name="view">
<Image Source="/Images/Penguins.jpg" HorizontalAlignment=" Center" VerticalAlignment="Center" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Fill" Name="view1">
<Image Source="/Images/Penguins.jpg" HorizontalAlignment=" Center" VerticalAlignment="Center" />
</Viewbox>
<Viewbox Grid.Row="1" Stretch="Uniform" Name="view2">
<Image Source="/Images/Penguins.jpg" HorizontalAlignment=" Center" VerticalAlignment="Center" />
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill" N ame="view3">
<Image Source="/Images/Penguins.jpg" HorizontalAlignment="C enter" VerticalAlignment="Center" />
</Viewbox>
</Grid>
代码执行结果如图2-20所示。左上ViewBox的Stretch属性设置为None，因此，在图片太大时，只能显示部分图片内容；右上，设置为Fill，按ViewBox的宽度与高度分别缩放图片的宽度与高度，图片虽然被完整填充，但出现比例失调的问题；左下，设置为Uniform，图片按原比例缩放后填到ViewBox，在垂直方向出现空余；右下，设置为UniformToFill，图片按比例缩放，并且垂直方向被完整填充，但水平方向出现剪辑。
图2-20 使用ViewBox的显示效果
（左上：None，右上：Fill，左下：Uniform，右下：UniformToFill）