Xamarin.Forms Yüzpeview

Örneği indirin

, SwipeView Bir içerik öğesi etrafında kaydırılan ve bir çekme hareketi tarafından ortaya çıkarılan bağlam menüsü öğeleri sağlayan bir kapsayıcı denetimidir:

$

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

• LeftItems, SwipeItems denetim sol taraftan çağrıldığında çağrılabilen çekme öğelerini temsil eden türü.
• RightItems, SwipeItems Denetim sağ taraftan çağrıldığında çağrılabilen çekme öğelerini temsil eden türü.
• TopItems, SwipeItems denetimin üstten aşağı doğru alındığı zaman çağrılabilecek öğeleri çekme öğelerini temsil eden tür.
• BottomItems, SwipeItems denetimin alt öğeden itibaren çağrılabilen çekme öğelerini temsil eden türü.
• Threshold, çekme double öğelerini tamamen açığa çıkarmak üzere bir çekme hareketi tetikleyen cihazdan bağımsız birimlerin sayısını temsil eden tür.

Bu özellikler nesneler tarafından desteklenir BindableProperty , bu, veri bağlamalarının hedefleri olabileceği ve stillendirilmiş olduğu anlamına gelir.

Ayrıca, SwipeViewSwipeView sınıfından _ContentView_Content "Data-LinkType =" Absolute-path ">özelliği Xamarin_Forms devralır ContentContentView . ContentÖzelliği SwipeView , sınıfının içerik özelliğidir ve bu nedenle açıkça ayarlanmış olması gerekmez.

SwipeViewSınıfı üç olay da tanımlar:

• SwipeStarted bir çekme başladığında tetiklenir. SwipeStartedEventArgsBu olaya eşlik eden nesne SwipeDirection , türünde bir özelliğe sahiptir SwipeDirection .
• SwipeChanging çekme hareketi olarak harekete geçirilir. SwipeChangingEventArgsBu olaya eşlik eden nesne bir SwipeDirection özelliğine, türüne SwipeDirection ve türünde bir özelliğe sahiptir Offsetdouble .
• SwipeEnded , bir çekme sona erdiğinde harekete geçirilir. SwipeEndedEventArgsBu olaya eşlik eden nesne bir SwipeDirection özelliğine, türüne SwipeDirection ve türünde bir özelliğe sahiptir IsOpenbool .

Ayrıca, SwipeViewOpenClose sırasıyla çekme öğelerini programlı bir şekilde açan ve kapatan yöntemleri içerir.

Bir Yüzgörünümü oluşturma

, SwipeViewSwipeView İçinde sarmalanmış içeriği ve çekme hareketi tarafından ortaya çıkan öğeleri çekme hareketini tanımlamalıdır. Çekme öğeleri, SwipeItem dört yönlü koleksiyonlardan birine yerleştirilmiş bir veya daha fazla nesne (,, SwipeView veya) LeftItemsRightItemsTopItemsBottomItems .

Aşağıdaki örnek, XAML içindeki bir öğesinin örneğini oluşturmayı gösterir SwipeView :

<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, SwipeView içerik şunu içeren bir örneğidir GridLabel :

içeriğinin

Çekme öğeleri, içerik üzerinde eylemler gerçekleştirmek için kullanılır SwipeView ve denetim sol taraftan ayrıldıysa ortaya çıkartılmış olur:

öğeleri için yüzpeview çekme öğeleriçekme

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

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

Öğeleri çekme

LeftItems,, RightItems , TopItems Ve BottomItems koleksiyonları tüm türündedir SwipeItems . SwipeItemsSınıfı aşağıdaki özellikleri tanımlar:

• Mode, SwipeMode bir çekme etkileşiminin etkisini gösteren türü. Çekme modu hakkında daha fazla bilgi için bkz. çekme modu.
• SwipeBehaviorOnInvoked, SwipeBehaviorOnInvokedSwipeView bir çekme öğesi çağrıldıktan sonra nasıl davranacağını gösteren türü. Çekme davranışı hakkında daha fazla bilgi için bkz. çekme davranışı.

