Allowing a Horizontal list to have a Slidable items [XAML,UWP]

For a hackathon I needed to have items that where slideable when they where in a Horizontal list.
To do this I decided to use the UWP Community Toolkit and rework the SlidableListItem control.

To speed things up we will need to use the Animations from the UWP Community toolkit, install it by using package manager:



Now you should be able to use this namespace :

using Microsoft.Toolkit.Uwp.UI.Animations;

Next lets have a look at the SlidableItem from the UWP toolkit.  You can see that it has a slidable mechanism from left to right and right to left, and that it uses animation to transition from on state to another.

I converted this control so that it would work for my needs, basically all I did was replace these with a mechanism from top to bottom and left to top.  Also all of the animations where changed from the X axis to the Y axis and I had to rework how the animations worked.

You can see the changes here on the Github page, I wont go over them as there isnt any added value for me to do this.

In the demo app, you will see a horizontal list with items in it:

When you swipe down in this sample you will see a red background with the wording delete (you can customise this as you wish) :

When you swipe up you will see another possible action:

To customize your DataTemplate have a look at the one in the sample app:

 <DataTemplate x:Key="KeyQueueSwipeTemplate">
                <local:SlidableGridItem
                    MinWidth="300"
                    MaxWidth="300"
                    HorizontalAlignment="Stretch"
                    ActivationWidth="71"
                    AllowDrop="True"
                    BottomBackground="SkyBlue"
                    BottomCommand="{Binding DataContext.CallBottomItemCommand, RelativeSource={RelativeSource TemplatedParent}}"
                    BottomForeground="White"
                    BottomIcon="Play"
                    BottomLabel="Next"
                    CanDrag="True"
                    DataContext="{Binding DataContext, ElementName=Page, Mode=OneWay}"
                    IsBottomCommandEnabled="True"
                    IsOffsetLimited="False"
                    IsPointerReleasedOnSwipingHandled="True"
                    IsTopCommandEnabled="True"
                    MouseSlidingEnabled="True"
                    TopBackground="OrangeRed"
                    TopCommand="{Binding DataContext.CallTopActionItemCommand, RelativeSource={RelativeSource TemplatedParent}}"
                    TopForeground="White"
                    TopIcon="Delete"
                    TopLabel="Delete">
                    <Grid Height="190" Background="LightGray">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <slidableitemsample:MyUserControl
                            Grid.Column="0"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            AllowDrop="True"
                            CanDrag="True"
                            DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>
                </local:SlidableGridItem>
            </DataTemplate>

As you can see the most important parts are:

 BottomBackground="SkyBlue"
 BottomCommand="{Binding DataContext.CallBottomItemCommand, RelativeSource={RelativeSource TemplatedParent}}"
 BottomForeground="White"
 BottomIcon="Play"
 BottomLabel="Next"

Bottom part of the control and

TopBackground="OrangeRed"
TopCommand="{Binding DataContext.CallTopActionItemCommand, RelativeSource={RelativeSource TemplatedParent}}"
TopForeground="White"
TopIcon="Delete"
TopLabel="Delete"

for the top part of the control, changing these are what will allow you to change how the control behaves.

You can find my code and the sample here.

Happy coding!