UWP JSONのデータバインディングが機能しない

Question

JSON.NETを使用してjson URLからグリッドにデータを入力しようとしています。私は、URLからデータをデシリアライズし、それをモデルクラスにバインドすることができました。ただし、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> 

私は：

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ページのマークアップは次のとおりです。

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ページの背後にあるコードは次のとおりです。 はここに私のモデルクラスとMovieMangerクラスですjsonを使わずにバインディングを試み、MovieManagerクラスにサンプルデータを入力するだけで完全にバインドされます。私は、サンプルメソッドとjsonメソッドの両方をデバッグするときに、両方のメソッドがデータを返すことに気付きましたが、データをバインドするためにXAML Page.g.csにデバッガを使用したときだけです。

Answer 1

あなたは2つのオプションがあります。MainPage.xaml.csで

1. は、観察可能なコレクションに作品のフィールドの種類を変更し、このようなコレクションにGetMovies（）funcionの結果の項目をコピーします（作品集の内容は、（要素を追加/削除）変更された場合は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); 
       } 
   } 
   

2. あなたはINotifyPropertyChangedの実装と作品リストのプロパティを作成し、Xを変更：一方向へのバインドモード：（UIを変更した場合Moviesプロパティの変更D（とないその内容））

   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が変更されません。 2番目のバージョンでは、要素をリストに追加/削除するとUIは変更されません。

これらの2つのバージョンを組み合わせることができます。

Answer 2

MovieコレクションをListでなくObservableCollectionにする必要があります。