Bu özellikler nesneler tarafından desteklenir BindableProperty , bu, veri bağlamalarının hedefleri olabileceği ve stillendirilmiş olduğu anlamına gelir.

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

• BackgroundColorColor Çekme öğesinin arka plan rengini tanımlayan, türünde bir özellik. Bu özellik, bağlanabilir bir özellik tarafından desteklenir.
• InvokedÇekme öğesi yürütüldüğünde tetiklenen bir olay.

Aşağıdaki örnek SwipeItem bir koleksiyonu içindeki iki nesneyi göstermektedir LeftItemsSwipeView :

<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 birinin görünümü SwipeItemText ,, IconImageSource ve özelliklerinin birleşimiyle tanımlanır BackgroundColor :

öğeleri için yüzpeview çekme öğeleriçekme

Bir SwipeItem dokunduğunda, Invoked olayı ateşlenir ve kayıtlı olay işleyicisi tarafından işlenir. Ayrıca, MenuItem.Clicked olay ateşlenir. Alternatif olarak, Command özelliği ICommand çağrıldığında yürütülecek bir uygulamaya ayarlanabilir SwipeItem .

Çekme öğelerini nesne olarak tanımlamaya ek olarak SwipeItem , Özel Çekme öğesi görünümlerini de tanımlamak mümkündür. Daha fazla bilgi için bkz. Özel Çekme öğeleri.

Çekme yönü

SwipeView , nesnelerin eklendiği yönlü koleksiyon tarafından tanımlanmakta olan, çekme yönünde dört farklı çekme yönü destekler SwipeItemsSwipeItem . Her çekme yönü kendi çekme öğelerini tutabilir. Örneğin, aşağıdaki örnekte SwipeView çekme öğeleri çekme yönüne bağlı olan bir gösterilmektedir:

<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, SwipeView içerik sağa veya sola alınabilir. Sağa doğru kaydır, silme çekme öğesini gösterir, sola kaydırarak Sık kullanılanlara ve çekme öğelerini paylaşmaya göre görüntülenir.

SwipeStarted, SwipeChanging Ve olayları, SwipeEnded çekme yönünü SwipeDirection olay bağımsız değişkenlerinin özelliği aracılığıyla rapor ediyor. Bu özellik SwipeDirection , dört üye içeren bir sabit listesi olan türüdür:

• Right doğru bir çekin oluştuğunu belirtir.
• Left sola doğru bir çekin oluştuğunu belirtir.
• Up yukarı doğru bir çekin oluştuğunu gösterir.
• Down aşağı doğru bir çekin oluştuğunu gösterir.

Çekme eşiği

SwipeViewThresholddouble , çekme öğelerini tamamen açığa çıkarmak için bir çekme hareketi tetikleyen cihazdan bağımsız birimlerin sayısını temsil eden, türünde bir özelliği içerir.

Aşağıdaki örnek, SwipeView özelliğini ayarlayan bir göstermektedir 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 gösterildiğinde 200 cihazdan bağımsız birim için alınmalıdır SwipeItem .

Çekme modu

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

• Reveal bir çekin çekme öğelerini ortaya çıkardığını gösterir. Bu, özelliğin varsayılan değeridir SwipeItems.Mode .
• Execute bir çekin çekme öğelerini yürüttüğünü gösterir.

Gösterme modunda, Kullanıcı bir SwipeView veya daha fazla çekme öğelerinden oluşan bir menüyü açmak için bir veya daha fazla çekme öğesi içeren bir menü açar ve bunu yürütmek için bir çekme öğesine açıkça dokunmalıdır. Ç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ı, SwipeView daha sonra otomatik olarak yürütülen ve daha sonra bir çekme öğelerinden oluşan bir menüyü açmak için temizler. Yürütme sonrasında, çekme öğeleri kapatılır ve SwipeView içerik yeniden görüntülenir.

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

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

Bu örnekte, SwipeView içerik hemen yürütülen çekme öğesini açığa çıkarmak için kullanılabilir. Bu yürütme sonrasında SwipeView içerik yeniden görüntülenir.

Çekme davranışı

