Для связанного просмотра списка, как связать значок строки для выбранной строки

Question

У меня есть связанный список с iteam, и я хочу связать значок успеха для выбранного элемента. Как это сделать, чтобы я установил для выбранного элемента в виде списка, см. Значок успеха для этой строки.

Мой код xaml:

ViewCell
    ViewCell.View
        Grid
            Grid.RowDefinitions  
                RowDefinition Height="*"Â
                RowDefinition Height="1"Â
            Grid.RowDefinitions  
           Grid
                Grid.ColumnDefinitions
                    ColumnDefinition Width="*"Â
                    ColumnDefinition Width="Auto"Â
                Grid.ColumnDefinitions
                Label Grid.Row="0" Grid.Column="0" LineBreakMode="NoWrap" Text="{Binding NazivRegije}" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" TextColor="Teal" FontSize="Medium"
            Grid
            StackLayout Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="Gray" HeightRequest="1"

            Image Grid.Column="1" x:Name="selectionImage" IsVisible="True" Source="SelectedGreen.png" HorizontalOptions="End" VerticalOptions="Center"
        Grid
    ViewCell.View
/ViewCell

Answer 1

Чтобы удовлетворить ваши требования, используйте TapCommand ListView, чтобы обновить значение свойства IsSelected. Привязать свойство IsSelected и преобразователь к элементу «Источник изображения», как показано в следующем фрагменте кода,

Фрагмент кода XAML: Свойство привязки и преобразователь в источник изображения

<ContentPage.Resources> 
    <ResourceDictionary> 
        <local:Converter x:Key="converter"/> 
    </ResourceDictionary> 
</ContentPage.Resources> 

<syncfusion:SfListView ItemsSource="{Binding bookList}"  
                           x:Name="listView" 
                           ItemSize="60" SelectionMode="Single" 
                           SelectionBackgroundColor="AliceBlue" 
                           AllowKeyboardNavigation="True" 
                           TapCommand="{Binding ItemTappedCommand}"> 
        <syncfusion:SfListView.ItemTemplate> 
            <DataTemplate> 
                <Grid> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="*" /> 
                        <RowDefinition Height="1" /> 
                    </Grid.RowDefinitions> 
                    <Grid> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="*" /> 
                            <ColumnDefinition Width="Auto" /> 
                        </Grid.ColumnDefinitions> 
                        <Label Grid.Row="0" Grid.Column="0"  
                               LineBreakMode="NoWrap" Text="{Binding Author}"  
                               VerticalOptions="Center" HorizontalOptions="Start"  
                               FontAttributes="Bold" TextColor="Teal" FontSize="Medium" /> 
                    </Grid> 
                    <StackLayout Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="Gray"  
                                 HeightRequest="1"/> 

                    <Image Grid.Column="1" x:Name="selectionImage"  
                           HeightRequest="30" WidthRequest="30" 
                           Source="{Binding IsSelected, Converter={StaticResource converter}}"  
                           HorizontalOptions="End" VerticalOptions="Center"/> 
                </Grid> 
            </DataTemplate> 
        </syncfusion:SfListView.ItemTemplate> 
    </syncfusion:SfListView>

Фрагмент кода C#: Класс преобразователя

class Converter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return (bool)value ? "Checked.png" : "Unchecked.png"; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
}

Фрагмент кода C#: Метод выполнения TapCommand

private Command<object> _itemTappedCommand; 

public Command<object> ItemTappedCommand { get => _itemTappedCommand; 
set => _itemTappedCommand = value; } 

public ViewModel() 
    { 
        ItemTappedCommand = new Command<object>(ItemTappedExecute); 
    } 

private void ItemTappedExecute(object obj) 
    { 
        bool IsSelected = ((obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as BookInfo).IsSelected; 

        foreach (var item in bookList) 
        { 
            item.IsSelected = false; 
        } 
        if (IsSelected) 
        { 
            ((obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as BookInfo).IsSelected = false; 
        } 
        else 
        { 
            ((obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as BookInfo).IsSelected = true; 
        } 
    }

Answer 2

Поскольку вы использовали MVVM, вам просто нужно привязать свойство IsVisible изображения к свойству вашей модели.

в xaml

<ListView  ItemsSource="{Binding MyItemsSource}" SelectedItem="{Binding SelectItems}">

<Image Grid.Column="1" x:Name="selectionImage" IsVisible="{Binding IsVisible}" Source="SelectedGreen.png" HorizontalOptions="End" VerticalOptions="Center"/>

в коде позади

Значок будет виден при нажатии на элемент.

в модели

public class MyModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;


    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public string NazivRegije { get; set; }

    private bool isVisible;
    public bool IsVisible
    {
        set
        {
            if (isVisible != value)
            {
                isVisible = value;
                NotifyPropertyChanged("IsVisible");
            }
        }
        get { return isVisible; }
    }

    public MyModel()
    {
        IsVisible = false; // set it as false in default
    }
}

в модели представления

public class MyViewModel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<MyModel> MyItemsSource { get; set; }
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    MyModel selectItem;
    public MyModel SelectItems
    {
        get
        {
            return selectItem;
        }

        set
        {
            if (selectItem != value)
            {
                selectItem = value;
                NotifyPropertyChanged("IsVisible");

                //check or uncheck the item here

                SelectItems.IsVisible = !SelectItems.IsVisible;

            }
        }
    }

    public MyViewModel()
    {
        MyItemsSource = new ObservableCollection<MyModel>() {

              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
              new MyModel(){NazivRegije="11111" },
        };
    }

}