Question

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

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

    }
}

先谢谢。

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

Answer 2

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

要解决此问题，我更改了xaml以使两个图像（勾选/未勾选）相互重叠，对不透明度进行绑定，并交替使用不透明度（0/1）。

下面是xaml和代码的片段。

<强> 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");
}

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

2 个答案: