Question

我尝试使用JSON.NET从json url填充网格。我已经能够从url反序列化数据并将其绑定到模型类。但是它没有绑定到XAML页面。这是我的模型类和MovieManger类：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

namespace DataBindingTest3.Models
{
    public class AmgMovie
    {
        public string state { get; set; }
        public Data data { get; set; }
    }
    public class Data
    {
        public int type { get; set; }
        public string type_name { get; set; }
        public Movie[] movies { get; set; }
    }

    public class Movie
    {
        public string id { get; set; }
        public string title { get; set; }
        public string movie_desc { get; set; }
        public string movie_actors { get; set; }
        public string movie_director { get; set; }
        public string music_director { get; set; }
        public string movie_year { get; set; }
        public string movie_month { get; set; }
        public string realeased_date { get; set; }
        public string image { get; set; }
        public string portrait_image { get; set; }
        public string movie_list_image_url { get; set; }
        public string movie_poster_url { get; set; }
        public string duration { get; set; }
        public string url { get; set; }
        public string download_url { get; set; }
        public string trailer_url { get; set; }
        public int allow_download { get; set; }
    }

    public class MovieManager
    {
        public static async Task<List<Movie>> GetMovies()
        {
            var movies = new List<Movie>();
            var amg = new HttpClient();
            HttpResponseMessage response = await amg.GetAsync(new Uri("some URL"));
            var json = await response.Content.ReadAsStringAsync();
            AmgMovie Movie = JsonConvert.DeserializeObject<AmgMovie>(json);

            for (uint i = 0; i < Movie.data.movies.Count(); i++)
            {
                string id1 = Movie.data.movies[i].id;
                string title1 = Movie.data.movies[i].title;
                string portrait_image1 = Movie.data.movies[i].portrait_image;

                movies.Add(new Movie { id = id1, title = title1, portrait_image = portrait_image1 });
            }

            return movies;

        }
    }
}

这是XAML页面背后的代码：

public sealed partial class MainPage : Page
    {
        private List<Movie> Movie;
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void Page_Loaded(object sender, RoutedEventArgs e)
        {
            Movie = await MovieManager.GetMovies();
        }
    }

这是XAML页面标记：

<Page
    x:Class="DataBindingTest3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataBindingTest3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:DataBindingTest3.Models"
    Loaded="Page_Loaded"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:DataType="data:Movie" x:Key="MovieDataTemplate">
            <StackPanel>
                <TextBlock x:Name="movieID" Text="{x:Bind id}" FontSize="12" Foreground="Black" />
                <Image x:Name="moviePoster" Source="{x:Bind portrait_image}" Width="145" Height="214"/>
                <TextBlock x:Name="movieName" Text="{x:Bind title}" FontSize="16" Foreground="Black"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

        <GridView Grid.Row="0" ItemsSource="{x:Bind Movie}" ItemTemplate="{StaticResource MovieDataTemplate}">

        </GridView>

    </Grid>
</Page>

我还尝试在没有json的情况下进行绑定，只是在MovieManager类中输入一些示例数据，它完全绑定。我注意到在调试sample方法和json方法时，两个方法都返回数据，但是只有当我使用调试器的示例数据进入XAML Page.g.cs来绑定数据时。

Answer 1

你需要让Movie集合成为ObservableCollection而不仅仅是List。

Answer 2

您有两种选择：

在MainPage.xaml.cs中，将Movie字段的类型更改为observable collection，并将GetMovies（）函数的结果项复制到集合中，如下所示:(如果Movies集合的内容发生更改，则UI更改（添加） /删除元素））
```
private ObservableCollection<Movie> Movies = new ObservableCollection<Movie>();

private async void AboutPage_Loaded(object sender, RoutedEventArgs e)
{
    foreach (var movie in await GetMovies())
    {
        Movie.Add(movie);
    }
}
```

使用INotifyPropertyChanged实现为Movies List创建属性，并将x：Bind模式更改为OneWay :(如果Movies属性发生更改（而不是其内容），则UI更改）

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private List<Movie> _movies;
    public List<Movie> Movies
    {
        get { return _movies; }
        set { if(value != _movies) { _movies = value; PropertyChanged?.Invoke(nameof(Movies)); } }
    }

    public MainPage()
    {
        this.InitializeComponent();
    }

    private async void Page_Loaded(object sender, RoutedEventArgs e)
    {
        Movies = await MovieManager.GetMovies();
    }
}

的Xaml：

<GridView Grid.Row="0" ItemsSource="{x:Bind Movies, Mode=OneWay}" ItemTemplate="{StaticResource MovieDataTemplate}" />

在第一个版本中，如果使用新列表覆盖电影，则UI不会更改。在第二个版本中，如果向列表中添加/删除元素，UI将不会更改。

您可以将这两个版本组合在一起。

JSON的UWP数据绑定无法正常工作

2 个答案: