UWP中如何使用构成API实现吸顶

  介绍

小编给大家分享一下UWP中如何使用构成API实现吸顶,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

先做一个简单的页面,页面有一个网格当标题,一个去掉了头部的主,主内有三个视图,视图设置了和页面头高度一致的空白头。

& lt; Pagex:类=癟estListViewHeader.TestHeader2" xmlns=癶ttp://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x=癶ttp://schemas.microsoft.com/winfx/2006/xaml" xmlns:当地=笆褂?TestListViewHeader" xmlns: d=癶ttp://schemas.microsoft.com/expression/blend/2008" xmlns: mc=癶ttp://schemas.openxmlformats.org/markup-compatibility/2006"主持人:可忽略的=癲"祝辞& lt;网格背景=皗ThemeResource ApplicationPageBackgroundThemeBrush}“祝辞& lt;主ItemsSource=皗x:绑定ItemSource}“;x: Name=癬pivot"SelectionChanged=癬pivot_SelectionChanged"祝辞& lt; Pivot.Template>& lt; !——太长在这儿就不贴了,在& lt;/Pivot.Template> & lt; Pivot.HeaderTemplate> & lt; DataTemplate> & lt;/DataTemplate> & lt;/Pivot.HeaderTemplate> & lt; Pivot.ItemTemplate> & lt; DataTemplate> & lt; ListView ItemsSource=皗绑定}“祝辞& lt; ListView.Header> & lt;网格高度=?50”;/祝辞;& lt;/ListView.Header> & lt; ListView.ItemTemplate> & lt; DataTemplate> & lt; TextBlock文本=皗绑定}“;/祝辞;& lt;/DataTemplate> & lt;/ListView.ItemTemplate> & lt;/ListView> & lt;/DataTemplate> & lt;/Pivot.ItemTemplate> & lt;/Pivot> & lt;网格高度=?50”;VerticalAlignment=癟op"x: Name=癬header"祝辞& lt; Grid.RowDefinitions> & lt; RowDefinition高度=?00”;/祝辞& lt; RowDefinition高度=?0”;/祝辞;& lt;/Grid.RowDefinitions> & lt;网格背景=癓ightBlue"祝辞& lt; TextBlock字形大??0“;VerticalAlignment=癈enter"HorizontalAlignment=癈enter"祝辞我会被隐藏& lt;/TextBlock> & lt;/Grid> & lt;网格Grid.Row=?“祝辞& lt; ListBox SelectedIndex=皗x:绑定_pivot.SelectedIndex模式=TwoWay}“;ItemsSource=皗x:绑定ItemSource}“祝辞& lt; ListBox.ItemTemplate> & lt; DataTemplate> & lt; Grid> & lt; TextBlock文本=皗绑定名称},/祝辞;& lt;/Grid> & lt;/DataTemplate> & lt;/ListBox.ItemTemplate> & lt; ListBox.ItemsPanel> & lt; ItemsPanelTemplate> & lt; VirtualizingStackPanel取向=癏orizontal"/祝辞;& lt;/ItemsPanelTemplate> & lt;/ListBox.ItemsPanel> & lt;/ListBox> & lt;/Grid> & lt;/Grid> & lt;/Grid> & lt;/Page>

主的模板太长在这儿就不写了,需要的话,找个系统内置的画笔资源按F12打开一般。xaml,然后搜索主就是了,其他控件的模板也能通过这个方法获取。

模板里修改这几句就能去掉头部:

& lt; PivotPanel x: Name=癙anel"VerticalAlignment=癝tretch"祝辞& lt;网格x: Name=癙ivotLayoutElement"祝辞& lt; Grid.RowDefinitions> & lt; RowDefinition高度=?”;/祝辞& lt; RowDefinition高度=?”;/祝辞& lt; !——太长不写——祝辞& lt;/Grid.RowDefinitions>

然后是后台代码,这里还会用到上一篇的FindFirstChild方法,在这儿就不贴出来了。

老样子,全局的_headerVisual,最好在页面的加载事件里初始化我们所需要的这些变量,我偷懒了,直接放到了下面的UpdateAnimation方法里。
然后我们写一个UpdateAnimation方法,用来在PivotItem切换的时候更新动画的参数。

先判断下如果未选中页就回报,然后获取到当前选中项的容器,再像上次一样从容器里获取滚动视图,不过这里有个坑,稍后再说。

空白UpdateAnimation ()   {如果(_pivot。SelectedIndex==1)返回;var SelectionItem=_pivot.ContainerFromIndex (_pivot.SelectedIndex) PivotItem;如果(SelectionItem==null)返回;var _scrollviewer=FindFirstChild (SelectionItem);如果(_scrollviewer !=null)   {   _headerVisual=ElementCompositionPreview.GetElementVisual (_header); var _manipulationPropertySet=ElementCompositionPreview.GetScrollViewerManipulationPropertySet (_scrollviewer); var _compositor=Window.Current.Compositor; var=_compositor行。CreateCubicBezierEasingFunction(新System.Numerics。Vector2(0, 0),新System.Numerics.Vector2 (0.6 f, 1)); var _headerAnimation=_compositor.CreateExpressionAnimation (“_manipulationPropertySet.Translation。Y比;-100 f ?_manipulationPropertySet.Translation。Y: -100 f");   _headerAnimation.SetReferenceParameter (“_manipulationPropertySet" _manipulationPropertySet);   _headerVisual.StartAnimation (“Offset.Y" _headerAnimation);   }   }

然后在主的SelectionChanged事件里更新动画:

私人空_pivot_SelectionChanged(对象发送方,SelectionChangedEventArgs e)   {   UpdateAnimation ();   }

点下运行,上下滑一下,并没有跟着动。左右切换一下之后,发现在第二次切换到PivotItem的时候就可以跟着动了,下断看到第一次运行到“var _scrollviewer=FindFirstChild

UWP中如何使用构成API实现吸顶