Xamarin.Forms SwipeView

Stažení ukázky

SwipeViewJe ovládací prvek kontejneru, který se zabalí kolem položky obsahu a poskytuje kontextové nabídky, které jsou odhaleny gestem potažení:

– snímky

SwipeView definuje následující vlastnosti:

• LeftItemstyp SwipeItems , který představuje položky potažení, které mohou být vyvolány, když je ovládací prvek přetáhnutím z levé strany.
• RightItemstyp SwipeItems , který představuje položky potažení, které mohou být vyvolány, když je ovládací prvek přetáhnutím na pravé straně.
• TopItemstyp SwipeItems , který představuje položky potažení, které mohou být vyvolány, když je ovládací prvek potáhnutím shora dolů.
• BottomItemstyp SwipeItems , který představuje položky potažení, které mohou být vyvolány, když je ovládací prvek potáhnutím prstem směrem nahoru.
• Thresholdtyp double , který představuje počet jednotek nezávislých na zařízení, které aktivují gesto potažení, aby bylo možné plně odhalit položky potažení.

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a se styly.

Kromě toho SwipeView dědí Xamarin_Forms SwipeView vlastnost _ContentView_Content data-LINKTYPE = "absolutní cesta" >Content z ContentView třídy. ContentVlastnost je vlastnost obsahu SwipeView třídy, a proto není nutné ji explicitně nastavit.

SwipeViewTřída také definuje tři události:

• SwipeStarted je aktivována při zahájení potažení. SwipeStartedEventArgsObjekt, který provází tuto událost SwipeDirection , má vlastnost typu SwipeDirection .
• SwipeChanging je aktivována při přesunu potažení. SwipeChangingEventArgsObjekt, který provází tuto událost SwipeDirection , má vlastnost typu SwipeDirection a Offset vlastnost typu double .
• SwipeEnded je vyvolána, když přetáhnutí skončí. SwipeEndedEventArgsObjekt, který provází tuto událost SwipeDirection , má vlastnost typu SwipeDirection a IsOpen vlastnost typu bool .

Kromě toho SwipeView zahrnuje Open a Close metody, které programově otevírají a zavřou položky potažení v uvedeném pořadí.

Vytvoření SwipeView

SwipeViewMusí definovat obsah, který se SwipeView zalomí, a položky potažení, které jsou odhaleny gestem potažení. Položky potažení jsou jedním nebo více SwipeItem objekty, které jsou umístěny v jedné ze čtyř SwipeView směrných kolekcí – LeftItems , RightItems , TopItems nebo BottomItems .

Následující příklad ukazuje, jak vytvořit instanci SwipeView v jazyce XAML:

<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>

Ekvivalentní kód jazyka C#:

// 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
};

V tomto příkladu SwipeView je obsahem a Grid , který obsahuje Label :

Snímek obrazovky

Položky potažení se používají k provádění akcí s SwipeView obsahem a jsou odhaleny, když je ovládací prvek přetáhnutím na levou stranu:

–

Ve výchozím nastavení se položka potažení spustí, když ji uživatel klepne. Toto chování však lze změnit. Další informace najdete v tématu režim potažení.

Po provedení položky potažení se položky potažení skryjí a SwipeView obsah se znovu zobrazí. Toto chování však lze změnit. Další informace najdete v tématu chování potažení.

Položky potažení

LeftItemsKolekce, RightItems , TopItems a BottomItems jsou všechny typu SwipeItems . SwipeItemsTřída definuje následující vlastnosti:

• Modetyp SwipeMode , který označuje účinek interakce potažení. Další informace o režimu potažení najdete v tématu režim potažení.
• SwipeBehaviorOnInvokedtyp SwipeBehaviorOnInvoked , který označuje, jak se SwipeView chová po vyvolání položky potažení. Další informace o chování potažení najdete v tématu chování potažení.

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a se styly.

Každá položka potažení je definována jako SwipeItem objekt, který je umístěn do jedné ze čtyř SwipeItems směrných kolekcí. SwipeItemTřída je odvozena z MenuItem třídy a přidává následující členy:

• BackgroundColorVlastnost typu Color , která definuje barvu pozadí položky potažení. Tato vlastnost je zajištěna vlastností BIND.
• InvokedUdálost, která je aktivována při spuštění položky potažení.

Následující příklad ukazuje dva SwipeItem objekty v LeftItems kolekci a 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 -->
</SwipeView>

Vzhled každé z nich SwipeItem je definován kombinací TextIconImageSource vlastností, a BackgroundColor :

–

Když SwipeItem je klepnuto na, jeho Invoked událost je aktivována a je zpracována obslužnou rutinou registrované události. Kromě toho se MenuItem.Clicked událost aktivuje. Alternativně Command lze vlastnost nastavit na ICommand implementaci, která bude provedena při SwipeItem vyvolání.

Kromě definování položek potažení jako SwipeItem objektů je také možné definovat vlastní zobrazení položky potažení. Další informace najdete v tématu vlastní položky potažení.

Směr potažení

SwipeView podporuje čtyři různé směry potažení, přičemž směr potažení je definován směrovou SwipeItems kolekcí, SwipeItem do které jsou objekty přidány. Každý směr potažení může obsahovat vlastní položky potažení. Například následující příklad ukazuje, SwipeView jehož položky potažení závisí na směru potažení:

<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>

V tomto příkladu SwipeView může být obsah potažení vpravo nebo vlevo. Navýšení prstu na pravé straně zobrazí položku Odstranit potáhnutí, zatímco prstem vlevo se zobrazí Oblíbené položky a sdílejte je.

SwipeStartedUdálosti, SwipeChanging a SwipeEnded nahlásí směr potáhnutí přes SwipeDirection vlastnost v argumentech události. Tato vlastnost je typu SwipeDirection , což je výčet sestávající ze čtyř členů:

