单击 xamarin.forms 中的 ListView 时如何更改图像源？答案

【问题标题】：How to change Image Source while clicking on the ListView in xamarin.forms?单击 xamarin.forms 中的 ListView 时如何更改图像源？
【发布时间】：2015-10-25 17:33:38
【问题描述】：

我有一个 ListView，其中我在 viewcell 中有一个图像和一个文本，我的要求是更改所选行上的图像，我实现了它，

var listView = new MyQuestionView(listData);

        listView.ItemSelected += (sender, e) => {
            listView.ItemsSource = null;

            //Update the IconSource here in listData
            var s = e.SelectedItem as MenuItem;
            s.IconSource = "foo.png";

            listView.ItemsSource = listData; //Updated List
        };

但是，像这样更新时，屏幕会闪烁一秒钟。是否有更新行元素的正确方法。

这是我的 Listview 的代码：

public class MyQuestionView : ListView
{
    public MyQuestionView (ObservableCollection<MySelectedQuestions> Qdata)
    {
        ObservableCollection<MySelectedQuestions> data = Qdata;

        ItemsSource = data;
        HasUnevenRows = true;
        VerticalOptions = LayoutOptions.FillAndExpand;
        BackgroundColor = Color.Transparent;
        SeparatorVisibility = SeparatorVisibility.Default;
        SeparatorColor = Color.FromHex("#4Dffffff");
        VerticalOptions = LayoutOptions.FillAndExpand;
        HorizontalOptions = LayoutOptions.FillAndExpand;

        ItemTemplate = new DataTemplate (() => {

            // Create views with bindings for displaying each property.
            Label titleLabel = new Label ();
            titleLabel.FontSize = Device.GetNamedSize(NamedSize.Medium,typeof(Label));
            titleLabel.SetBinding (Label.TextProperty, "Text");
            Image image = new Image ();
            image.SetBinding(Image.SourceProperty, "IconSource");

            return new ViewCell {
                View = new StackLayout {
                    Padding = new Thickness (5),
                    Orientation = StackOrientation.Horizontal,
                    Children = {
                        image,
                        new StackLayout {
                            VerticalOptions = LayoutOptions.Center,
                            Spacing = 0,
                            Children = {
                                titleLabel
                            }
                        }
                    }
                }
            };
        });

    }
}

提前致谢。

【问题讨论】：

在更改之前不将 ImageSource 设置为 null 是否仍然有效？
@WilliamCorncobDecker 是的，我可以，更新了更改 Imagesource 的代码..

标签： c# android listview xamarin.forms

【解决方案1】：

您可以使用触发器制作一些动画以避免闪烁：

Image image = new Image ();
image.Triggers.Add(new Trigger(typeof(Image)) {
    Property = Image.SourceProperty,
    EnterActions = {
        new FadeTriggerAction() {
            StartsFrom = 1
        }
    },
    ExitActions = {
        new FadeTriggerAction() {
            StartsFrom = 0
        }
    }
});

FadeTriggerAction.cs：

public class FadeTriggerAction : TriggerAction<VisualElement>
{
    public FadeTriggerAction() {}

    public int StartsFrom { set; get; }

    protected override void Invoke (VisualElement visual)
    {
        visual.Animate("", new Animation( (d)=>{
            var val = StartsFrom == 0 ? d : 1-d;
            visual.Opacity = val;

        }),
            length:1000, // milliseconds
            easing: Easing.Linear);
    }
}

【讨论】：

谢谢！！但我的问题不在于图像，而是闪烁的列表。我的问题是“我是否正确更新了 ListView？”有没有其他方法可以更新 ListView？？
您不应重新分配 listData。您应该修改现有的 ObservableCollection 并且更改将自动刷新而不会闪烁。不要做 listView.ItemsSource = listData;多次。只做一次，相应地更改原始列表。还要确保您的 MenuItem 实现了 IOnNotifyPropertyChanged 接口（例如，用于 IconSource 属性） - 没有它，列表将不会被刷新。
如果可能的话，您能否提供一个示例或在线资源，说明如何使用 IOnNotifyPropertyChanged 接口实现 ListView。
motzcod.es/post/87917979362/…（页面中间）和polouchkine.com/…

【解决方案2】：

在我的列表框中，我有一张图片，当他们点击它时会切换（勾选和取消勾选）。为此，我将图像的源绑定到指定资源名称的字符串。我也遇到了列表视图闪烁的问题。

为了解决此问题，我更改了 xaml 以使两个图像（勾选/未勾选）相互重叠，在不透明度上设置绑定，并交替不透明度 (0/1)。

xaml 的 sn-p 和代码如下。

XAML：

<Image Source="TickboxTicked.png" Opacity="{Binding TickedOpacity}" WidthRequest="40" Grid.Row="0" Grid.Column="1">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding CompleteCommand}" CommandParameter=""/>
    </Image.GestureRecognizers>
</Image>
<Image Source="TickboxEmpty.png" Opacity="{Binding UntickedOpacity}" WidthRequest="40" Grid.Row="0" Grid.Column="1">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding CompleteCommand}" CommandParameter=""/>
    </Image.GestureRecognizers>
</Image>

视图模型

public bool Complete { get; set; }
public string TickboxImageSource
{
    get
    {
        return Complete ? "TickboxTicked.png" : "TickboxEmpty.png";
    }
}

public int TickedOpacity
{
    get
    {
        return Complete ? 1 : 0;
    }
}

public int UntickedOpacity
{
    get
    {
        return Complete ? 0 : 1;
    }
}

...
public async void OnCompletePressed(object source)
{
    Complete = !Complete;
    OnPropertyChanged("Complete");
    OnPropertyChanged("TickedOpacity");
    OnPropertyChanged("UntickedOpacity");
}

【讨论】：