UWP Swipe Control - список элементов на основе условия - PullRequest
Новая
       34

UWP Swipe Control - список элементов на основе условия

0 голосов
/ 05 сентября 2018

У меня есть представление списка, и шаблон данных этого представления списка имеет Swipe Control и текстовый блок в этом элементе управления Swipe. Теперь в правом элементе Swipe есть 3 элемента, скажем: 1. Добавить 2. Изменить 3. Удалить

Я хочу отображать правильные элементы в зависимости от условия. Если в текстовом блоке нет строки, то при смахивании вправо отображается только «Добавить». Если в текстовом блоке присутствует строка, при считывании отобразите другой 2.

Есть ли способ добиться этого в UWP с помощью функции прокрутки?

1 Ответ

0 голосов
/ 06 сентября 2018

Вы можете использовать привязку, чтобы изменить номер элемента SwipeControl на основе содержания модели, которое привязывается к свойству Textblock Text.

Вот образец, чтобы уточнить это:

В App.xaml добавьте ресурс SwipeItems, 

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

Вот класс Model, который связывается с элементом ListView: 

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"];
            }
        }
    }
}

В MainPage.xaml есть 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>

Это 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;
}

С другой стороны, вы также можете реализовать этот эффект, используя свойство ListView ItemTemplateSelector для ссылки на другое ListView ItemTemplate . Вам необходимо реализовать свой собственный DataTemplateSelector , чтобы возвращать соответствующую DataTemplate базу в зависимости от того, является ли содержимое модели нулевым или пустым.

...