リストボックスへのデータバインディングリストC＃XAML（Azureモバイルサービス）UWP

Question

私はオンラインデータベースを持っています。そして、私は、クエリ結果をリストボックスに表示したい。私はデータバインディングを使用しようとしたが、私はそれが完全に間違っていると思う。

ファイル

[！[]ここに画像の説明を入力し、[1] [1]

表

class ProductTable 
    { 
     public string id { get; set; } 
     public string Name { get; set; } 
     public string Title { get; set; } 
     public string Description { get; set; } 
     public double Price { get; set; } 
     public string Type { get; set; } 
     public string Seller { get; set; } 
     public int Expiration { get; set; } 
    } 

MainViewModel.cs

namespace Test 
{ 
    class MainViewModel 
    { 
     IMobileServiceTable<ProductTable> product = App.MobileService.GetTable<ProductTable>(); 

     //In this method, load your data into Products 
     public async void Load() 
     { 
      // This query filters out completed TodoItems. 
      MobileServiceCollection<ProductTable, ProductTable> Products = await product 
       .Where(ProductTable => ProductTable.Price == 15) 
       .ToCollectionAsync(); 

      // itemsControl is an IEnumerable that could be bound to a UI list control 
      IEnumerable itemsControl = Products; 
     } 
    } 
} 

XAML

<Page x:Name="PAGE" 
xmlns:local="clr-namespace:Test;assembly=Version1"> 
     <Grid> 
      <Grid.DataContext> 
       <local:MainViewModel /> 
      </Grid.DataContext> 
      <ListBox Margin="10,10,10,100" x:Name="lb" ItemsSource="{Binding Products}"> 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <StackPanel> 
          <TextBlock Text="{Binding Name}" FontSize="10"></TextBlock> 
          <TextBlock Text="{Binding Title}" FontSize="10"></TextBlock> 
          <TextBlock Text="{Binding Description}" FontSize="10"></TextBlock> 
         </StackPanel> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 
     </Grid> 
    </Page> 

ソリューション

表は、明示的にそうでなければ、データバインディングを使用することができません宣言したJSONのプロパティ名を必要とします。あなたが新しいリストボックスを宣言する必要はありません

Table.cs

public class ProductTable 
{ 
    [JsonProperty(PropertyName = "id")] 
    public string id { get; set; } 

    [JsonProperty(PropertyName = "Name")] 
    public string Name { get; set; } 

    [JsonProperty(PropertyName = "Title")] 
    public string Title { get; set; } 

    [JsonProperty(PropertyName = "Description")] 
    public string Description { get; set; } 

    [JsonProperty(PropertyName = "Price")] 
    public double Price { get; set; } 

    [JsonProperty(PropertyName = "Type")] 
    public string Type { get; set; } 

    [JsonProperty(PropertyName = "Seller")] 
    public string Seller { get; set; } 

    [JsonProperty(PropertyName = "Expiration")] 
    public int Expiration { get; set; } 
} 

XAML.csは、唯一itemsourceを使用しています。 StackPanel、IN

private async void button1_Click(object sender, RoutedEventArgs e) 
{ 
    IMobileServiceTable<ProductTable> productTest = App.MobileService.GetTable<ProductTable>(); 

    // This query filters out completed TodoItems. 
    MobileServiceCollection<ProductTable, ProductTable> products = await productTest 
     .Where(ProductTable => ProductTable.Type == "Test") 
     .ToCollectionAsync(); 

    lb.ItemsSource = products; 

} 

XAML

、NEVER EVERこれは重大なエラーが発生します "*" HEIGHTを使用してください！表示されていないコードに1つ、あなたのDataContextが何であれにバインドされているXAMLでの1 -

<ListBox x:Name="lb" Margin="10,10,10,100" > 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Width="300"> 
       <TextBlock Text="{Binding Name}" FontSize="10"></TextBlock> 
       <TextBlock Text="{Binding Title}" FontSize="10"></TextBlock> 
       <TextBlock Text="{Binding Description}" FontSize="10"></TextBlock> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 1

は、次の2つのリストボックスを作成しています。

あなたのコードの最後の2行を削除し、そしてへのあなたのXAMLを変更します。

ItemsSource="{Binding Products}" 

次に、（あなたがMVVMを使用する場合のViewModelを）クラスのプロパティとして製品を露出させ、そして確実にそのListBoxのDataContextは、前記ViewModel/classに設定されています。

私はMobileServiceCollectionに慣れていないので、バインド可能であると仮定します。そうでない場合は、ObservableCollectionとして製品を公開します（時間が経つにつれて値が変化する場合）。プロパティ

上

エラボレーションは、クラスを作成します。あなたのXAMLで

public class MainViewModel { 
    //This is a property 
    public ObservableCollection<ProductTable> Products { get; set; } 

    //In this method, load your data into Products 
    public void Load(){ 
     //Products = xxx 
    } 
} 

を：

<Page [...] 
    xmlns:local="clr-namespace:YourNamespace;assembly=YourProjectName"> 
    <Grid> 
     <Grid.DataContext> 
      <local:MainViewModel /> 
     </Grid.DataContext> 
     <!-- ListBox goes in here somewhere, still with ItemsSource bound to Products --> 
    </Grid> 
</Page> 

は、名前空間hereについては、こちらをご覧ください。

このようにすると、WindowsのDataContextがMainViewModel（ProductsViewModelという名前も可能）に設定されます。ListBoxはあなたのウィンドウ内にあるので、同じDataContextを（Property Value Inheritanceのために）継承します。

Bindingは、ViewModelでプロパティ「製品」を検索します。

Load()メソッドをどこかに呼び出す必要があります。

パート2 - コード

マインドあなたを見た後、私は、コードを実行することはできませんよ、私はややブラインド飛んでいます。

Buy.xaml.cs

public sealed partial class Buy : Page 
{ 
    private readonly MainViewModel _viewModel; 

    public Buy() 
    { 
     this.InitializeComponent(); 

     _viewModel = new MainViewModel(); 
     DataContext = _viewModel; 
    } 

    private async void button1_Click(object sender, RoutedEventArgs e) 
    { 
     _viewModel.Load(); 
    } 
} 

MainViewModel.cs

public class MainViewModel : INotifyPropertyChanged 
{ 
    IMobileServiceTable<ProductTable> product = App.MobileService.GetTable<ProductTable>(); 

    public List<ProductTable> Products { get; private set; } 

    public event PropertyChangedEventHandler PropertyChanged; 

    public async void Load() 
    { 
     Products = await product 
      .Where(ProductTable => ProductTable.Price == 15) 
      .ToListAsync(); 

     //Notify that the property has changed to alert to UI to update. 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Products))); 
    } 
} 

あなたはProductTableパブリックをする必要があるか、コンパイルエラーになります。

上記のItemsSourceバインディングを使用してリストボックスをバインドすることができます。

また、上記のコードは必ずしもベストプラクティスではありません。

Answer 2

あなたは

ListBox lb = new ListBox(); 

の背後にあるコード内のその行を必要としない、あなたはその行

lb.ItemsSource = Products; 

を保つことができるか、XAML

にMobileServiceCollectionへの結合を座ることができます

<ListBox Margin="10,10,10,100" x:Name="lb" ItemsSource="{Binding Products}"> 
     <ListBox.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Name}"/> 
      <TextBlock Text="{Binding Title}"/> 
      <TextBlock Text="{Binding Description}"/> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>