Home > Backend Development > C#.Net Tutorial > Example tutorial of using Composition API to implement ceiling in UWP

Example tutorial of using Composition API to implement ceiling in UWP

零下一度
Release: 2017-06-23 15:25:09
Original
1593 people have browsed it

A few days ago I needed to implement ceiling ceiling in UWP, so I found some articles on the Internet:

Ceiling method--One of the ways to implement ceiling ceiling in toolbar in UWP

Page sliding navigation bar to top in UWP

I found that most of the previous implementation methods were to control the height of the Header of ListViewBase, or to create a ScrollViewer to place the ListViewBase inside. After testing, both methods have more or less problems. So I want to try using the Composition API to achieve the ceiling effect.

First of all, let’s understand 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 composition objects, animations, and effects directly in your application. The API is a powerful addition to existing frameworks such as XAML, giving UWP application developers a familiar C# surface to add to their applications. These APIs can also be used to create DX-style framework-less applications.

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

Just looking at these few sentences, the introduction given by Microsoft is still unclear. Let’s look at the code.

There is a kind of animation in CompositionAPI called expression animation. The general effect is to make the properties of a Visual or PropertySet change with the changes of another property of itself, or the properties of another Visual or PropertySet.

For simple situations without Pivot, there is such a basic idea:

  1. Get the ScrollViewer of ListViewBase;

  2. Get the ScrollViewer's ManipulationPropertySet and the ListViewHeader's Visual;

  3. Let the ManipulationPropertySet and Visual have a relationship.

Let’s create a simple page first.

<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>
Copy after login

Originally the Header in ListViewBase was below the ItemsPanelRoot. Use Canvans.SetZIndex to set the ItemsPanelRoot below.

Canvas.SetZIndex(_listview.ItemsPanelRoot, -1);
Copy after login

Then get the ScrollViewer in 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 !=
Copy after login

Get ListViewHeader's Visual and ScrollViewer's ManipulationPropertySet.

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

Create an expression animation and then run it.

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);
Copy after login

Now slide the demo to see if the Header stops after scrolling 100 pixels?

Note: After a Visual or propertySet is attached with animation (i.e. StartAnimation or StartAnimationGroup), the corresponding property can only be obtained as 0 when taking out (propertySet.TryGetScalar), but Assigning or inserting a value will take effect.

The above is the detailed content of Example tutorial of using Composition API to implement ceiling in UWP. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template