Example tutorial for using the composition API to implement a ceiling in the UWP

A few days ago, you need to implement a ceiling in the UWP and find some articles on the Web:

Top-of-the-ceiling dafa--one of the ways to implement a toolbar top in the UWP

In the UWP, page swipe navigation bar pinned

It is found that most of the previous implementations are controlled by the listviewbase of the header, or create a scrollviewer to place listviewbase inside. After testing, both of these methods are more or less problematic. So I want to try the composition API to achieve the ceiling effect.

First, let's look at what the composition API is.

Windows.UI.Composition is a declarative retention mode API that can be called from any universal Windows platform (UWP) application, allowing you to create composite objects, animations, and effects directly in your application. The API is a powerful complement to existing frameworks such as XAML, providing a familiar C # surface for UWP application developers to add to their applications. These APIs can also be used to create applications with fewer DX-style frames.

XAML developers can use WinRT "pull-down" to a composition layer in C # to perform custom work on the composition layer without having to pull down to the graphics layer and use DirectX and C + + for any custom UI work. This technique can be used to animate existing elements using the composition API, or to increase the UI by creating a "visual Island" of Windows.UI.Composition content within a XAML element tree.

Only look at these words Microsoft gave the introduction is also in the cloud to the fog, or to see the code bar.

There is an animation called expression in Compositionapi. The general effect is to have a visual or PropertySet property change with another property of itself, or another visual or PropertySet property.

For a simple case without pivot, there is a basic idea:

1. Get to Listviewbase's ScrollViewer;

2. Get to ScrollViewer's Manipulationpropertyset and Listviewheader's visual;

3. Let Manipulationpropertyset and visual have sex.

Let's start by creating a simple page.

<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= "/><rowdefinition height="/></grid.rowdefinitions><grid Background= "LightBlue" ><button>123</button><textblock fontsize= "horizontalalignment=" Center "VerticalAlignment=" Center "> I will be hidden </textblock></grid><grid background=" Pink "grid.row=" 1 "><button>123</ Button><textblock fontsize= "Horizo"Ntalalignment= "Center" verticalalignment= "Center" > I will suck top </textblock></grid></grid></ Listview.header><listview.itemtemplate><datatemplate><textblock Text= "{Binding}"/></ Datatemplate></listview.itemtemplate></listview></grid></page>

Originally listviewbase in the header is under the Itemspanelroot, using Canvans.setzindex to set the itemspanelroot below.

Canvas.setzindex (_listview. Itemspanelroot,-1);

Then get the ScrollViewer inside the ListView in the background.

_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! =

Gets the Listviewheader visual and ScrollViewer Manipulationpropertyset.

var _headervisual = elementcompositionpreview.getelementvisual (_header); var _manipulationpropertyset = Elementcompositionpreview.getscrollviewermanipulationpropertyset (_scrollviewer);

Create an expression animation, and then run.

var _compositor = Window.current.compositor;var _headeranimation = _compositor. Createexpressionanimation ("_manipulationpropertyset.translation.y > -100f? 0: -100f-_manipulationpropertyset.translation.y ");//_ MANIPULATIONPROPERTYSET.TRANSLATION.Y is the number of ScrollViewer scrolling, when the finger moves upward, that is, when the visible part moves downward, the TRANSLATION.Y is negative. _headeranimation.setreferenceparameter ("_manipulationpropertyset", _manipulationpropertyset); _ Headervisual.startanimation ("Offset.y", _headeranimation);

Now swipe the demo to see if the header stops after scrolling 100 pixels?

Note: After a visual or propertyset is attached to an animation (that is, startanimation or Startanimationgroup), Removing (propertyset.trygetscalar) The corresponding property can only be taken to 0, but the assignment or insertion value will take effect.