原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基礎(chǔ)

[源碼下載]

重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基礎(chǔ)

作者：webabcd


介紹
重新想象 Windows 8 Store Apps 之?ScrollViewer

• 演示 ScrollViewer 的基本應(yīng)用
• 演示 ScrollBar 的基本應(yīng)用
• 演示 ScrollContentPresenter 的基本應(yīng)用

示例
1、ScrollViewer 的基本應(yīng)用
ScrollViewer/Demo.xaml

<Pagex:Class="XamlDemo.Controls.ScrollViewer.Demo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Controls.ScrollViewer"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="120 0 0 0"><TextBlock Name="lblMsg" /><!--ScrollViewer - 滾動視圖控件Content - 滾動視圖內(nèi)的內(nèi)容IsDeferredScrollingEnabled - 是否啟用延遲滾動，在滾動內(nèi)容過多時，啟用延遲混動可以改善性能，默認值為 falseHorizontalScrollMode - 水平滾動條的行為方式，Windows.UI.Xaml.Controls.ScrollMode枚舉（Disabled, Enabled, Auto）VerticalScrollMode - 垂直滾動條的行為方式HorizontalScrollBarVisibility - 水平滾動條的可見性，Windows.UI.Xaml.Controls.ScrollBarVisibility枚舉（Disabled, Auto, Hidden, Visible）VerticalScrollBarVisibility - 垂直滾動條的可見性ViewChanged - 發(fā)生滾動時所觸發(fā)的事件--><ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="0 10 0 0" HorizontalAlignment="Left"IsDeferredScrollingEnabled="False"ViewChanged="scrollViewer_ViewChanged_1"HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"><ScrollViewer.Content><Image Source="/Assets/Logo.png" Width="1000" /></ScrollViewer.Content></ScrollViewer><StackPanel Orientation="Horizontal"><!--使 ScrollViewer 里的內(nèi)容滾動到相對于 ScrollViewer 居中--><Button Content="居中" Click="Button_Click_1" /></StackPanel></StackPanel></Grid> </Page>

ScrollViewer/Demo.xaml.cs

/** ScrollViewer - 滾動視圖控件* * 本例用于演示 ScrollViewer 的基本用法*/using Windows.UI.Xaml; using Windows.UI.Xaml.Controls;namespace XamlDemo.Controls.ScrollViewer {public sealed partial class Demo : Page{public Demo(){this.InitializeComponent();}private void scrollViewer_ViewChanged_1(object sender, ScrollViewerViewChangedEventArgs e){lblMsg.Text = "";/** ScrollViewer - 滾動視圖控件* ComputedHorizontalScrollBarVisibility - 當(dāng)前水平滾動條的可見性，比如當(dāng) HorizontalScrollBarVisibility 設(shè)置為 Auton 時，可以通過 ComputedHorizontalScrollBarVisibility 來判斷當(dāng)前水平滾動條是否可見* ComputedVerticalScrollBarVisibility - 當(dāng)前垂直滾動條的可見性* ExtentWidth - ScrollViewer 內(nèi)的內(nèi)容的寬* ExtentHeight - ScrollViewer 內(nèi)的內(nèi)容的高* ViewportWidth - 可視區(qū)的寬* ViewportHeight - 可視區(qū)的高* HorizontalOffset - 滾動內(nèi)容的水平方向的偏移量* VerticalOffset - 滾動內(nèi)容的垂直方向的偏移量* ScrollableWidth - 可滾動區(qū)域的水平方向的大小* ScrollableHeight - 可滾動區(qū)域的垂直方向的大小* * ScrollToHorizontalOffset() - 滾動到指定的水平偏移位置* ScrollToVerticalOffset() - 滾動到指定的垂直偏移位置*/lblMsg.Text += "ComputedHorizontalScrollBarVisibility: " + scrollViewer.ComputedHorizontalScrollBarVisibility;lblMsg.Text += "\r\n";lblMsg.Text += "ComputedVerticalScrollBarVisibility: " + scrollViewer.ComputedVerticalScrollBarVisibility;lblMsg.Text += "\r\n";lblMsg.Text += "ExtentWidth: " + scrollViewer.ExtentWidth;lblMsg.Text += "\r\n";lblMsg.Text += "ExtentHeight: " + scrollViewer.ExtentHeight;lblMsg.Text += "\r\n";lblMsg.Text += "ViewportWidth: " + scrollViewer.ViewportWidth;lblMsg.Text += "\r\n";lblMsg.Text += "ViewportHeight: " + scrollViewer.ViewportHeight;lblMsg.Text += "\r\n";lblMsg.Text += "HorizontalOffset: " + scrollViewer.HorizontalOffset;lblMsg.Text += "\r\n";lblMsg.Text += "VerticalOffset: " + scrollViewer.VerticalOffset;lblMsg.Text += "\r\n";lblMsg.Text += "ScrollableWidth: " + scrollViewer.ScrollableWidth;lblMsg.Text += "\r\n";lblMsg.Text += "ScrollableHeight: " + scrollViewer.ScrollableHeight;lblMsg.Text += "\r\n";}private void Button_Click_1(object sender, RoutedEventArgs e){scrollViewer.ScrollToHorizontalOffset(scrollViewer.ScrollableWidth / 2);scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight / 2);}} }