Sınıfı, bir SwipeItemsSwipeBehaviorOnInvokedSwipeView çekme öğesi çağrıldıktan sonra nasıl davranacağını gösteren bir özelliğine sahiptir. Bu özellik, SwipeBehaviorOnInvoked numaralandırma üyelerinden birine ayarlanmalıdır:

• AutoSwipeViewbir çekme öğesi çağrıldığında ve yürütme modunda, SwipeView bir çekme öğesi çağrıldıktan sonra açık kalmaya devam eder. Bu, özelliğin varsayılan değeridir SwipeItems.SwipeBehaviorOnInvoked .
• CloseSwipeViewbir çekme öğesi çağrıldıktan sonra kapandığını gösterir.
• RemainOpenSwipeViewbir çekme öğesi çağrıldığında açık kalır olduğunu gösterir.

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

<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 ile tanımlanabilir SwipeItemView . SwipeItemViewSınıfı sınıfından türetilir ContentView ve aşağıdaki özellikleri ekler:

• Command, ICommand bir çekme öğesi dokunduğunda yürütülecek olan türü.
• CommandParameterobjectöğesine geçirilen parametresi olan türü Command .

Bu özellikler nesneler tarafından desteklenir BindableProperty , bu, veri bağlamalarının hedefleri olabileceği ve stillendirilmiş olduğu anlamına gelir.

SwipeItemViewSınıfı ayrıca, Invoked öğesi yürütüldükten sonra, öğe dokunulduğunda tetiklenen bir olay tanımlar Command .

Aşağıdaki örnek, SwipeItemViewLeftItems bir öğesinin koleksiyonundaki bir nesnesini gösterir SwipeView :

<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 bir içerir StackLayoutEntryLabel . Kullanıcı girdisini öğesine girdikten sonra Entry , öğesinin geri kalanı SwipeViewItemICommand özelliği tarafından tanımlanan öğesini yürütür SwipeItemView.Command .

Program aracılığıyla bir Yüzpeview 'ı açma ve kapatma

SwipeView , OpenClose sırasıyla çekme öğelerini programlı olarak açan ve kapatan yöntemleri içerir. Varsayılan olarak, bu yöntemler SwipeView Açık veya kapalı olduğunda ' ı canlandırır.

OpenYöntemi, OpenSwipeItem açılacak yönü belirtmek için bir bağımsız değişken gerektirir SwipeView . OpenSwipeItemNumaralandırmada dört üye vardır:

• LeftItems, ' nin,, SwipeView koleksiyondaki çekme öğelerini açığa çıkarmak için soldan açılacağını gösterir LeftItems .
• TopItems,, SwipeView koleksiyondaki çekme öğelerini göstermek için üst öğeden açılacak olduğunu gösterir TopItems .
• RightItems, bu, SwipeView koleksiyondaki çekme öğelerini göstermek için sağ taraftaki açılacak olduğunu gösterir RightItems .
• BottomItems, SwipeView koleksiyondaki çekme öğelerini göstermek için alt öğeden açılacak olduğunu gösterir BottomItems .

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

SwipeViewAdlandırılmış swipeView olarak, aşağıdaki örnek, SwipeView koleksiyondaki çekme öğelerini göstermek için nasıl açılacağını göstermektedir LeftItems :

swipeView.Open(OpenSwipeItem.LeftItems);

swipeViewDaha sonra Close yöntemiyle kapatılabilir:

swipeView.Close();

Bir Yüzgörünümü devre dışı bırakma

Bir uygulama, içerik bir öğe çekin geçerli bir işlem olmadığı bir durum girebilir. Böyle durumlarda, SwipeView özelliği olarak ayarlanarak devre dışı bırakılabilir IsEnabledfalse . Bu, kullanıcıların çekme öğelerini açığa çıkarmak için içerik çekme yapabilmesini engeller.

Ayrıca, Command bir veya özelliğini tanımlarken, SwipeItemSwipeItemViewCanExecuteICommand çekme öğesini etkinleştirmek veya devre dışı bırakmak için öğesinin temsilcisi belirtilebilir.

İlgili bağlantılar

• Yüzpeview (örnek)
• Xamarin.Forms MenuItem