Silverlight实用窍门系列：69.Silverlight的ScrollViewer

转载于 2017-11-13 18:01:00 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/468285

本文详细介绍了Silverlight中ScrollViewer控件的使用方法及其属性，包括如何设置和获取滚动条的可见性和偏移量等，并提供了一个具体的应用实例。

　ScrollViewer在Silverlight中是一个很常用的控件，它有以下一些常用可设置属性：

　　HorizontalScrollBarVisibility：水平方向滚动条

　　VerticalScrollBarVisibility：垂直方向滚动条，其值为ScrollBarVisibility枚举类型分为

　　　　Disabled：不显示，但是可以通过鼠标或者键盘移动文字内容

　　　　Auto:根据内容宽度和高度自动决定是否出现滚动条

　　　　Hidden:总是隐藏滚动条,无法移动被遮挡的内容

　　　　Visible:总是显示滚动条

　　ScrollToHorizontalOffset:设置ScrollViewer的内容水平偏移量

　　ScrollToVerticalOffset:设置ScrollViewer的内容垂直偏移量

　　Scrollviewer的只可获取属性如下：

　　VerticalOffset:内容的垂直偏移量

　　HorizontalOffset:内容的水平偏移量

　　ExtentHeight:内容的总垂直高度

　　ExtentWidth:内容的总水平宽度

　　ViewportHeight:可见内容的垂直高度

　　ViewportWidth:可见内容窗口的水平宽度

　　ActualHeight:ScrollViewer控件的实际高度

　　ActualHeight:ScrollViewer控件的实际宽度

　　下面我们通过一个实例来看ScrollViewer的具体应用以及获取他们的值，Xaml代码如下：

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <ScrollViewer Name="sView" Height="300" Width="300" 
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto" >
                <ScrollViewer.Content>
                    <Canvas  Height="400" Width="400">
                        <Rectangle  Name="retBlue" Width="200" Height="200" Fill="#FF45C2AD" />
                        <Rectangle  Name="retBlue2" Width="200" Height="200" 
                                    Fill="#FFC24588" Canvas.Left="200"  />
                        <Rectangle  Name="retBlue3" Width="200" Height="200"
                                    Fill="#FFB8C245"  Canvas.Top="200" />
                        <Rectangle  Name="retBlue4" Width="200" Height="200"
                                    Fill="#FF4532AD"  Canvas.Top="200" Canvas.Left="200" />
                    </Canvas>
                </ScrollViewer.Content> 
        </ScrollViewer>
            <Button Canvas.Left="314" Canvas.Top="45" Content="设 置"
                    Height="23" Name="button1" Width="75" Click="button1_Click" />
            <Button Canvas.Left="314" Canvas.Top="85" Content="查 看" 
                    Height="23" Name="button2" Width="75" Click="button2_Click" />
            <sdk:Label Canvas.Left="14" Canvas.Top="306" Height="28" Name="label1" Width="125" />
            <sdk:Label Canvas.Left="175" Canvas.Top="306" Height="28" Name="label2" Width="125" />
            <sdk:Label Canvas.Left="14" Canvas.Top="332" Height="28" Name="label3" Width="125" />
            <sdk:Label Canvas.Left="175" Canvas.Top="332" Height="28" Name="label4" Width="125" />
            <sdk:Label Canvas.Left="14" Canvas.Top="358" Height="28" Name="label5" Width="125" />
            <sdk:Label Canvas.Left="175" Canvas.Top="358" Height="28" Name="label6" Width="125" />
            <sdk:Label Canvas.Left="13" Canvas.Top="384" Height="28" Name="label7" Width="125" />
            <sdk:Label Canvas.Left="174" Canvas.Top="384" Height="28" Name="label8" Width="125" />
        </Canvas>
    </Grid>

　　然后我们来看其cs后台代码如下：

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        bool show = true;
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (show)
            {
                //设置ScrollViewer的内容水平偏移量
                this.sView.ScrollToHorizontalOffset(50);
                //设置ScrollViewer的内容垂直偏移量
                this.sView.ScrollToVerticalOffset(50);
            }
            else
            {
                this.sView.ScrollToHorizontalOffset(0);
                this.sView.ScrollToVerticalOffset(0);
            }
            show = !show;
           
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            //内容的垂直偏移量
            string vo = sView.VerticalOffset.ToString();
            //内容的水平偏移量
            string ho = sView.HorizontalOffset.ToString();
            //内容的总垂直高度
            string eh = sView.ExtentHeight.ToString();
            //内容的总水平宽度
            string ew = sView.ExtentWidth.ToString();
            //可见内容的垂直高度
            string vh = sView.ViewportHeight.ToString();
            //可见内容窗口的水平宽度
            string vw = sView.ViewportWidth.ToString();
            //ScrollViewer控件的实际高度
            string ah = sView.ActualHeight.ToString();
            //ScrollViewer控件的实际宽度
            string aw = sView.ActualHeight.ToString();
            this.label1.Content = "VerticalOffset:" + vo;
            this.label2.Content = "HorizontalOffset:" + ho;
            this.label3.Content = "ExtentHeight:" + eh;
            this.label4.Content = "ExtentWidth:" + ew;
            this.label5.Content = "ViewportHeight:" + vh;
            this.label6.Content = "ViewportWidth:" + vw;
            this.label7.Content = "ActualHeight:" + ah;
            this.label8.Content = "ActualHeight:" + aw;
            sView.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled;
        }

    }