背水一战 Windows 10 (46)

2440

　　[源码下载]




背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter　　
作者：webabcd

介绍
背水一战 Windows 10 之 控件（ScrollViewer 基础）

• ScrollViewer
  
• ScrollBar
  
• ScrollContentPresenter
  

　　
示例
1、ScrollViewer 的基本应用
Controls/ScrollViewerDemo/ScrollViewerDemo.xaml



<Page
x:Class="Windows10.Controls.ScrollViewerDemo.ScrollViewerDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
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="10 0 10 10">
<StackPanel Orientation="Horizontal" Margin="5">
<!--
ScrollViewer - 滚动视图控件
Content - 滚动视图内的内容（[ContentProperty(Name = "Content")]）
IsDeferredScrollingEnabled - 是否启用延迟滚动，在滚动内容过多时，启用延迟混动可以改善性能，默认值为 false
HorizontalScrollMode - 水平滚动模式
Disabled - 禁用
Enabled - 启用
Auto - 同 Enabled
VerticalScrollMode - 垂直滚动模式
Disabled - 禁用
Enabled - 启用
Auto - 同 Enabled
HorizontalScrollBarVisibility - 水平滚动条的可见性
Auto - 自动。内容显示得下就隐藏滚动条，内容显示不下就显示滚动条
Visible - 显示滚动条
Hidden - 隐藏滚动条
Disabled - 隐藏滚动条，并将 HorizontalScrollMode 强制设置为 Disabled
VerticalScrollBarVisibility - 垂直滚动条的可见性
Auto - 自动。内容显示得下就隐藏滚动条，内容显示不下就显示滚动条
Visible - 显示滚动条
Hidden - 隐藏滚动条
Disabled - 隐藏滚动条，并将 VerticalScrollMode 强制设置为 Disabled
ViewChanging - 在视图即将发生变化（滚动或缩放等）时触发的事件
ViewChanged - 在视图已经发生变化（滚动或缩放等）后触发的事件
DirectManipulationStarted - 触摸环境下操作（滚动或缩放等）即将开始时触发的事件
DirectManipulationCompleted - 触摸环境下操作（滚动或缩放等）已经完成后触发的事件
-->
<ScrollViewer Name="scrollViewer" Width="400" Height="400" HorizontalAlignment="Left"
IsDeferredScrollingEnabled="False"
HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
ViewChanging="scrollViewer_ViewChanging"
ViewChanged="scrollViewer_ViewChanged"
DirectManipulationStarted="scrollViewer_DirectManipulationStarted"
DirectManipulationCompleted="scrollViewer_DirectManipulationCompleted">
<ScrollViewer.Content>
<Image Source="/Assets/StoreLogo.png" Width="1000" Margin="5" />
</ScrollViewer.Content>
</ScrollViewer>
<!--
ScrollViewer - 滚动视图控件
TopHeader - 显示在上端的内容，垂直滚动时不动
LeftHeader - 显示在左端的内容，水平滚动时不动
TopLeftHeader - 显示在左上端的内容，垂直滚动和水平滚动时均不动
注：如果要使用 TopHeader, LeftHeader, TopLeftHeader 则 ScrollViewer.Content 中的内容必须是 HorizontalAlignment="Left" VerticalAlignment="Top"
-->
<ScrollViewer Width="400" Height="400" HorizontalAlignment="Left" Margin="20 0 0 0"
HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<ScrollViewer.Content>
<Image Source="/Assets/StoreLogo.png" Width="1000" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" />
</ScrollViewer.Content>
<ScrollViewer.TopHeader>
<TextBlock Text="TopHeader" />
</ScrollViewer.TopHeader>
<ScrollViewer.LeftHeader>
<TextBlock Text="LeftHeader" />
</ScrollViewer.LeftHeader>
<ScrollViewer.TopLeftHeader>
<TextBlock Text="TopLeftHeader" />
</ScrollViewer.TopLeftHeader>
</ScrollViewer>
</StackPanel>
<!--使 ScrollViewer 里的内容滚动到相对于 ScrollViewer 居中的位置-->
<Button Name="btnChangeView" Content="居中" Margin="5" Click="btnChangeView_Click" />
<TextBlock Name="lblMsg" Margin="5" />
</StackPanel>
</Grid>
</Page>
　　Controls/ScrollViewerDemo/ScrollViewerDemo.xaml.cs



/*
* ScrollViewer - 滚动视图控件（继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/）
*     ComputedHorizontalScrollBarVisibility - 当前水平滚动条的可见性（Visible, Collapsed）
*     ComputedVerticalScrollBarVisibility - 当前垂直滚动条的可见性（Visible, Collapsed）
*     ExtentWidth - ScrollViewer 内的内容的宽
*     ExtentHeight - ScrollViewer 内的内容的高
*     ViewportWidth - 可视区的宽
*     ViewportHeight - 可视区的高
*     HorizontalOffset - 滚动内容的水平方向的偏移量
*     VerticalOffset - 滚动内容的垂直方向的偏移量
*     ScrollableWidth - 水平滚动区域的大小（即 HorizontalOffset 的最大值，也就是 ExtentWidth - ViewportWidth）
*     ScrollableHeight - 垂直滚动区域的大小（即 VerticalOffset 的最大值，也就是 ExtentHeight - ViewportHeight）
*     
*     bool ChangeView(double? horizontalOffset, double? verticalOffset, float? zoomFactor, bool disableAnimation) - 改变内容的显示
*         用于取代如下这些已经弃用的方法 ScrollToHorizontalOffset(double offset), ScrollToVerticalOffset(double offset), ZoomToFactor(float factor)
*         
*     另外还有一堆对应的附加属性和静态方法，内嵌 ScrollViewer 的控件一般均支持，不再详述。简单示例可参见：/Controls/CollectionControl/ListViewBaseDemo/ListViewBaseDemo1.xaml
*
*
* 本例用于演示 ScrollViewer 的基本用法
*/
using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Windows10.Controls.ScrollViewerDemo
{
public sealed partial class ScrollViewerDemo : Page
{
public ScrollViewerDemo()
{
this.InitializeComponent();
}
private void scrollViewer_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
{
Debug.WriteLine("scrollViewer_ViewChanging");
}
private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
Debug.WriteLine("scrollViewer_ViewChanged");
lblMsg.Text = "ComputedHorizontalScrollBarVisibility: " + scrollViewer.ComputedHorizontalScrollBarVisibility;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ComputedVerticalScrollBarVisibility: " + scrollViewer.ComputedVerticalScrollBarVisibility;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ExtentWidth: " + scrollViewer.ExtentWidth;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ExtentHeight: " + scrollViewer.ExtentHeight;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ViewportWidth: " + scrollViewer.ViewportWidth;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ViewportHeight: " + scrollViewer.ViewportHeight;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "HorizontalOffset: " + scrollViewer.HorizontalOffset;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "VerticalOffset: " + scrollViewer.VerticalOffset;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ScrollableWidth: " + scrollViewer.ScrollableWidth;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "ScrollableHeight: " + scrollViewer.ScrollableHeight;
lblMsg.Text += Environment.NewLine;
// 在操作中返回 true, 操作结束返回 false
lblMsg.Text += "ScrollViewerViewChangedEventArgs.IsIntermediate: " + e.IsIntermediate;
}
private void scrollViewer_DirectManipulationCompleted(object sender, object e)
{
Debug.WriteLine("scrollViewer_DirectManipulationCompleted");
}
private void scrollViewer_DirectManipulationStarted(object sender, object e)
{
Debug.WriteLine("scrollViewer_DirectManipulationStarted");
}
private void btnChangeView_Click(object sender, RoutedEventArgs e)
{
scrollViewer.ChangeView(scrollViewer.ScrollableWidth / 2, scrollViewer.ScrollableHeight / 2, null, false);
}
}
}
　　
2、ScrollBar 的示例
Controls/ScrollViewerDemo/ScrollBarDemo.xaml



<Page
x:Class="Windows10.Controls.ScrollViewerDemo.ScrollBarDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
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="10 0 10 10">
<ScrollViewer Name="scrollViewer" Width="400" Height="200" Margin="5" HorizontalAlignment="Left">
<Image Source="/Assets/StoreLogo.png" Width="1000" />
</ScrollViewer>
<TextBlock Name="lblMsg" Margin="5" />
</StackPanel>
</Grid>
</Page>
　　Controls/ScrollViewerDemo/ScrollBarDemo.xaml.cs



/*
* ScrollBar - 滚动条控件（继承自 RangeBase, 请参见 /Controls/ProgressControl/RangeBaseDemo.xaml）
*
* 本例通过访问 ScrollViewer 内的名为 VerticalScrollBar 的 ScrollBar 控件，来简要说明 ScrollBar 控件
*/
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows10.Common;
namespace Windows10.Controls.ScrollViewerDemo
{
public sealed partial class ScrollBarDemo : Page
{
public ScrollBarDemo()
{
this.InitializeComponent();
this.Loaded += ScrollBarDemo_Loaded;
}
private 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 的示例
Controls/ScrollViewerDemo/ScrollContentPresenterDemo.xaml



<Page
x:Class="Windows10.Controls.ScrollViewerDemo.ScrollContentPresenterDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
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="10 0 10 10">
<ScrollViewer Name="scrollViewer" Width="400" Height="400" Background="Blue" HorizontalAlignment="Left"
HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<ScrollViewer.Content>
<Image Source="/Assets/StoreLogo.png" Width="1000" />
</ScrollViewer.Content>
</ScrollViewer>
</StackPanel>
</Grid>
</Page>
　　Controls/ScrollViewerDemo/ScrollContentPresenterDemo.xaml.cs



/*
* ScrollContentPresenter - ScrollViewer 的内容呈现器，其用来呈现 ScrollViewer 的 Content（继承自 ContentPresenter, 请参见 /Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml）
*     类似的有 ContentPresenter, ItemsPresenter 等
*/
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows10.Common;
namespace Windows10.Controls.ScrollViewerDemo
{
public sealed partial class ScrollContentPresenterDemo : Page
{
public ScrollContentPresenterDemo()
{
this.InitializeComponent();
this.Loaded += ScrollContentPresenterDemo_Loaded;
}
private void ScrollContentPresenterDemo_Loaded(object sender, RoutedEventArgs e)
{
// 找到 ScrollViewer 内的名为 ScrollContentPresenter 的 ScrollContentPresenter 控件
var scrollContentPresenter = Helper.GetVisualChild<ScrollContentPresenter>(scrollViewer, "ScrollContentPresenter");
scrollContentPresenter.BorderBrush = new SolidColorBrush(Colors.Red);
scrollContentPresenter.BorderThickness = new Thickness(4);
}
}
}
　　
OK
[源码下载]