重新想象 Windows 8 Store Apps (9)
来源:互联网 发布:开票软件000013 编辑:程序博客网 时间:2024/05/29 04:28
[源码下载]
重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
作者:webabcd
介绍
重新想象 Windows 8 Store Apps 之 ScrollViewer
- 演示 ScrollViewer 的基本应用
- 演示 ScrollBar 的基本应用
- 演示 ScrollContentPresenter 的基本应用
示例
1、ScrollViewer 的基本应用
ScrollViewer/Demo.xaml
<Page x: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 - 滚动视图内的内容 IsDeferredScrollingEnabled - 是否启用延迟滚动,在滚动内容过多时,启用延迟混动可以改善性能,默认值为 false HorizontalScrollMode - 水平滚动条的行为方式,Windows.UI.Xaml.Controls.ScrollMode枚举(Disabled, Enabled, Auto) VerticalScrollMode - 垂直滚动条的行为方式 HorizontalScrollBarVisibility - 水平滚动条的可见性,Windows.UI.Xaml.Controls.ScrollBarVisibility枚举(Disabled, Auto, Hidden, Visible) VerticalScrollBarVisibility - 垂直滚动条的可见性 ViewChanged - 发生滚动时所触发的事件 --> <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 里的内容滚动到相对于 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 - 当前水平滚动条的可见性,比如当 HorizontalScrollBarVisibility 设置为 Auton 时,可以通过 ComputedHorizontalScrollBarVisibility 来判断当前水平滚动条是否可见 * ComputedVerticalScrollBarVisibility - 当前垂直滚动条的可见性 * ExtentWidth - ScrollViewer 内的内容的宽 * ExtentHeight - ScrollViewer 内的内容的高 * ViewportWidth - 可视区的宽 * ViewportHeight - 可视区的高 * HorizontalOffset - 滚动内容的水平方向的偏移量 * VerticalOffset - 滚动内容的垂直方向的偏移量 * ScrollableWidth - 可滚动区域的水平方向的大小 * ScrollableHeight - 可滚动区域的垂直方向的大小 * * 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 的基本应用
ScrollViewer/ScrollBarDemo.xaml
<Page x: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 内的名为 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 内的名为 VerticalScrollBar 的 ScrollBar 控件,即 ScrollViewer 内的垂直滚动条 var scrollBar = Helper.GetVisualChild<ScrollBar>(scrollViewer, "VerticalScrollBar"); // ValueChanged - 当滚动条的值发生改变是所触发的事件 scrollBar.ValueChanged += scrollBar_ValueChanged; } void scrollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { // 显示垂直滚动条的当前值 lblMsg.Text = e.NewValue.ToString(); } }}
3、ScrollContentPresenter 的基本应用
ScrollViewer/ScrollContentPresenterDemo.xaml
<Page x: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 的内容呈现器(类似的有 ContentPresenter, ItemsPresenter) * * ScrollContentPresenter 用来呈现 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 内的名为 ScrollContentPresenter 的 ScrollContentPresenter 控件 var scrollContentPresenter = Helper.GetVisualChild<ScrollContentPresenter>(scrollViewer, "ScrollContentPresenter"); scrollContentPresenter.Margin = new Thickness(100); } }}
OK
[源码下载]
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 重新想象 Windows 8 Store Apps (9)
- 重新想象 Windows 8 Store Apps (8)
- 重新想象 Windows 8 Store Apps (15)
- 重新想象 Windows 8 Store Apps (16)
- 重新想象 Windows 8 Store Apps (32)
- 重新想象 Windows 8 Store Apps (33)
- 重新想象 Windows 8 Store Apps (34)
- 重新想象 Windows 8 Store Apps (36)
- Windows 8 Store Apps 之 ScrollViewer
- Windows Store apps开发[57]Windows 8 开发31日
- Windows Store apps开发[28]在Windows 8 Apps中通过C#使用Web Service
- Windows Store apps[9]通知概述(Toast,Tile和Badge)
- Windows 8 Store Apps xml资源自定义缓存
- Windows Store apps开发[76]企业部署Windows 8 Store 风格应用
- Windows Store apps开发[25]Metro style apps改名为Windows Store apps
- Windows Store apps开发[23]创建Windows Store应用程序包
- Windows Store apps开发[1]平台简介
- Windows Store apps开发[13]应用程序生命周期
- SBJson
- hnust 1450 Bird tree
- ]# dmesg | grep word_count | tail -n 2 word_count_init_success
- Ubuntu11.04 autotools 安装
- A star
- 重新想象 Windows 8 Store Apps (9)
- 诺顿(Norton)免杀账号
- 第四周项目4
- 黑马程序员_数组
- oracle job不执行的分析处理
- IT之路!?
- 教你如何将uboot、linux内核和根文件系统烧写到SD卡
- Android之App Widgets开发初步
- DELPHI IDftp