WPF - 10.特殊容器控件

摘要

这里我们要介绍的特殊容器空间是ScrollViewer，该控件与其他控件不同的是，可以支持滚动显示容器内的元素。 下面我们举例说明如何在WPF中使用ScrollViewer控件。

新建一个WPF程序，在Grid面板中加入ScrollViewer控件，然后在控件里面拖入一个TexBox用来显示文字，拖动时注意将窗口大小设置小一点，把TextBox的大小设置大一点，让里面的文字不能够全部看完，需要拖动滚动条才可以看完全部内容。

我们给TextBox里面增加一些文字内容，设置TextWrapping属性的值为Wrap使文本框内的文字自动换行。 我们还可以设置ScrollViewer控件的
HorizontalScrollBarVisibility和
VerticalScrollBarVisibility属性来设置水平和垂直滚动条的显示效果，我们这里设置为Auto即可。

正文

ScrollViewer有一个滚动条设置的属性，在垂直方向有
VerticalScrollBarVisibility=“Hidden” 有四种取值，分别是：

• Visible：显示滚动条
• Hidden：隐藏滚动条，用光标仍然可以滚动内容
• Disable：隐藏滚动条，用光标不可以滚动内容
• Auto：只有当内容超出容器时才会显示滚动条

以上四种取值均可用滑轮滚动内容。 在水平方向，也有
HorizontalScrollBarVisibility属性。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <ScrollViewer Margin="10"  VerticalScrollBarVisibility="Auto" Name="sv">
        <TextBox Height="350" TextWrapping="Wrap" Text="this is test" Name="txt"></TextBox>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal" Grid.Row="1">
        <Button x:Name="btnTop" Content="Top" Margin="5" Click="btnTop_Click"></Button>
        <Button x:Name="btnUp" Content="Line Up" Click="btnUp_Click" Margin="5"></Button>
        <Button x:Name="btnDown" Content="Line Down" Click="btnDown_Click"  Margin="5"></Button>
        <Button x:Name="btnPageUp" Content="Page Up" Click="btnPageUp_Click"  Margin="5"></Button>
        <Button x:Name="btnEnd" Content="End" Margin="5" Click="btnEnd_Click"></Button>
    </StackPanel>
</Grid>

private void btnTop_Click(object sender,RoutedEventArgs e)
{
    this.sv.ScrollToTop();  //顶部
}
private void btnUp_Click(object sender, RoutedEventArgs e)
{
    sv.LineUp();//上一行
}
private void btnPageUp_Click(object sender, RoutedEventArgs e)
{
    sv.PageUp();//上一页
}
private void btnEnd_Click(object sender, RoutedEventArgs e)
{
    this.sv.ScrollToEnd();  //底部
}

private void btnDown_Click(object sender, RoutedEventArgs e)
{
    sv.LineDown();//下一行
}

private void btnPageDown_Click(object sender, RoutedEventArgs e)
{
    sv.PageDown();//下一页
}

<ScrollViewer Margin="5" CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <StackPanel Margin="2">
        <Button Content="Button1" Margin="5" Height="50"></Button>
        <Button Content="Button2" Margin="5" Height="50"></Button>
        <Button Content="Button3" Margin="5" Height="50"></Button>
        <Button Content="Button4" Margin="5" Height="50"></Button>
    </StackPanel>
</ScrollViewer>

在点击滚动条上下按键时无法保证让某一个控件完全显示，此时只要将ScrollViewer的CanContentScroll属性设为True即可