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 下載,實例效果圖如下: