Xamarin.Forms SwipeView

SwipeView, bir içerik öğesinin çevresinde kaydırılan ve çekme hareketiyle ortaya çıkarılan bağlam menüsü öğeleri sağlayan bir kapsayıcı denetimidir:

SwipeView aşağıdaki özellikleri tanımlar:

LeftItems, türündedir SwipeItems. Bu, denetim sol taraftan çekildiğinde çağrılabilen çekme öğelerini temsil eder.
RightItems, türündedir SwipeItemsve denetim sağ taraftan çekildiğinde çağrılabilen çekme öğelerini temsil eder.
TopItems, türündedir SwipeItems. Bu, denetim yukarıdan aşağı doğru çekildiğinde çağrılabilen çekme öğelerini temsil eder.
BottomItems, türündedir SwipeItemsve denetim aşağıdan yukarı doğru çekildiğinde çağrılabilen çekme öğelerini temsil eder.
Threshold, türündedir doubleve çekme öğelerini tam olarak göstermek için çekme hareketini tetikleyen cihazdan bağımsız birim sayısını temsil eder.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Ayrıca, SwipeView özelliği sınıfından devralır Content ContentView . Content özelliği sınıfının içerik özelliğidir SwipeView ve bu nedenle açıkça ayarlanması gerekmez.

SwipeView sınıfı ayrıca üç olay tanımlar:

SwipeStarted bir çekme işlemi başladığında tetiklenir. Bu SwipeStartedEventArgs olaya eşlik eden nesnenin türünde SwipeDirectionbir SwipeDirection özelliği vardır.
SwipeChanging çekme hareketi ilerledikçe tetiklenir. Bu SwipeChangingEventArgs olaya eşlik eden nesnenin türünde bir SwipeDirection özelliği ve türünde SwipeDirectiondoublebir Offset özelliği vardır.
SwipeEnded çekme işlemi sona erdiğinde tetiklenir. Bu SwipeEndedEventArgs olaya eşlik eden nesnenin türünde bir SwipeDirection özelliği ve türünde SwipeDirectionboolbir IsOpen özelliği vardır.

Ayrıca, SwipeView sırasıyla çekme öğelerini program aracılığıyla açan ve kapatan ve yöntemleri içerir Open Close .

Not

SwipeView , iOS ve Android'de bir açılırken kullanılan geçişi denetleyan platforma özgü bir SwipeViewsürümüne sahiptir. Daha fazla bilgi için bkz . iOS'ta SwipeView Çekme Geçiş Modu ve Android'de SwipeView Çekme Geçiş Modu.

SwipeView oluşturma

bir SwipeView öğesinin kaydırdığı SwipeView içeriği ve çekme hareketiyle ortaya çıkarılan çekme öğelerini tanımlaması gerekir. Çekme öğeleri, dört yönlü koleksiyondan birine yerleştirilen bir veya daha fazla SwipeItem nesnedir: LeftItems, RightItems, TopItemsveya BottomItems.SwipeView

Aşağıdaki örnekte XAML'de örneği SwipeView oluşturma gösterilmektedir:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

Eşdeğer C# kodu:

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Color.LightGray
};
grid.Children.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

Bu örnekte içerik, SwipeView öğesini içeren bir LabeliçeriktirGrid:

Çekme öğeleri içerik üzerinde SwipeView eylem gerçekleştirmek için kullanılır ve denetim sol taraftan çekildiğinde gösterilir:

Varsayılan olarak, kullanıcı tarafından dokunulduğunda çekme öğesi yürütülür. Ancak, bu davranış değiştirilebilir. Daha fazla bilgi için bkz . Çekme modu.

Bir çekme öğesi yürütüldükten sonra, çekme öğeleri gizlenir SwipeView ve içerik yeniden görüntülenir. Ancak, bu davranış değiştirilebilir. Daha fazla bilgi için bkz . Çekme davranışı.

Not

çekme içeriği ve çekme öğeleri satır içine yerleştirilebilir veya kaynak olarak tanımlanabilir.

Öğeleri çekme

LeftItems, RightItems, TopItemsve BottomItems koleksiyonlarının tümü türündedirSwipeItems. SwipeItems sınıfı aşağıdaki özellikleri tanımlar:

Mode, türündedir SwipeModeve çekme etkileşiminin etkisini gösterir. Çekme modu hakkında daha fazla bilgi için bkz . Çekme modu.
SwipeBehaviorOnInvoked, türündedir SwipeBehaviorOnInvoked. Bu, çekme öğesi çağrıldıktan sonra nasıl davrandığını gösterir SwipeView . Çekme davranışı hakkında daha fazla bilgi için bkz . Çekme davranışı.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Her çekme öğesi, dört SwipeItems yönlü koleksiyondan birine yerleştirilmiş bir SwipeItem nesne olarak tanımlanır. sınıfı SwipeItem sınıfından MenuItem türetilir ve aşağıdaki üyeleri ekler:

BackgroundColor Çekme öğesinin arka plan rengini tanımlayan, türünde Colorbir özellik. Bu özellik, bağlanabilir bir özellik tarafından yedeklenmiştir.
Invoked Çekme öğesi yürütürken tetiklenen bir olay.

Önemli

MenuItem sınıfı, , , CommandParameterIconImageSourceve Textgibi Commandçeşitli özellikleri tanımlar. Bu özellikler, görünümünü tanımlamak ve çekme öğesi çağrıldığında yürütülen bir ICommand nesne tanımlamak için bir SwipeItem nesne üzerinde ayarlanabilir. Daha fazla bilgi için bkz Xamarin.Forms . MenuItem.

Aşağıdaki örnekte, bir SwipeViewkoleksiyonundaki LeftItems iki SwipeItem nesne gösterilmektedir:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Her SwipeItem birinin görünümü, , IconImageSourceve BackgroundColor özelliklerinin bir bileşimiyle Texttanımlanır:

öğesine SwipeItem dokunulduğunda, Invoked olayı tetiklenir ve kayıtlı olay işleyicisi tarafından işlenir. Buna ek olarak, MenuItem.Clicked olay tetikler. Alternatif olarak, Command özelliği çağrıldığında SwipeItem yürütülecek bir ICommand uygulamaya ayarlanabilir.

Not

görünümü SwipeItem yalnızca veya IconImageSource özellikleri kullanılarak Text tanımlandığında, içerik her zaman ortalanır.

Çekme öğelerini nesne olarak SwipeItem tanımlamanın yanı sıra, özel çekme öğesi görünümleri de tanımlayabilirsiniz. Daha fazla bilgi için bkz . Özel çekme öğeleri.

Çekme yönü

SwipeView dört farklı çekme yönünü destekler ve çekme yönü nesnelerin eklendiği yön SwipeItems koleksiyonu SwipeItem tarafından tanımlanır. Her çekme yönü kendi çekme öğelerini tutabilir. Örneğin, aşağıdaki örnekte, çekme öğeleri çekme yönüne bağlı olan bir SwipeView gösterilir:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

Bu örnekte içerik SwipeView sağa veya sola doğru çekilebilir. Sağa doğru çekildiğinde Sil çekme öğesi gösterilirken, sola doğru çekildiğinde Sık Kullanılan ve Paylaş çekme öğeleri gösterilir.

Uyarı

Üzerinde bir kerede SwipeViewyalnızca bir yönlü SwipeItems koleksiyon örneği ayarlanabilir. Bu nedenle, üzerinde SwipeViewiki LeftItems tanımınız olamaz.

SwipeStarted, SwipeChangingve SwipeEnded olayları, olay bağımsız değişkenlerindeki özelliği aracılığıyla SwipeDirection çekme yönünü bildirir. Bu özellik, dört üyeden oluşan bir numaralandırma olan türündedir SwipeDirection:

Right bir sağa çekmenin gerçekleştiğini gösterir.
Left bir sola çekmenin gerçekleştiğini gösterir.
Up yukarı doğru çekmenin gerçekleştiğini gösterir.
Down aşağı doğru çekmenin gerçekleştiğini gösterir.

Çekme eşiği

SwipeView , çekme öğelerini tam olarak Threshold ortaya çıkarmak için çekme hareketini tetikleyen cihazdan bağımsız birim sayısını temsil eden türünde doublebir özellik içerir.

Aşağıdaki örnekte özelliğini ayarlayan bir SwipeView gösterilmektedir Threshold :

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Bu örnekte, SwipeView tam olarak ortaya çıkmadan önce 200 cihazdan SwipeItem bağımsız birim için çekilmelidir.

Not

Threshold Şu anda özelliği yalnızca iOS ve Android'de uygulanmaktadır.

Çekme modu

sınıfı SwipeItems , çekme etkileşiminin etkisini gösteren bir Mode özelliğe sahiptir. Bu özellik, numaralandırma üyelerinden SwipeMode birine ayarlanmalıdır:

Reveal , çekme işleminin çekme öğelerini ortaya çıkardığını gösterir. Bu özelliğin varsayılan değeridir SwipeItems.Mode .
Execute , çekme işleminin çekme öğelerini yürüttüğüne işaret eder.

Gösterme modunda, kullanıcı bir SwipeView veya daha fazla çekme öğesinden oluşan bir menüyü açmak için bir çekme hareketi gerçekleştirir ve bunu yürütmek için bir çekme öğesine açıkça dokunması gerekir. Çekme öğesi yürütüldükten sonra, çekme öğeleri kapatılır ve SwipeView içerik yeniden görüntülenir. Yürütme modunda kullanıcı, otomatik olarak yürütülen bir çekme öğesinden daha oluşan bir menüyü açmak için öğesini çekin SwipeView . Yürütme sonrasında, çekme öğeleri kapatılır ve SwipeView içerik yeniden görüntülenir.

Aşağıdaki örnekte, yürütme modunu kullanacak şekilde yapılandırılmış bir SwipeView örnek gösterilmektedir:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Bu örnekte içerik, SwipeView hemen yürütülen çekme öğesini göstermek için sağa doğru çekilebilir. Yürütmenin ardından SwipeView içerik yeniden görüntülenir.

