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

[源码下载]

重新想象 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 / );
scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight / );
}
}
}

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();
}
}
}

OK
[源码下载]

重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础的更多相关文章

  1. 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

    原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...

  2. 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

    原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...

  3. 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager

    原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...

  4. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

  5. 重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding

    原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...

  6. 重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom

    原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...

  7. 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示

    原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...

  8. 重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView

    原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...

  9. 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

    原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...

随机推荐

  1. 程序缩小到托盘后系统就无法关机(解决方案)——处理WM_QUERYENDSESSION消息,并把它标识为处理过了

    程序缩小到托盘后系统就无法关机(解决方案)                       老帅    程序最小化到托盘后,会出现系统无法关闭的问题,常见于WinXP系统中,这里提供一个解决方案!一.解决 ...

  2. delphi 回调函数

    program Project2; {$APPTYPE CONSOLE} uses SysUtils; type //定义一个对象事件方法 TCallbackFunc = function (i: I ...

  3. thinkPHP框架介绍(一)

    原文:thinkPHP框架介绍(一) 一.ThinkPHP的介绍 期间有对ThinkPHP框架在学习上的问题欢迎大家交流:QQ:812231134 MVC M - Model 模型           ...

  4. SuSE(SLES)安装配置syslog-ng日志server,可整合splunk

    Update History 2014年04月25日 - 撰写初稿 引言 在自己主动化部署AutoYast.自己主动化监控BMC Patrol双方面形成雏形后.日志的收集.管理.分析也顺势成为我们须要 ...

  5. window.open()具体解释及浏览器兼容性问题

    一.基本的语法:window.open(pageURL,name,parameters)当中:pageURL 为子窗体路径name  为子窗体名字parameters 为窗体參数(各參数用逗号分隔) ...

  6. Swift供选链接

    函数是运行特定任务的代码自包括块. 给定一个函数名称标识, 当运行其任务时就能够用这个标识来进行"调用". Swift的统一的功能语法足够灵活来表达不论什么东西,不管是甚至没有參数 ...

  7. hdu 5056Boring count

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=5056 题目大意:就是问在子串中每一个小写字母出现次数不超过k次的个数,注意子串是连续的子串.. . ...

  8. document.write()相关

    原文地址:http://www.cnblogs.com/dh616854836/articles/2140349.html document.write()脚本向窗口(不管是本窗口或其他窗口)写完内容 ...

  9. python六核心编程——条件和循环

    1.if声明 单 if 通过使用布尔运算符的声明 and , or 和 not. if-elif-else. elif即else if if expression1:      expr1_true_ ...

  10. 《effective java》读书札记第三条用私有构造器或者枚举类型强化Singleton属性

    Singleton指只被实例化一次的类.一般用来搞那些创建很耗资源或者要求系统中只能有一个实例的类. 这个很经常使用.记得曾经实习面试的时候就有这个面试题. 一般採用的方法是将构造器私有化,然后提供一 ...