• Right indikuje, že došlo k pravému potažení.
• Left indikuje, že došlo k levému potažení.
• Up indikuje, že došlo k protáhnutí nahoru.
• Down indikuje, že došlo k potažení směrem dolů.

Prahová hodnota potažení

SwipeView zahrnuje Threshold vlastnost typu double , která představuje počet jednotek nezávislých na zařízení, které aktivují gesto potažení, aby se plně odhalily položky potažení.

Následující příklad ukazuje SwipeView , který nastaví Threshold vlastnost:

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

V tomto příkladu je SwipeView nutné potažení 200 pro jednotky nezávislé na zařízení, než SwipeItem je plně odhaleno.

Režim potažení

SwipeItemsTřída má Mode vlastnost, která označuje účinek interakce potažení. Tato vlastnost by měla být nastavena na jeden ze SwipeMode členů výčtu:

• Reveal indikuje, že potažení odhalí položky potažení. Toto je výchozí hodnota SwipeItems.Mode Vlastnosti.
• Execute označuje, že potáhnutím se spustí položky potažení.

V režimu zobrazení uživatel přetáhne SwipeView nabídku, která se skládá z jedné nebo více položek potažení, a musí explicitně klepnout na položku potáhnutím, aby ji mohla spustit. Po provedení položky potažení se položky potažení zavřou a SwipeView obsah se znovu zobrazí. V režimu spuštění uživatel potáhnutím myši SwipeView otevře nabídku, která se skládá z jedné potáhnutí myši, které se pak automaticky spustí. Po provedení se položky potažení zavřou a SwipeView obsah se znovu zobrazí.

Následující příklad ukazuje, že je SwipeView nakonfigurováno použití režimu provedení:

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

V tomto příkladu SwipeView lze obsah potažením prstem Zobrazit položku potažení, která se spustí okamžitě. Po provedení se SwipeView obsah znovu zobrazí.

Chování potažení

SwipeItemsTřída má SwipeBehaviorOnInvoked vlastnost, která označuje, jak se SwipeView chová po vyvolání položky potažení. Tato vlastnost by měla být nastavena na jeden ze SwipeBehaviorOnInvoked členů výčtu:

• Auto označuje, že v režimu zobrazení je SwipeView vyvoláno zavření po vyvolání položky potažení a v režimu spuštění SwipeView zůstane otevřené po vyvolání položky potažení. Toto je výchozí hodnota SwipeItems.SwipeBehaviorOnInvoked Vlastnosti.
• Close indikuje, že SwipeView se ukončí ukončení po vyvolání položky potažení.
• RemainOpen označuje, že SwipeView zůstane otevřené po vyvolání položky potažení.

Následující příklad ukazuje, že SwipeView je nakonfigurované tak, aby zůstalo otevřené po vyvolání položky potažení:

<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>

Vlastní položky potažení

Vlastní položky potažení lze definovat s SwipeItemView typem. SwipeItemViewTřída je odvozena z ContentView třídy a přidává následující vlastnosti:

• Commandtyp ICommand , který se spustí při klepnutí na položku potažení.
• CommandParametertyp object , který je parametr, který je předán do Command .

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a se styly.

SwipeItemViewTřída také definuje Invoked událost, která se aktivuje při klepnutí na položku po jejím Command spuštění.

Následující příklad ukazuje SwipeItemView objekt v LeftItems kolekci 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>

V tomto příkladu obsahuje příkaz SwipeItemViewStackLayout obsahující Entry a Label . Poté, co uživatel zadá vstup do Entry , může být na zbytek v případě, že je SwipeViewItem spuštěna ICommandSwipeItemView.Command vlastnost definovaná vlastností.

Programové otevření a zavření SwipeView

SwipeView zahrnuje Open a Close metody, které programově otevírají a zavřou položky potažení v uvedeném pořadí. Ve výchozím nastavení tyto metody budou SwipeView při otevření nebo zavření animovány.

OpenMetoda vyžaduje OpenSwipeItem argument pro určení směru, SwipeView ze kterého bude otevřen. OpenSwipeItemVýčet má čtyři členy:

• LeftItems, což znamená, že SwipeView bude otevřen na levé straně, aby bylo možné odhalit položky potažení v LeftItems kolekci.
• TopItems, což znamená, že SwipeView bude otevřen v horní části, aby bylo možné zobrazit položky potažení v TopItems kolekci.
• RightItems, což znamená, že SwipeView bude otevřen na pravé straně, aby bylo možné odhalit položky potažení v RightItems kolekci.
• BottomItems, což znamená, že SwipeView bude otevřen z dolní části, aby bylo možné odhalit položky potažení BottomItems v kolekci.

Kromě toho Open Metoda přijímá také volitelný bool argument, který definuje, zda bude SwipeView při otevření animován.

V případě SwipeView pojmenovaného swipeView , následující příklad ukazuje, jak otevřít a SwipeView odhalovat položky potažení v LeftItems kolekci:

swipeView.Open(OpenSwipeItem.LeftItems);

Je swipeView možné ji uzavřít pomocí Close metody:

swipeView.Close();

Zakázat SwipeView

Aplikace může zadat stav, kde přetažení položky obsahu není platná operace. V takových případech je SwipeView možné zakázat nastavením IsEnabled vlastnosti na false . Zabráníte tak uživatelům, aby provedli potáhnutím obsahu, aby odhalili položky potažení.

Kromě toho při definování Command vlastnosti SwipeItem nebo SwipeItemViewCanExecuteICommand může být delegát typu určen pro povolení nebo zakázání položky potažení.

Související odkazy

• SwipeView (ukázka)
• Xamarin.Forms MenuItem