Çekme davranışı

sınıfı SwipeItems , bir SwipeBehaviorOnInvoked çekme öğesi çağrıldıktan sonra nasıl SwipeView davrandığını gösteren bir özelliğe sahiptir. Bu özellik, numaralandırma üyelerinden SwipeBehaviorOnInvoked birine ayarlanmalıdır:

Auto , bir çekme öğesi çağrıldıktan sonra gösterme modunda SwipeView kapandığını ve yürütme modunda SwipeView bir çekme öğesi çağrıldıktan sonra açık kaldığını gösterir. Bu özelliğin varsayılan değeridir SwipeItems.SwipeBehaviorOnInvoked .
CloseSwipeView, çekme öğesi çağrıldıktan sonra kapatıldığını gösterir.
RemainOpenSwipeView, çekme öğesi çağrıldıktan sonra açık kaldığını gösterir.

Aşağıdaki örnekte, çekme öğesi çağrıldıktan sonra açık kalacak şekilde yapılandırılmış bir örnek gösterilmektedir SwipeView :

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Özel çekme öğeleri

Özel çekme öğeleri türüyle SwipeItemView tanımlanabilir. sınıfı SwipeItemView sınıfından ContentView türetilir ve aşağıdaki özellikleri ekler:

Command, türünde ICommandbir çekme öğesine dokunulduğunda yürütülür.
CommandParameter, türündeki objectparametresine Commandgeçirilir.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

sınıfı, SwipeItemView öğe yürütüldükten sonra Command dokunulduğunda tetiklenen bir Invoked olayı da tanımlar.

Aşağıdaki örnekte, koleksiyonundaki LeftItems bir SwipeItemView SwipeViewnesnesi gösterilmektedir:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Bu örnekte , SwipeItemView ve içeren Entry bir StackLayout Labelöğesini içerir. Kullanıcı içine Entrygirdi girdikten sonra, özelliği tarafından tanımlanan öğesini yürüten öğesinin ICommand geri kalanına SwipeViewItem SwipeItemView.Command dokunabilirsiniz.

SwipeView'ı program aracılığıyla açma ve kapatma

SwipeViewprogram aracılığıyla açılan ve çekme öğelerini kapatan ve Close yöntemlerini içerirOpen. Varsayılan olarak, bu yöntemler açıldığında veya kapatıldığında öğesine SwipeView animasyon ekler.

Open yöntemi, açılacağı yönü SwipeView belirtmek için bir OpenSwipeItem bağımsız değişken gerektirir. Numaralandırmanın OpenSwipeItem dört üyesi vardır:

LeftItems, öğesinin SwipeView soldan açılacağını gösterir ve koleksiyondaki LeftItems çekme öğelerini gösterir.
TopItemsögesini SwipeView seçin. Bu, koleksiyondaki çekme öğelerini göstermek için öğesinin üstten TopItems açılacağını gösterir.
RightItems, öğesinin SwipeView sağdan açılacağını ve koleksiyondaki RightItems çekme öğelerinin gösterileceğini gösterir.
BottomItemsöğesini seçin SwipeView . Bu, koleksiyondaki BottomItems çekme öğelerini göstermek için öğesinin alttan açılacağını gösterir.

Ayrıca yöntemi, Open açıldığında animasyonlu olup olmayacağını SwipeView tanımlayan isteğe bağlı bool bir bağımsız değişken de kabul eder.

adlı swipeViewbir SwipeView veri verüldüğünde, aşağıdaki örnekte koleksiyondaki LeftItems çekme öğelerini göstermek için öğesinin SwipeView nasıl açileceğini gösterilmektedir:

swipeView.Open(OpenSwipeItem.LeftItems);

swipeView daha sonra yöntemiyle Close kapatılabilir:

swipeView.Close();

Not

yöntemi, Close kapatıldığında animasyonlu olup olmayacağını SwipeView tanımlayan isteğe bağlı bool bir bağımsız değişken de kabul eder.

SwipeView'ı devre dışı bırakma

Bir uygulama, içerik öğesini çekmenin geçerli bir işlem olmadığı bir durum girebilir. Böyle durumlarda, SwipeView özelliği falseolarak ayarlanarak IsEnabled devre dışı bırakılabilir. Bu, kullanıcıların çekme öğelerini ortaya çıkarmak için içerik çekebilmesini engeller.

Buna ek olarak, veya CanExecute SwipeItem SwipeItemViewözelliğini tanımlarkenCommand, çekme öğesini etkinleştirmek veya devre dışı bırakmak için öğesinin temsilcisi ICommand belirtilebilir.

Xamarin.Forms MenuItem

Last updated on 2020-01-11

Aracılığıyla paylaş

Xamarin.Forms SwipeView

SwipeView oluşturma

Öğeleri çekme

Çekme yönü

Çekme eşiği

Çekme modu

Çekme davranışı

Özel çekme öğeleri

SwipeView'ı program aracılığıyla açma ve kapatma

SwipeView'ı devre dışı bırakma

İlgili bağlantılar

Ek kaynaklar