使用 dataBinding 根据 Web 服务值将图像放入 ListViewItem

Question

我有一个列表视图，其中每个 ListViewItem 都有一个默认图像列表，如果从 Web 服务恢复的值不是 0，这些图像将被其他图像替换这是 json 数据：

{
success: 1,
total: 2,
locals: [
{
id_local: "82",
fav: 0,
aime: 0,
aimepas: 0,
},
{
id_local: "83",
fav: 1,
aime: 1,
aimepas: 0,
}
]
}

我试过这段代码：

ObservableCollection<Item> Locals = new ObservableCollection<Item>();

  public async void getListePerSearch()
    {
            UriS = "URL";
            var http = new HttpClient();
            http.MaxResponseContentBufferSize = Int32.MaxValue;
            var response = await http.GetStringAsync(UriS);
            var rootObject1 = JsonConvert.DeserializeObject<NvBarberry.Models.RootObject>(response);

            listme.ItemsSource = rootObject1.locals;



                foreach (var item in listme.Items.Cast<Locals>())
                {

                    if (item.fav == 1)
                    {
                        btnStar.Background = new SolidColorBrush(Colors.Yellow); //yellow
                        //Debug.Write("fav=1");
                    }

                    else
                    {
                        btnStar.Background = new SolidColorBrush(Colors.Gray);//Gray
                        //Debug.Write("fav=0");
                    }

                    if (item.aime == 1)
                    {
                        coeur.Source = new BitmapImage(new Uri("ms-appx:///images/11.png", UriKind.Absolute));
                        //Debug.Write("aime=1");
                    }

                    else
                    {
                        coeur.Source = new BitmapImage(new Uri("ms-appx:///images/1.png", UriKind.Absolute));
                        //Debug.Write("aime=0");
                    }

                    if (item.aimepas == 1)
                    {
                        deslikeimage.Source = new BitmapImage(new Uri("ms-appx:///images/22.png", UriKind.Absolute));
                        //Debug.Write("aimepas=1");
                   }

                    else
                   {
                        deslikeimage.Source = new BitmapImage(new Uri("ms-appx:///images/2.png", UriKind.Absolute));
                       //Debug.Write("aimepas=0");
                   }

               }

这是Locals.cs：

  public class Locals
{
    public int fav { get; set; }
    public int aime { get; set; }
    public int aimepas { get; set; }

}

这是 xaml 文件：

<ListView  x:Name="listme">
 <ListView.ItemTemplate >
   <DataTemplate >
     <Grid>
       ...
      <Button Background="Gray"  x:Name="btnStar"/>
      <Button>
           <Image Source="images/1.png" x:Name="coeur"/>
      </Button>
       <Button>
           <Image Source="images/2.png" x:Name="deslikeimage"/>
      </Button>
     </Grid>
   </DataTemplate >
 </ListView.ItemTemplate >
</ListView >

所以我的问题是，如何在我的案例中使用 DataBinding 感谢帮助

Answer 1

您的 class Item 必须实现 INotifyPropertyChanged 以在您的某些属性更改后通知视图，之后您需要将 ObservableCollection Locals 设置为 List 控件中的 ItemsSource。

这是文档。

https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.data.inotifypropertychanged.propertychanged.aspx

您需要了解什么是 Binding 如何使用它。

http://blogs.msdn.com/b/jerrynixon/archive/2012/10/12/xaml-binding-basics-101.aspx

这是一个例子：

public class Employee : INotifyPropertyChanged 
{
    private string myUrl;
    private string myUrl2;

    public string MyUrl
    {
        get { return myUrl; }
        set
        {
            _name = value;
            RaisePropertyChanged("MyUrl");
        }
    }

    public string MyUrl2
    {
        get { return myUrl2; }
        set
        {
            _organization = value;
            RaisePropertyChanged("MyUrl2");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

现在在你的 foreach 中：

     foreach (var item in MyOriginalCollection)
            {

你的逻辑在这里...

Locals.Add(项目); }

最后您需要将 Locals Collection 设置为您的 ListControl。

ObservableCollection 在添加或删除某些对象时通知视图。

这是文档 https://msdn.microsoft.com/en-us/library/ms668604(v=vs.110).aspx

在Xaml

您需要个性化您的 ListControl 的 ItemTemplate

<ListView x:Name="myList"
                             >


                <ListView.ItemTemplate>
                    <DataTemplate>

                        <Button>
                        <Image Source="{Binding MyUrl}" x:Name="coeur"/>

                        </Button>

                          <Button>
                        <Image Source="{Binding MyUrl2}" x:Name="coeur"/>

                        </Button>
                    </DataTemplate>
                </ListView.ItemTemplate>

            </ListView>

希望这些信息和示例对您有用。

我知道有很多概念需要学习。

这里是展示如何使用绑定方法的最后一个示例

http://10rem.net/blog/2012/03/27/tip-binding-an-image-elements-source-property-to-a-uri-in-winrt-xaml

使用 dataBinding 根据 Web 服务值将图像放入 ListViewItem

use dataBinding to put images into a ListViewItem according to a web Service values

c#

listview

win-universal-app