吸顶大法 -- UWP中的工具栏吸顶的完成体式格局之一
在UWP中页面滑动导航栏置顶
发明前人的完成体式格局大多是掌握ListViewBase的Header变更高度,或许竖立一个ScrollViewer在里面安排ListViewBase。经由测试,这两种要领或多或少的都有题目。所以我想试试用Composition API完成吸顶的结果。
起首先相识一下Composition API是什么。
Windows.UI.Composition 是能够从任何通用 Windows 平台 (UWP) 应用程序挪用的声明性保存形式 API ,从而能够直接在应用程序中建立合成对象、 动画和结果。 该 API 是对诸如 XAML 等现有框架的一个壮大补充,从而为 UWP 应用程序开发人员供应了一个熟习的 C# 图面以供添加到其应用程序。 这些 API 还能够用于建立 DX 款式框架较少的应用程序。
XAML 开发人员能够运用 WinRT“下拉”到采纳 C# 的合成层,以便在该合成层上实行自定义事情,而无需一直下拉到图形层并针对任何自定义 UI 事情运用 DirectX 和 C++。 此手艺可用于运用合成 API 对现有元素举行动画处置惩罚,也可用于经由过程在 XAML 元素树内建立 Windows.UI.Composition 内容的“视觉岛”来增添 UI。
只看这几句微软给的引见也是云里来雾里去的,照样看代码吧。
CompositionAPI中有一种动画叫表达式动画。大抵结果就是让一个Visual或许PropertySet的属性跟着本身另一个属性,或许另一个Visual或许PropertySet的属性的变化而变化。
关于不含Pivot的简朴状况,就有如许一个基础的思绪了:
猎取到ListViewBase的ScrollViewer;
猎取到ScrollViewer的ManipulationPropertySet和ListViewHeader的Visual;
让ManipulationPropertySet和Visual发生关系。
我们先来竖立一个简朴的页面。
<Pagex:Class="TestSwipeBack.ScrollTest"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:TestSwipeBack"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" Loaded="Page_Loaded"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><ListView x:Name="_listview" ItemsSource="{x:Bind ItemSource,Mode=OneWay}"><ListView.Header><Grid x:Name="_header"><Grid.RowDefinitions><RowDefinition Height="100" /><RowDefinition Height="50" /></Grid.RowDefinitions><Grid Background="LightBlue"><Button>123</Button><TextBlock FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center">我会被隐蔽</TextBlock></Grid><Grid Background="Pink" Grid.Row="1"><Button>123</Button><TextBlock FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center">我会吸顶</TextBlock></Grid></Grid></ListView.Header><ListView.ItemTemplate><DataTemplate><TextBlock Text="{Binding }" /></DataTemplate></ListView.ItemTemplate></ListView></Grid></Page>
底本ListViewBase里Header是在ItemsPanelRoot下方的,运用Canvans.SetZIndex把ItemsPanelRoot设置到下方。
Canvas.SetZIndex(_listview.ItemsPanelRoot, -1);
然后在背景猎取ListView内的ScrollViewer。
_scrollviewer = FindFirstChild<ScrollViewer> T FindFirstChild<T>(FrameworkElement element) childrenCount = children = ( i = ; i < childrenCount; i++ child = VisualTreeHelper.GetChild(element, i) = (child ( i = ; i < childrenCount; i++ (children[i] != subChild = FindFirstChild<T> (subChild !=
猎取ListViewHeader的Visual和ScrollViewer的ManipulationPropertySet。
var _headerVisual = ElementCompositionPreview.GetElementVisual(_header);var _manipulationPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollviewer);
建立表达式动画,然后运转。
var _compositor = Window.Current.Compositor;var _headerAnimation = _compositor.CreateExpressionAnimation("_manipulationPropertySet.Translation.Y > -100f ? 0: -100f -_manipulationPropertySet.Translation.Y");//_manipulationPropertySet.Translation.Y是ScrollViewer转动的数值,手指向上挪动的时刻,也就是可视部份向下挪动的时刻,Translation.Y是负数。_headerAnimation.SetReferenceParameter("_manipulationPropertySet", _manipulationPropertySet); _headerVisual.StartAnimation("Offset.Y", _headerAnimation);
如今滑动Demo看看,是否是在转动100像素以后,Header就停住了?
注:在一个Visual或许propertySet被附加了动画(即StartAnimation或许StartAnimationGroup)以后,掏出(propertySet.TryGetScalar)响应的属性就只能取到0,然则赋值或许插进去数值是会见效的。
以上就是UWP中运用Composition API完成吸顶的实例教程的细致内容,更多请关注ki4网别的相干文章!