UWP中使用构成API实现吸顶的方法

这篇文章主要介绍了UWP中使用构成API实现吸顶的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

吸顶大法——UWP中的工具栏吸顶的实现方式之一

在UWP中页面滑动导航栏置顶

发现前人的实现方式大多是控制ListViewBase的头变换高度,或者建立一个滚动视图在里面放置ListViewBase。经过测试,这两种方法或多或少的都有问题,所以我想试试用构成API实现吸顶的效果。

首先先了解一下构成API是什么。

Windows.UI。成分是可以从任何通用Windows平台(UWP)应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象,动画和效果。该API是对诸如XAML等现有框架的一个强大补充,从而为UWP应用程序开发人员提供了一个熟悉的c#图面以供添加到其应用程序。这些API还可以用于创建DX样式框架较少的应用程序。

XAML开发人员可以使用WinRT“下拉”到采用c#的合成层,以便在该合成层上执行自定义工作,而无需一直下拉到图形层并针对任何自定义UI工作使用举和c++。此技术可用于使用合成API对现有元素进行动画处理,也可用于通过在XAML元素树内创建Windows.UI。组合内容的“视觉岛”来增加UI。

只看这几句微软给的介绍也是云里来雾里去的,还是看代码吧。

CompositionAPI中有一种动画叫表达式动画。大致效果就是让一个视觉或者PropertySet的属性随着自身另一个属性,或者另一个视觉或者PropertySet的属性的变化而变化。

对于不含主的简单情况,就有这样一个基本的思路了:

<李>

获取到ListViewBase的滚动视图;

<李>

获取到滚动视图的ManipulationPropertySet和ListViewHeader的视觉;

<李>

让ManipulationPropertySet和视觉发生关系。

我们先来建立一个简单的页面。

& lt; Pagex:类=癟estSwipeBack.ScrollTest" xmlns=癶ttp://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x=癶ttp://schemas.microsoft.com/winfx/2006/xaml" xmlns:当地=笆褂?TestSwipeBack" xmlns: d=癶ttp://schemas.microsoft.com/expression/blend/2008" xmlns: mc=癶ttp://schemas.openxmlformats.org/markup-compatibility/2006"主持人:可忽略的=癲"加载=癙age_Loaded"祝辞& lt;网格背景=皗ThemeResource ApplicationPageBackgroundThemeBrush}“祝辞& lt; ListView x: Name=癬listview"ItemsSource=皗x:绑定ItemSource模式=单行的}“祝辞& lt; ListView.Header> & lt;网格x: Name=癬header"祝辞& lt; Grid.RowDefinitions> & lt; RowDefinition高度=?00”;/祝辞& lt; RowDefinition高度=?0”;/祝辞;& lt;/Grid.RowDefinitions> & lt;网格背景=癓ightBlue"祝辞& lt; Button> 123 & lt;/Button> & lt; TextBlock字形大??5”;HorizontalAlignment=癈enter",VerticalAlignment=癈enter"的在我会被隐藏& lt;/TextBlock> & lt;/Grid> & lt;网格背景=癙ink"Grid.Row=?“祝辞& lt; Button> 123 & lt;/Button> & lt; TextBlock字形大??5”;HorizontalAlignment=癈enter",VerticalAlignment=癈enter"的在我会吸顶& lt;/TextBlock> & lt;/Grid> & lt;/Grid> & lt;/ListView.Header> & lt; ListView.ItemTemplate> & lt; DataTemplate> & lt; TextBlock文本=皗绑定}“;/祝辞;& lt;/DataTemplate> & lt;/ListView.ItemTemplate> & lt;/ListView> & lt;/Grid> & lt;/Page>

原本ListViewBase里头是在ItemsPanelRoot下方的,使用Canvans。SetZIndex把ItemsPanelRoot设置到下方。

Canvas.SetZIndex (_listview。ItemsPanelRoot 1);

然后在后台获取列表视图内的滚动视图。

_scrollviewer=FindFirstChildT FindFirstChild (FrameworkElement元素)childrenCount=孩子=(i=;我& lt;childrenCount;我+ +孩子=VisualTreeHelper。GetChild(元素,i)=(孩子(i=;我& lt;childrenCount;我+ +(孩子[我]!=subChild=FindFirstChild(subChild !=

获取ListViewHeader的视觉和滚动视图的ManipulationPropertySet。

var _headerVisual=ElementCompositionPreview.GetElementVisual (_header); var _manipulationPropertySet=ElementCompositionPreview.GetScrollViewerManipulationPropertySet (_scrollviewer);

创建表达式动画,然后运行。

var _compositor=Window.Current.Compositor; var _headerAnimation=_compositor.CreateExpressionAnimation (“_manipulationPropertySet.Translation。Y比;-100 f ?0:-100 f -_manipulationPropertySet.Translation.Y");//_manipulationPropertySet.Translation.Y是scrollview滚动的数值,手指向上移动的时候,也就是可视部分向下移动的时候,Translation.Y是负数._headerAnimation.SetReferenceParameter (“_manipulationPropertySet" _manipulationPropertySet); 　　 　　_headerVisual.StartAnimation (“Offset.Y" _headerAnimation);

UWP中使用构成API实现吸顶的方法