对于绑定的列表视图如何绑定所选行的行图标

Question

我已经将列表与 iteam 绑定，我想为选定的 item.How 绑定成功图标来做到这一点，我为列表视图中的选定项目设置看到该行的成功图标。

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

由于您使用了 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" },
        };
    }

}

Answer 2

要实现您的要求，请使用 ListView 的 TapCommand 更新 IsSelected 的值属性。将 IsSelected 属性和一个转换器绑定到 Source of Image 元素，如以下代码片段

代码段 XAML：绑定属性并转换为 Image Source

<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

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

对于绑定的列表视图如何绑定所选行的行图标

For binded listview how to bind icon of row for selectefd row

listview

syncfusion

mvvm

xamarin.forms

在xaml

在后面的代码中

模型中

在视图模型中