重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
[源码下载]
作者:webabcd
介绍
重新想象 Windows 8 Store Apps 之 ScrollViewer
- 演示 ScrollViewer 的基本应用
- 演示 ScrollBar 的基本应用
- 演示 ScrollContentPresenter 的基本应用
示例
1、ScrollViewer 的基本应用
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 - 滚动视图内的内容IsDeferredScrollingEnabled - 是否启用延迟滚动,在滚动内容过多时,启用延迟混动可以改善性能,默认值为 falseHorizontalScrollMode - 水平滚动条的行为方式,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
<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 内的名为 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
<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 的内容呈现器(类似的有 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
[源码下载]
重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础相关推荐
- 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom...
原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...
- 重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider...
重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider 原文:重新想象 Windows 8 S ...
- 重新想象 Windows 8.1 Store Apps (79) - 控件增强: MediaElement, Frame
重新想象 Windows 8.1 Store Apps (79) - 控件增强: MediaElement, Frame 原文:重新想象 Windows 8.1 Store Apps (79) - 控 ...
- 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop...
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 原文:重新想象 Window ...
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...
重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换 原文: ...
- 重新想象 Windows 8 Store Apps (61) - 通信: http, oauth
重新想象 Windows 8 Store Apps (61) - 通信: http, oauth 原文:重新想象 Windows 8 Store Apps (61) - 通信: http, oauth ...
- 重新想象 Windows 8 Store Apps (27) - 选取器: 联系人选取窗口, 自定义联系人选取窗口...
原文:重新想象 Windows 8 Store Apps (27) - 选取器: 联系人选取窗口, 自定义联系人选取窗口 [源码下载] 重新想象 Windows 8 Store Apps (27) - ...
- 重新想象 Windows 8 Store Apps (59) - 锁屏
原文:重新想象 Windows 8 Store Apps (59) - 锁屏 [源码下载] 重新想象 Windows 8 Store Apps (59) - 锁屏 作者:webabcd 介绍 重新想象 ...
- 背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter...
原文:背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter [源码下载 ...
最新文章
- 国家集训队2009 书堆
- LeetCode 426. 将二叉搜索树转化为排序的双向链表
- python函数式编程思想_以python为例,浅谈函数式编程思想
- 如何使用 Barracuda 防火墙设置/保护 Azure 应用程序
- 外网DNS系统外网访问及邮件系统外网域名访问问题
- 达梦系统录音服务器是哪个,达梦服务器安装及使用教程
- 下一代操作系统与软件
- PIFA-平面倒F天线[搬运]
- C#WPF制作仿QQ截图工具
- HTTP: CDN缓存机制
- std::set用法
- 腾讯成立“XR”部门押注元宇宙;iPhone14全系售价上涨;新东方5 万高薪聘请双语主播 |聚观早报
- Wormhole资产跨链项目代码解析
- 1KB=多少B=多少byte=多少bit
- 控制台报错element: <Goods> - did you register the component correctly? For recursive components, make sur
- 广州市花都区2021-2022学年七年级第一学期期末考试英语试题
- 《首先,打破一切常规》读后感
- 相对论【2】杆和钟的运动
- 蓝桥杯练习系统 基础练习 全部习题 题目及AC代码(包括VIP试题)C++
- 暴雨下的O2O“青春期烦恼“