Swipe

Çekme komutu, kullanıcıların uygulama içindeki durumları değiştirmeye gerek kalmadan sık kullanılan menü eylemlerine dokunarak kolayca erişmesini sağlayan bağlam menüleri için bir hızlandırıcıdır.

Doğru kontrol bu mu?

Çekme komutu alandan tasarruf sağlar. Kullanıcının aynı işlemi birden çok öğe üzerinde hızlı bir şekilde gerçekleştirebileceği durumlarda kullanışlıdır. Ayrıca, sayfada tam bir açılır pencere veya durum değişikliği gerektirmeyen öğelerde "hızlı eylemler" sağlar.

Büyük olabilecek bir öğe grubunuz varsa ve her öğede kullanıcının düzenli olarak gerçekleştirmek isteyebileceği 1-3 eylem varsa çekme komutunu kullanmanız gerekir. Bu eylemler şunları içerebilir ancak bunlarla sınırlı değildir:

• Siliniyor
• İşaretleme veya arşivleme
• Kaydetme veya indirme
• Yanıtlıyor.

Kaydırma nasıl çalışır?

UWP çekme komutunun iki modu vardır: Göster ve Yürüt. Ayrıca dört farklı çekme yönünü de destekler: yukarı, aşağı, sola ve sağa.

Gösterme modu

Gösterim modunda, kullanıcı bir veya daha fazla komut içeren bir menüyü açmak için bir öğeyi kaydırır ve bir komutu çalıştırmak için açıkça dokunmalıdır. Kullanıcı bir öğeyi çekip serbest bıraktığında, bir komut seçilene kadar menü açık kalır veya menü geri çekerek, dokunarak veya açılan çekme öğesini ekrandan kaydırarak yeniden kapatılır.

Gösterme modu daha güvenli, daha çok yönlü bir çekme modudur ve silme gibi zararlı olabilecek eylemler bile olmak üzere çoğu menü eylemi türü için kullanılabilir.

Kullanıcı, menünün açık ve bekleme durumunda gösterilen menü seçeneklerinden birini seçtiğinde, bu öğenin komutu çağrılır ve kaydırma denetimi kapatılır.

Yürütme modu

Yürütme modunda kullanıcı, tek bir çekme hareketiyle tek bir komutu ortaya çıkarmak ve yürütmek için bir öğeyi açar. Kullanıcı, bir eşiği aşmadan önce sürüklenen öğeyi serbest bırakırsa, menü kapanır ve komut yürütülmez. Kullanıcı eşiği geçer ve sonra öğeyi serbest bırakırsa, komut hemen yürütülür.

Kullanıcı eşik ulaşıldıktan sonra parmağını serbest bırakmazsa ve çekme öğesini yeniden kapatırsa, komut yürütülmüyor ve öğe üzerinde hiçbir eylem gerçekleştirilmiyor.

Yürütme modu, bir öğe çekiliyorken renk ve etiket konumlandırması aracılığıyla daha fazla görsel geri bildirim sağlar.

Yürütme, kullanıcının gerçekleştirdiği eylemin en yaygın olduğu durumlarda en iyi şekilde kullanılır.

Ayrıca, bir öğeyi silme gibi daha yıkıcı eylemler için de kullanılabilir. Ancak, Göster'in, kullanıcının bir düğmeye açıkça tıklamasını gerektirdiği yerde, Çalıştır'ın yalnızca tek bir kaydırma hareketi gerektirdiğini unutmayın.

Kaydırma yönleri

Kaydırma, tüm ana yönlerde çalışır: yukarı, aşağı, sola ve sağa. Her çekme yönü kendi çekme öğelerini veya içeriğini tutabilir, ancak tek bir çekme özelliğine sahip öğede aynı anda yalnızca bir yön örneği ayarlanabilir.

Örneğin, aynı SwipeControl üzerinde iki LeftItems tanımına sahip olamazsınız.

Yapılması ve yapılmaması gerekenler

• FlipViews veya Hubs'da çekme özelliğini kullanmayın. Çelişen kaydırma yönleri nedeniyle kombinasyon kullanıcı için kafa karıştırıcı olabilir.
• Yatay çekmeyi yatay gezintiyle veya dikey kaydırmayı dikey gezintiyle birleştirmeyin.
• Kullanıcının çekme işleminin aynı eylem olduğundan ve çekilebilen tüm ilgili öğelerde tutarlı olduğundan emin olun.
• Kullanıcının gerçekleştirmek istediği ana eylemler için çekme özelliğini kullanın.
• Aynı eylemin birçok kez tekrarlandığı öğelerde kaydırma hareketini kullanın.
• Daha geniş öğelerde yatay çekme ve daha uzun öğelerde dikey çekme kullanın.
• Kısa, kısa metin etiketleri kullanın.

Çekme komutu oluşturma

• Önemli API'ler: SwipeControl, SwipeItem, ListView sınıfı

WinUI 3 Galeri uygulamasını açın ve SwipeControl'un nasıl çalıştığını görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Çekme komutlarının tanımlamanız gereken iki bileşeni vardır:

• SwipeControliçeriğinizi saran bir yapıya sahiptir. ListView gibi bir koleksiyonda bu, DataTemplate içinde yer alır.
• Çekme kontrolünün yön kapsayıcılarına yerleştirilen bir veya daha fazla SwipeItem nesnesinden oluşan sürükleme menüsü öğeleri: LeftItems, RightItems, TopItemsveya BottomItems

Çekme içeriği satır içine yerleştirilebilir veya sayfanızın veya uygulamanızın Kaynaklar bölümünde tanımlanabilir.

Aşağıda, bir metnin çevresinde kaydırılmış basit bir SwipeControl örneği verilmiş. Çekme komutu oluşturmak için gereken XAML öğelerinin hiyerarşisini gösterir.

<SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <SwipeControl.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Pin">
                <SwipeItem.IconSource>
                    <SymbolIconSource Symbol="Pin"/>
                </SwipeItem.IconSource>
            </SwipeItem>
        </SwipeItems>
    </SwipeControl.LeftItems>

     <!-- Swipeable content -->
    <Border Width="180" Height="44" BorderBrush="Black" BorderThickness="2">
        <TextBlock Text="Swipe to Pin" Margin="4,8,0,0"/>
    </Border>
</SwipeControl>

Şimdi, normalde bir listede çekme komutlarını nasıl kullanacağınıza ait daha eksiksiz bir örneğe göz atacağız. Bu örnekte, Yürütme modunu kullanan bir delete komutu ve Ortaya Çıkar modunu kullanan diğer komutların menüsünü ayarlayacaksınız. Her iki komut kümesi de sayfanın Kaynaklar bölümünde tanımlanır. ListView'daki öğelere çekme komutlarını uygulayacaksınız.

İlk olarak, komutları temsil eden çekme öğelerini sayfa düzeyinde kaynaklar olarak oluşturun. SwipeItem simgesi olarak iconSource kullanır. Simgeleri de kaynak olarak oluşturun.

<Page.Resources>
    <SymbolIconSource x:Key="ReplyIcon" Symbol="MailReply"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
    <SymbolIconSource x:Key="PinIcon" Symbol="Pin"/>

    <SwipeItems x:Key="RevealOptions" Mode="Reveal">
        <SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"/>
        <SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="ExecuteDelete" Mode="Execute">
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
                   Background="Red"/>
    </SwipeItems>
</Page.Resources>

Çekme içeriğinizdeki menü öğelerini kısa ve kısa metin etiketlerine saklamayı unutmayın. Bu eylemler, kullanıcının kısa bir süre içinde birden çok kez gerçekleştirmek isteyebileceği birincil eylemler olmalıdır.

Bir koleksiyonda veya ListView'da çalışmak için çekme komutu ayarlamak, tek bir çekme komutu tanımlamayla (daha önce gösterilen) aynıdır, ancak SwipeControl'ünüzü bir DataTemplate içinde tanımlayarak koleksiyondaki her öğeye uygulanmasını sağlarsınız.

Burada, DataTemplate öğesinde SwipeControl uygulanmış bir ListView bulunur. LeftItems ve RightItems özellikleri, kaynak olarak oluşturduğunuz kaydırma öğelerine başvurur.

<ListView x:Name="sampleList" Width="300">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <SwipeControl x:Name="ListViewSwipeContainer"
                          LeftItems="{StaticResource RevealOptions}"
                          RightItems="{StaticResource ExecuteDelete}"
                          Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Çağrılan çekme komutunu işleme

Kaydırma komutu üzerinde işlem yapmak için Invoked etkinliğini işlersiniz. (Kullanıcının komutu nasıl çağırabileceği hakkında daha fazla bilgi için bu makalenin önceki bölümlerindeki Çekme nasıl çalışır? bölümünü gözden geçirin.) Çekme komutu genellikle ListView veya liste benzeri bir senaryoda yer alır. Bu durumda, bir komut çağrıldığında, bu çekilen öğe üzerinde bir eylem gerçekleştirmek istersiniz.

Daha önce oluşturduğunuz silme kaydırma öğesinde tetiklenen olayın nasıl işleneceği.

<SwipeItems x:Key="ExecuteDelete" Mode="Execute">
    <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
               Background="Red" Invoked="Delete_Invoked"/>
</SwipeItems>

Veri öğesi, SwipeControl'ün DataContext öğesidir. Kodunuzda, burada gösterildiği gibi olay args öğesinden SwipeControl.DataContext özelliğini alarak çekilen öğeye erişebilirsiniz.

 private void Delete_Invoked(SwipeItem sender, SwipeItemInvokedEventArgs args)
 {
     sampleList.Items.Remove(args.SwipeControl.DataContext);
 }

Uyarı

Burada, basitlik için öğeler doğrudan ListView.Items koleksiyonuna eklenmiştir, bu nedenle öğe de aynı şekilde silinir. Bunun yerine ListView.ItemsSource öğesini daha tipik bir koleksiyon olarak ayarlarsanız, öğeyi kaynak koleksiyondan silmeniz gerekir.

Bu örnekte, öğeyi listeden kaldırdığınızdan, çekilen öğenin son görsel durumu önemli değildir. Ancak, yalnızca bir eylem gerçekleştirmek ve ardından çekme işleminin tekrar kapanmasını istediğiniz durumlarda, BehaviorOnInvoked özelliğini SwipeBehaviorOnInvoked sabit listesinin değerlerinden birine ayarlayabilirsiniz.

• Otomatik
  • Yürütme modunda, çağrıldığında açılan çekme öğesi açık kalır.
  • Açığa Çıkma modunda, çağrıldığında açılan kaydırma öğesi daralır.
• Kapat
  • Öğe çağrıldığında, kaydırma denetimi, moddan bağımsız olarak her zaman kapanır ve normale döner.
• AçıkKal
  • Öğe çağrıldığında, moddan bağımsız olarak çekme denetimi her zaman açık kalır.

Burada, yanıt çekme öğesi çağrıldıktan sonra kapanacak şekilde ayarlanmıştır.

<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
           Invoked="Reply_Invoked"
           BehaviorOnInvoked = "Close"/>

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

UWP uygulamaları için SwipeControl, WinUI 2'nin bir parçası olarak dahil edilir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri hem Windows.UI.Xaml.Controls (UWP) hem de Microsoft.UI.Xaml.Controls (WinUI) ad alanlarında mevcuttur.

• UWP API'leri:SwipeControl, SwipeItem, ListView sınıfı
• WinUI 2 Api'ler: SwipeControl, SwipeItem
• WinUI 2 Galeri uygulamasını açın ve SwipeControl'un nasıl çalıştığını görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Tüm denetimler için en güncel stilleri, şablonları ve özellikleri almak için en son WinUI 2'yi kullanmanızı öneririz.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:SwipeControl />
<muxc:SwipeItem />

İlgili makaleler

• Liste görünümü ve Kılavuz görünümü
• Öğe kapsayıcıları ve şablonları
• Yenilemek için çek