Aracılığıyla paylaş

Kaynak değiştiricilerle yenilemeye çekme

Bu makalede, bir InteractionTracker'ın SourceModifier özelliğinin nasıl kullanılacağına daha ayrıntılı bir şekilde göz atacak ve özel bir yenileme denetimi oluşturarak kullanımını göstereceğiz.

Önkoşullar

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

SourceModifier nedir ve neden yararlıdır?

InertiaModifiers gibi SourceModifiers da bir InteractionTracker'ın hareketi üzerinde daha ayrıntılı denetim sağlar. Ancak InteractionTracker eylemsizlik girdikten sonra hareketi tanımlayan InertiaModifiers'ın aksine, SourceModifiers hareket tanımlarken InteractionTracker hala etkileşim durumundadır. Bu gibi durumlarda, geleneksel "parmakla kalın" deneyiminden farklı bir deneyim istiyorsunuz.

Bunun klasik bir örneği, çekme-yenileme deneyimidir- kullanıcı içeriği yenilemek için listeyi çektiğinde ve liste parmakla aynı hızda kaydırıldığında ve belirli bir mesafeden sonra durduğunda hareket ani ve mekanik hissedilir. Daha doğal bir deneyim, kullanıcı listeyle etkin bir şekilde etkileşim kurarken direnç hissi vermektir. Bu küçük nüans, bir listeyle etkileşim kurma konusunda genel son kullanıcı deneyiminin daha dinamik ve cazip olmasına yardımcı olur. Örnek bölümünde, bunu nasıl oluşturacağımız hakkında daha fazla ayrıntıya ineceğiz.

2 tür Kaynak Değiştirici vardır:

  • DeltaPosition – dokunmatik kaydırma etkileşimi sırasında geçerli kare konumu ile parmağın önceki kare konumu arasındaki deltadır. Bu kaynak değiştirici, daha fazla işlem için göndermeden önce etkileşimin delta konumunu değiştirmenize olanak tanır. Bu bir Vector3 tür parametresidir ve geliştirici, konumu InteractionTracker'a geçirmeden önce konumun X veya Y veya Z özniteliklerinden herhangi birini değiştirmeyi seçebilir.
  • DeltaScale - geçerli çerçeve ölçeği ile dokunmatik yakınlaştırma etkileşimi sırasında uygulanan önceki çerçeve ölçeği arasındaki deltadır. Bu kaynak değiştirici, etkileşimin yakınlaştırma düzeyini değiştirmenize olanak tanır. Bu, geliştiricinin InteractionTracker'a geçirmeden önce değiştirebileceği bir float türü özniteliğidir.

InteractionTracker Etkileşim durumundayken, kendisine atanan Kaynak Değiştiricilerin her birini değerlendirir ve bunlardan birinin geçerli olup olmadığını belirler. Bu, bir InteractionTracker'a birden çok Kaynak Değiştirici oluşturabileceğiniz ve atayabileceğiniz anlamına gelir. Ancak, her birini tanımlarken aşağıdakileri yapmanız gerekir:

  1. Koşul tanımla – bu belirli Kaynak Değiştiricinin uygulanması gerektiğinde koşullu deyimi tanımlayan bir İfade.
  2. DeltaPosition/DeltaScale tanımlama – Yukarıdaki tanımlı koşul karşılandığında DeltaPosition veya DeltaScale'i değiştiren kaynak değiştirici ifadesi.

Example

Şimdi mevcut WinUI XAML ListView denetimiyle özel bir yenileme deneyimi oluşturmak için Kaynak Değiştiricileri nasıl kullanabileceğinize bakalım. Bu deneyimi oluşturmak için bir XAML ListView üzerine yığılacak "Yenileme Paneli" olarak bir Tuval kullanacağız.

Son kullanıcı deneyimi için, kullanıcı etkin bir şekilde listeyi (dokunarak) kaydırmayı ve konum belirli bir noktayı aştıkça kaydırmayı durdurduğu için "direnç" etkisini oluşturmak istiyoruz.

Aşağı çekip yenileme içeren liste

Bu deneyim için çalışma kodu GitHub'daki Window UI Geliştirme Laboratuvarları deposunda bulunabilir. Bu deneyimi oluşturmanın adım adım adımları aşağıdadır. XAML işaretleme kodunuzda aşağıdakiler vardır:

<StackPanel Height="500" MaxHeight="500" x:Name="ContentPanel" HorizontalAlignment="Left" VerticalAlignment="Top" >
 <Canvas Width="400" Height="100" x:Name="RefreshPanel" >
<Image x:Name="FirstGear" Source="ms-appx:///Assets/Loading.png" Width="20" Height="20" Canvas.Left="200" Canvas.Top="70"/>
 </Canvas>
 <ListView x:Name="ThumbnailList"
 MaxWidth="400"
 Height="500"
ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsScrollInertiaEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="True" >
 <ListView.ItemTemplate>
 ……
 </ListView.ItemTemplate>
 </ListView>
</StackPanel>

ListView (ThumbnailList) zaten kaydırılan bir XAML denetimi olduğundan, kaydırmanın en üst öğeye ulaştığında ve artık kaydıramadığında üst öğesine (ContentPanel) zincirlenmesi gerekir. (ContentPanel, Kaynak Değiştiricileri uygulayacağınız yerdir.) Bunun olması için ListView işaretlemesinde ScrollViewer.IsVerticalScrollChainingEnabled değerini true olarak ayarlamanız gerekir. Ayrıca VisualInteractionSource'ta zincirleme modunu Her Zaman olarak ayarlamanız gerekir.