2、ScrollBar 的基本應(yīng)用
ScrollViewer/ScrollBarDemo.xaml

<Pagex:Class="XamlDemo.Controls.ScrollViewer.ScrollBarDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Controls.ScrollViewer"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="120,0,0,0"><TextBlock Name="lblMsg" FontSize="14.667" HorizontalAlignment="Left" /><ScrollViewer Name="scrollViewer" Width="400" Height="200" HorizontalAlignment="Left"><Image Source="/Assets/Logo.png" Width="1000" /></ScrollViewer></StackPanel></Grid> </Page>

ScrollViewer/ScrollBarDemo.xaml.cs

/** ScrollBar - 滾動條控件* * 本例通過訪問 ScrollViewer 內(nèi)的名為 VerticalScrollBar 的 ScrollBar 控件，來簡要說明 ScrollBar 控件*/using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using XamlDemo.Common;namespace XamlDemo.Controls.ScrollViewer {public sealed partial class ScrollBarDemo : Page{public ScrollBarDemo(){this.InitializeComponent();this.Loaded += ScrollBarDemo_Loaded;}void ScrollBarDemo_Loaded(object sender, RoutedEventArgs e){// 找到 ScrollViewer 內(nèi)的名為 VerticalScrollBar 的 ScrollBar 控件，即 ScrollViewer 內(nèi)的垂直滾動條var scrollBar = Helper.GetVisualChild<ScrollBar>(scrollViewer, "VerticalScrollBar");// ValueChanged - 當(dāng)滾動條的值發(fā)生改變是所觸發(fā)的事件scrollBar.ValueChanged += scrollBar_ValueChanged;}void scrollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e){// 顯示垂直滾動條的當(dāng)前值lblMsg.Text = e.NewValue.ToString();}} }

3、ScrollContentPresenter 的基本應(yīng)用
ScrollViewer/ScrollContentPresenterDemo.xaml

<Pagex:Class="XamlDemo.Controls.ScrollViewer.ScrollContentPresenterDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Controls.ScrollViewer"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="120 0 0 0"><ScrollViewer Name="scrollViewer" Width="400" Height="400" Background="Blue" HorizontalAlignment="Left"HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"><ScrollViewer.Content><Image Source="/Assets/Logo.png" Width="1000" /></ScrollViewer.Content></ScrollViewer></StackPanel></Grid> </Page>

ScrollViewer/ScrollContentPresenterDemo.xaml.cs

/** ScrollContentPresenter - ScrollViewer 的內(nèi)容呈現(xiàn)器（類似的有 ContentPresenter, ItemsPresenter）* * ScrollContentPresenter 用來呈現(xiàn) ScrollViewer 的 Content*/using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using XamlDemo.Common;namespace XamlDemo.Controls.ScrollViewer {public sealed partial class ScrollContentPresenterDemo : Page{public ScrollContentPresenterDemo(){this.InitializeComponent();this.Loaded += ScrollContentPresenterDemo_Loaded;}void ScrollContentPresenterDemo_Loaded(object sender, RoutedEventArgs e){// 找到 ScrollViewer 內(nèi)的名為 ScrollContentPresenter 的 ScrollContentPresenter 控件var scrollContentPresenter = Helper.GetVisualChild<ScrollContentPresenter>(scrollViewer, "ScrollContentPresenter");scrollContentPresenter.Margin = new Thickness(100);}} }

OK
[源碼下載]

總結(jié)

以上是生活随笔為你收集整理的重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。