Aracılığıyla paylaş

Mevcut ScrollViewer deneyimlerini geliştirme

Bu makalede, giriş temelli dinamik hareket deneyimleri oluşturmak için XAML ScrollViewer ve ExpressionAnimations'ın nasıl kullanılacağı açıklanmaktadır.

Önkoşullar

Burada, bu makalelerde ele alınan kavramlar hakkında bilgi sahibi olduğunuzu varsayıyoruz:

ScrollViewer'ın üzerine neden inşa edelim?

Genellikle, uygulama içeriğiniz için kaydırılabilir ve yakınlaştırılabilir bir yüzey oluşturmak için mevcut XAML ScrollViewer'ı kullanırsınız. Fluent Design dilinin kullanıma sunulmasıyla birlikte, artık diğer hareket deneyimlerini yönlendirmek için bir yüzeyi kaydırma veya yakınlaştırma eyleminin nasıl kullanılacağına da odaklanmalısınız. Örneğin, bir arka planın bulanıklaştırma animasyonunu veya "yapışkan başlığın" konumunu etkilemek için kaydırmayı kullanma.

Bu senaryolarda, uygulamanızın diğer bölümlerini daha dinamik hale getirmek için Kaydırma ve yakınlaştırma gibi davranış veya işleme deneyimlerinden yararlanacaksınız. Bunlar da uygulamanın daha uyumlu hissetmesini sağlayarak deneyimleri son kullanıcıların gözünde daha unutulmaz hale getirir. Son kullanıcılar, uygulama kullanıcı arabirimini daha akılda kalıcı hale getirerek uygulamayla daha sık ve daha uzun süre etkileşim kurar.

ScrollViewer'ın üzerine neler oluşturabilirsiniz?

Bir dizi dinamik deneyim oluşturmak için ScrollViewer'ın konumundan yararlanabilirsiniz:

  • Parallax : ScrollViewer'ın konumunu kullanarak arka plan veya ön plan içeriğini kaydırma konumuna göre bir hızda taşıyın.
  • StickyHeaders – Bir üst bilgiyi belirli bir konuma animasyonla yerleştirmek ve "yapıştırmak" için ScrollViewer'ın konumunu kullanın.
  • Input-Driven Efektleri : Bulanıklaştırma gibi bir Oluşturma Efektine animasyon eklemek için Scrollviewer'ın konumunu kullanın.

Genel olarak, ExpressionAnimation ile ScrollViewer'ın konumuna başvurarak kaydırma miktarını dinamik olarak değiştiren bir animasyon oluşturabilirsiniz.

Paralaks ile liste görünümü

Utangaç başlık

ScrollViewerManipulationPropertySet Kullanma

XAML ScrollViewer kullanarak bu dinamik deneyimleri oluşturmak için, bir animasyondaki kaydırma konumuna başvurabilmeniz gerekir. Bu, ScrollViewerManipulationPropertySet adlı XAML ScrollViewer üzerinden bir CompositionPropertySet'e erişilerek yapılır. ScrollViewerManipulationPropertySet, ScrollViewer'ın kaydırma konumuna erişim sağlayan Çeviri adlı tek bir Vector3 özelliği içerir. Daha sonra ExpressionAnimation'ınızdaki diğer CompositionPropertySet'ler gibi buna başvurabilirsiniz.

Kullanmaya başlamaya yönelik genel adımlar:

  1. ScrollViewerManipulationPropertySet öğesine ElementCompositionPreview aracılığıyla erişin.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. PropertySet'ten Translation özelliğine başvuran bir ExpressionAnimation oluşturun.
    • Başvuru Parametresini ayarlamayı unutmayın!
  3. ExpressionAnimation ile Bir CompositionObject'in özelliğini hedefle.

Uyarı

GetScrollViewerManipulationPropertySet yönteminden döndürülen PropertySet'i bir sınıf değişkenine atamanız önerilir. Bu, özellik kümesinin Çöp Toplayıcı tarafından temizlenmemesini ve böylece referans verildiği ExpressionAnimation üzerinde herhangi bir etkisinin olmamasını sağlar. ExpressionAnimations denklemde kullanılan nesnelerin hiçbirine güçlü bir başvuru sağlamaz.

Örnek

Şimdi yukarıda gösterilen Parallax örneğinin nasıl bir araya getirildiğinden bakalım. Bilgi için, uygulamanın tüm kaynak kodu GitHub Window UI Geliştirme Laboratuvarları deposundabulunabilir.

İlk şey ScrollViewerManipulationPropertySet'e başvuru almaktır.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Sonraki adım, ScrollViewer'ın kaydırma Konumunu kullanan bir denklem tanımlayan ExpressionAnimation oluşturmaktır.

_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))";

Uyarı

Ayrıca, Dizelere gerek kalmadan aynı İfadeyi oluşturmak için ExpressionBuilder yardımcı sınıflarını da kullanabilirsiniz:

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

Son olarak, bu ExpressionAnimation'ı alır ve paralaks efekti uygulamak istediğiniz görsele yönlendirirsiniz. Bu durumda, listedeki her öğenin resmidir.

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