zoukankan      html  css  js  c++  java
  • Silverlight实用窍门系列:69.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;
            }
    
        }

      最后如需源码请点击 SLScrollView.zip 下载,实例效果图如下:


     

  • 相关阅读:
    [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy
    [Redux] Reducer Composition with Arrays
    [Redux] Writing a Todo List Reducer (Toggling a Todo)
    [Redux] Writing a Todo List Reducer (Adding a Todo)
    [Javascript] Advanced Reduce: Common Mistakes
    [Javascript] Advanced Reduce: Additional Reducer Arguments
    [Redux] Avoiding Object Mutations with Object.assign() and ...spread
    [Javascript] Introducing Reduce: Common Patterns
    AI-Info-Micron-Insight:工业 5.0,伟大的思想将殊途同归
    AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现、倾听和感觉
  • 原文地址:https://www.cnblogs.com/chengxingliang/p/2542139.html
Copyright © 2011-2022 走看看