handledEventsToo parametresiyle PointerPressedEvent işleyicisini true olarak ayarlamanız gerekir. Bu seçenek olmadan, ListView denetimi bu olayları işlendi olarak işaretlediğinden, PointerPressedEvent ContentPanel'e zincirlenmez ve görsel zincirine gönderilmez.

//The PointerPressed handler needs to be added using AddHandler method with the //handledEventsToo boolean set to "true"
//instead of the XAML element's "PointerPressed=Window_PointerPressed",
//because the list view needs to chain PointerPressed handled events as well.
ContentPanel.AddHandler(PointerPressedEvent, new PointerEventHandler( Window_PointerPressed), true);

Şimdi bunu InteractionTracker ile bağlamaya hazırsınız. InteractionTracker, VisualInteractionSource ve InteractionTracker'ın konumundan yararlanacak İfade'yi ayarlayarak başlayın.

// InteractionTracker and VisualInteractionSource setup.
_root = ElementCompositionPreview.GetElementVisual(Root);
_compositor = _root.Compositor;
_tracker = InteractionTracker.Create(_compositor);
_interactionSource = VisualInteractionSource.Create(_root);
_interactionSource.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
_interactionSource.PositionYChainingMode = InteractionChainingMode.Always;
_tracker.InteractionSources.Add(_interactionSource);
float refreshPanelHeight = (float)RefreshPanel.ActualHeight;
_tracker.MaxPosition = new Vector3((float)Root.ActualWidth, 0, 0);
_tracker.MinPosition = new Vector3(-(float)Root.ActualWidth, -refreshPanelHeight, 0);

// Use the Tacker's Position (negated) to apply to the Offset of the Image.
// The -{refreshPanelHeight} is to hide the refresh panel
m_positionExpression = _compositor.CreateExpressionAnimation($"-tracker.Position.Y - {refreshPanelHeight} ");
m_positionExpression.SetReferenceParameter("tracker", _tracker);
_contentPanelVisual.StartAnimation("Offset.Y", m_positionExpression);

Bu kurulumla, yenileme bölmesi başlangıç konumunda görüntüleme alanının dışında kalır ve kullanıcının gördüğü tek şey liste görünümüdür. Kaydırma ContentPanel'e ulaştığında PointerPressed olayı tetiklendiğinde, Sistemden etkileşim deneyimini yönlendirmek için InteractionTracker'ı kullanmasını isteyebilirsiniz.

private void Window_PointerPressed(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch) {
 // Tell the system to use the gestures from this pointer point (if it can).
 _interactionSource.TryRedirectForManipulation(e.GetCurrentPoint(null));
 }
}

Uyarı

İşlenen olayları zincirleme gerekli değilse, PointerPressedEvent işleyicisi ekleme işlemi doğrudan XAML kodlaması üzerinden öznitelik (PointerPressed="Window_PointerPressed") kullanılarak gerçekleştirilebilir.

Sonraki adım, kaynak değiştiricileri ayarlamaktır. Bu davranışı elde etmek için 2 kaynak değiştirici kullanacaksınız; Direniş ve Durdur.

  • Direnç – DeltaPosition.Y'yi RefreshPanel'in yüksekliğine ulaşana kadar yarı hızda hareket ettirin.
CompositionConditionalValue resistanceModifier = CompositionConditionalValue.Create (_compositor);
ExpressionAnimation resistanceCondition = _compositor.CreateExpressionAnimation(
 $"-tracker.Position.Y < {pullToRefreshDistance}");
resistanceCondition.SetReferenceParameter("tracker", _tracker);
ExpressionAnimation resistanceAlternateValue = _compositor.CreateExpressionAnimation(
 "source.DeltaPosition.Y / 3");
resistanceAlternateValue.SetReferenceParameter("source", _interactionSource);
resistanceModifier.Condition = resistanceCondition;
resistanceModifier.Value = resistanceAlternateValue;
  • Durdur – RefreshPanel'in tamamı ekranda olduktan sonra hareket etmeyi durdurun.
CompositionConditionalValue stoppingModifier = CompositionConditionalValue.Create (_compositor);
ExpressionAnimation stoppingCondition = _compositor.CreateExpressionAnimation(
 $"-tracker.Position.Y >= {pullToRefreshDistance}");
stoppingCondition.SetReferenceParameter("tracker", _tracker);
ExpressionAnimation stoppingAlternateValue = _compositor.CreateExpressionAnimation("0");
stoppingModifier.Condition = stoppingCondition;
stoppingModifier.Value = stoppingAlternateValue;
Now add the 2 source modifiers to the InteractionTracker.
List<CompositionConditionalValue> modifierList = new List<CompositionConditionalValue>()
{ resistanceModifier, stoppingModifier };
_interactionSource.ConfigureDeltaPositionYModifiers(modifierList);

Bu diyagram SourceModifiers kurulumunun bir görselleştirmesini verir.

Kaydırma diyagramı

Şimdi SourceModifiers ile ListView'ı aşağı kaydırdığınızda ve en üstteki öğeye ulaştığınızda yenileme panelinin RefreshPanel yüksekliğine ulaşana kadar kaydırmanın yarısında aşağı çekildiğini ve ardından hareket etmesini durduracağını fark edeceksiniz.

Tam örnekte, RefreshPanel tuvalindeki etkileşim sırasında simgeyi döndürmek için bir ana kare animasyonu kullanılır. Herhangi bir içerik kendi yerine kullanılabilir veya bu animasyonu ayrı olarak yönlendirmek için InteractionTracker'ın konumunu kullanabilir.

  • Last updated on