UWP Swipe Control - List Items based on condition

Question

I've a list view and the data template of that list view has a Swipe Control and a textblock within that swipe control. Now, there are 3 items in the Swipe control's Right Items, say: 1. Add 2. Edit 3. Delete

I want to display the right items based on a condition. If the Textblock has no string, then on swiping right, display only "Add". If there is string present in the Textblock, then on swiping display the other 2.

Is there any way to achieve this in UWP with the swipe control?

Breeze Liu - MSFT Breeze Liu - MSFT · Accepted Answer · 2018-09-06T08:19:30

You can use binding to change the SwipeControl's swipe items number base on the model's content which binds to the Textblock's Text property.

Here is sample to clarify it:

In the App.xaml, add the SwipeItems resource,

<Application.Resources>
    <SymbolIconSource x:Key="AddIcon" Symbol="Add"/>
    <SymbolIconSource x:Key="EditIcon" Symbol="Edit"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>

    <SwipeItems x:Key="ThreeItems" Mode="Reveal">
        <SwipeItem Text="Edit" IconSource="{StaticResource EditIcon}"/>
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"/>
        <SwipeItem Text="Add"  IconSource="{StaticResource AddIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="OneItem" Mode="Reveal">
        <SwipeItem Text="Add"  IconSource="{StaticResource AddIcon}"/>
    </SwipeItems>
</Application.Resources>

Here is the Model class which bind to your ListView's Item:

public class Model
{
    public string Content { get; set; }
    public SwipeItems Swips
    {
        get
        {
            if (string.IsNullOrEmpty(Content))
            {
                return (SwipeItems)Application.Current.Resources["OneItem"];
            }
            else
            {
                return (SwipeItems)Application.Current.Resources["ThreeItems"];
            }
        }
    }
}

In the MainPage.xaml, there is a ListView,

<ListView x:Name="sampleList" ItemsSource="{x:Bind ListSource}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Model">
            <SwipeControl x:Name="ListViewSwipeContainer"
                      LeftItems="{x:Bind Swips}"
                      Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind Content}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Text Item details" FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This is the MainPage.xaml.cs,

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        ListSource = new ObservableCollection<Model>();
        ListSource.Add(new Model { Content = "first" });
        ListSource.Add(new Model { });
        ListSource.Add(new Model { Content = "Second" });
        ListSource.Add(new Model { Content = "Third" });
    }
    public ObservableCollection<Model> ListSource;
}

On the other way, you can also implement this effect by using the ListView's ItemTemplateSelector property to reference different ListView ItemTemplate. You need to implement your own DataTemplateSelector to return corresponding DataTemplate base on whether the Model's content is null or empty.

UWP Swipe Control - List Items based on condition

1 Answers