Xamarin.Forms.SwipeView Spec

[hartez]

SwipeView

Swiping on an element to reveal or execute contextual commands is an increasingly common paradigm, especially when working with lists. This view provides support for that interaction.

_Note: Nothing in this specification is guaranteed to be final; all features, implementations, and interfaces are subject to change._

SwipeItem

Represents an individual command in a SwipeView.

public class SwipeItem : ContextItem
{
    public static readonly BindableProperty BackgroundColorProperty;
    public Color BackgroundColor { get; set; }
}

SwipeItems

Represents a collection of SwipeItem objects

public class SwipeItems : IList<SwipeItem>
{
    public static SwipeMode Mode { get; set; }
}

Properties

| API | Description |
| ------------- | ------------- |
| SwipeMode | Gets or sets the SwipeMode of the item. |

Properties

| API | Description |
| ------------- | ------------- |
| BackgroundColor| Gets or sets the background color of the item. |

SwipeMode

Defines the possible swipe interactions

public enum SwipeMode 
{
    Reveal, // Display additional context items which may be selected
    Execute // Immediately execute the associated command
}

SwipeView

Represents a container that provides access to contextual commands through touch interactions.

public class SwipeView : ContentView
{
    public static readonly BindableProperty LeftItems;
    public SwipeItems LeftItems { get; set; }

    public static readonly BindableProperty RightItems;
    public SwipeItems RightItems { get; set; }  

    public static readonly BindableProperty TopItems;
    public SwipeItems TopItems { get; set; }

    public static readonly BindableProperty BottomItems;    
    public SwipeItems BottomItems { get; set; }  
}

Properties

| API | Description |
| ------------- | ------------- |
| LeftItems | Gets or sets the items that can be invoked when the control is swiped from the left side. |
| RightItems | Gets or sets the items that can be invoked when the control is swiped from the right side. |
| TopItems | Gets or sets the items that can be invoked when the control is swiped from the top. |
| BottomItems | Gets or sets the items that can be invoked when the control is swiped from the bottom. |

Examples

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Reveal">
            <SwipeItem Text="Favorite" Command="{Binding Favorite}">
                <SwipeItem.Icon>
                    <FontIconSource Glyph="&#xE734;"/>
                </SwipeItem.Icon>
            </SwipeItem>
            <SwipeItem Text="Share" Command="{Binding Share}">
                <SwipeItem.Icon>
                    <FontIconSource Glyph="&#xE27D;"/>
                </SwipeItem.Icon>
            </SwipeItem>
        </SwipeItems>
    </SwipeView.LeftItems>

    <SwipeView.RightItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete" Command="{Binding Delete}">
                <SwipeItem.Icon>
                    <FontIconSource Glyph="&#xE74D;"/>
                </SwipeItem.Icon>
            </SwipeItem>
        </SwipeItems>
    </SwipeView.LeftItems>

    <!-- Swipeable content -->
    <Frame>
        <Label Text="Foo" />
    </Frame>
</SwipeView>

In this example, the Frame and its contents can be swiped left or right. Swiping to the right will immediately execute the bound "Delete" command. Swiping to the left will reveal two options: "Share" and "Favorite". Tapping on those items will execute their respective commands.

[jsuarezruiz]

We have the implementation of this Spec in: https://github.com/xamarin/Xamarin.Forms/pull/7603

After implementing the Spec I have several ideas that would improve the possibilities of the SwipeView.

Right now each SwipeItem allows basic customization; the background color, text, icon, etc. It would be nice to have a more customizable SwipeItem, using a View.

public interface ISwipeItem
{
     ICommand Command { get; set; }
     object CommandParameter { get; set; }

     event EventHandler<SwipeItemInvokedEventArgs> Invoked;
}

public class SwipeItem : ContextItem, ISwipeItem
{

}

public class CustomSwipeItem : ContentView, ISwipeItem
{

}

_NOTE: I have a small prototype of this on a branch._

There may be cases where want to open (or close) the SwipeView programmatically. To do this, I propose to add a new property to the SwipeView, IsOpen.

If custom SwipeItem is included, I would also add a new event, SwipeThresholdChanged. In this way, you can obtain the value of swipeThreshold to, for example, apply animations to the Custom SwipeItems, etc.

[samhouts]

closed by #7603