listview - 对于绑定(bind) ListView ，如何为选定行绑定(bind)行图标

Question

我已经与 itam 绑定(bind)了列表，我想为所选项目绑定(bind)成功图标。如何做到这一点，我在 ListView 中为所选项目设置，请参阅该行的成功图标。


我的xml代码:

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

为了满足您的要求，请使用 ListView 的 TapCommand 来更新 IsSelected 属性的值。将 IsSelected 属性和转换器绑定(bind)到 Image 元素的 Source，如下面的代码片段所示，

代码片段 XAML:绑定(bind)属性和转换器到图像源

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