Partilhar via

Melhore as experiências existentes do ScrollViewer

Este artigo explica como usar um XAML ScrollViewer e ExpressionAnimations para criar experiências de movimento dinâmicas orientadas por entrada.

Pré-requisitos

Aqui, assumimos que você está familiarizado com os conceitos discutidos nestes artigos:

Por que construir em cima do ScrollViewer?

Normalmente, você usa o ScrollViewer XAML existente para criar uma superfície rolável e ampliável para o conteúdo do aplicativo. Com a introdução da linguagem Fluent Design, agora você também deve se concentrar em como usar o ato de rolar ou ampliar uma superfície para impulsionar outras experiências de movimento. Por exemplo, usar o scroll para controlar uma animação de desfoque de um plano de fundo ou controlar a posição de um "cabeçalho fixo".

Nesses cenários, você está aproveitando as experiências de comportamento ou manipulação, como rolagem e zoom, para tornar outras partes do seu aplicativo mais dinâmicas. Estes, por sua vez, permitem que o aplicativo se sinta mais coeso, tornando as experiências mais memoráveis aos olhos dos usuários finais. Ao tornar a interface do usuário do aplicativo mais memorável, os usuários finais se envolverão com o aplicativo com mais frequência e por períodos mais longos.

O que você pode construir sobre o ScrollViewer?

Você pode aproveitar a posição de um ScrollViewer para criar uma série de experiências dinâmicas:

  • Paralaxe – usar a posição de um ScrollViewer para mover o conteúdo de fundo ou de primeiro plano a uma velocidade relativa à posição de rolagem.
  • StickyHeaders – use a posição de um ScrollViewer para animar e "colar" um cabeçalho a uma posição
  • Input-Driven Efeitos – use a posição de um Scrollviewer para animar um Efeito de Composição, como o Desfoque.

Em geral, fazendo referência à posição de um ScrollViewer com um ExpressionAnimation, você pode criar uma animação que muda dinamicamente em relação à quantidade de rolagem.

Vista de lista com paralaxe

Um cabeçalho tímido

Utilizando o ScrollViewerManipulationPropertySet

Para criar essas experiências dinâmicas usando um ScrollViewer XAML, você deve ser capaz de fazer referência à posição de rolagem em uma animação. Isso é feito acessando um CompositionPropertySet do ScrollViewer XAML chamado ScrollViewerManipulationPropertySet. O ScrollViewerManipulationPropertySet contém uma única propriedade Vetor3 chamada Translation que fornece acesso à posição de rolagem do ScrollViewer. Em seguida, pode referir-se a isto tal como a qualquer outro CompositionPropertySet na sua ExpressionAnimation.

Passos gerais para começar:

  1. Acesse o ScrollViewerManipulationPropertySet via ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Crie um ExpressionAnimation que faça referência à propriedade Translation do PropertySet.
    • Não se esqueça de definir o parâmetro de referência!
  3. Direcione uma propriedade CompositionObject com o ExpressionAnimation.

Observação

É recomendável atribuir o PropertySet retornado do método GetScrollViewerManipulationPropertySet a uma variável de classe. Isso garante que o conjunto de propriedades não seja eliminado pela recolha de lixo e, portanto, não tenha nenhum efeito sobre o ExpressionAnimation em que é referenciado. ExpressionAnimations não mantém uma referência forte a nenhum dos objetos usados na equação.

Exemplo

Vamos dar uma olhada em como a amostra de Parallax mostrada acima é montada. Para referência, todo o código-fonte do aplicativo é encontrado no repositório Window UI Dev Labs no GitHub.

A primeira coisa é obter uma referência ao ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

A próxima etapa é criar o ExpressionAnimation que define uma equação que utiliza a posição de rolagem do ScrollViewer.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Observação

Você também pode utilizar classes auxiliares do ExpressionBuilder para construir essa mesma expressão sem a necessidade de cadeias de caracteres:

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Finalmente, você pega esta ExpressionAnimation e aplica no visual que você deseja criar um efeito de paralaxe. Neste caso, é a imagem de cada um dos itens da lista.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);
  • Last updated on