將列表視圖與來自ViewModel的列表綁定

我正在使用Mvvm格式爲學校開發UWP應用程序，需要某些幫助。將列表視圖與來自ViewModel的列表綁定

所以我試圖做一個ListView與從我的ViewModel列表來的項目來。

下面是一些代碼：

MainScreenViewModel.cs

using EasySleep.Model; 
using EasySleep.Services; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using Template10.Mvvm; 
using Template10.Services.NavigationService; 
using Windows.UI.Xaml.Navigation; 

namespace EasySleep.ViewModels 
{ 
    class MainScreenViewModel : ViewModelBase 
    { 

     ServiceApi serviceApi; 

     public List<Offer> TestList { get; set; } 

     public MainScreenViewModel() 
     { 
      serviceApi = new ServiceApi(); 
      TestList = new List<Offer>(); 
      TestList.Add(new Offer(1, true, null, "Decription de dingue", 3)); 
      TestList.Add(new Offer(3, false, null, "Decription de fou", 6)); 
      TestList.Add(new Offer(7, true, null, "Decription de perdu", 9)); 
     } 

     public override async Task OnNavigatedToAsync(object parameter, NavigationMode mode, IDictionary<string, object> suspensionState) 
     { 
      await Task.CompletedTask; 
     } 

     public void GoToMainScreen() => 
      NavigationService.Navigate(typeof(Views.MainScreen)); 

     public void GotoSettings() => 
      NavigationService.Navigate(typeof(Views.SettingsPage), 0); 

     public void GotoAbout() => 
      NavigationService.Navigate(typeof(Views.SettingsPage), 1); 

     public void Logout() 
     { 
      ServiceApi.Token = null; 
      NavigationService.Navigate(typeof(Views.MainPage)); 
     } 

    } 
}

MainScreenPage.xaml

<ListView x:Name="AllActiveOffersListView" 
        ItemsSource="{x:Bind ViewModel.TestList}" 
        Grid.Row="1"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="" /> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView>

Offer.cs

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

namespace EasySleep.Model 
{ 
    public class Offer 
    { 

     public int Id { get; set; } 
     public Boolean IsActive { get; set; } 
     public List<Photo> Photos { get; set; } 
     public String Description { get; set; } 
     public int MaxPeople { get; set; } 
     public int LocationId { get; set; } 
     public Location Location { get; set; } 
     public ApplicationUser Owner { get; set; } 
     public String OwnerId { get; set; } 

     public Offer (int id, Boolean isActive, List<Photo> photos, string description, int maxPeople) 
     { 
      Id = id; 
      IsActive = isActive; 
      Photos = photos; 
      Description = description; 
      MaxPeople = maxPeople; 
     } 

     [JsonConstructor] 
     public Offer(string description, int id, Boolean isActive, Location loc, int locationId, int maxPeople, ApplicationUser owner, string ownerId) 
     { 
      Id = id; 
      IsActive = isActive; 
      Description = description; 
      MaxPeople = maxPeople; 
      Location = loc; 
      LocationId = locationId; 
      Owner = owner; 
      OwnerId = ownerId; 
     } 

     public override string ToString() 
     { 
      return Description + LocationId; 
     } 

    } 
}

你能幫我把這些東西綁定好嗎？

我編輯添加Offer.cs模型

來源

2017-08-08 Ellin Play

它幾乎相同的同一個ListView，所以在這裏你有一個詳細的解釋：http://www.wpf-tutorial.com/listview-control/listview-data-binding-item-template/ – Curunir

你也可能想要使用ObservableCollection，因爲綁定不會在添加元素時在正常列表中刷新 – Curunir

@Curunir那麼這個提示使用的是後面的代碼，我想從視圖模型中做所有事情。列表gonne將在視圖之前完全加載，並且不會有任何選項添加dynamycally ellements –

簡單<TextBlock Text="{Binding Description}" />應該工作，沒有必要指定別的。我創建了一個空的Template10應用程序，並放在那裏你的模型，它的工作原理。

這裏是主頁XAML：

<Page.DataContext> 
    <vm:MainPageViewModel x:Name="ViewModel" /> 
</Page.DataContext> 

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

    <controls:PageHeader x:Name="pageHeader" 
         Content="Main Page" 
         RelativePanel.AlignLeftWithPanel="True" 
         RelativePanel.AlignRightWithPanel="True" 
         RelativePanel.AlignTopWithPanel="True" /> 

    <RelativePanel EntranceNavigationTransitionInfo.IsTargetElement="True" 
        RelativePanel.AlignBottomWithPanel="True" 
        RelativePanel.AlignLeftWithPanel="True" 
        RelativePanel.AlignRightWithPanel="True" 
        RelativePanel.Below="pageHeader"> 

     <!-- content --> 
    <ListView x:Name="AllActiveOffersListView" 
       ItemsSource="{x:Bind ViewModel.TestList}" 
       Grid.Row="1"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
     <TextBlock Text="{Binding Description}" /> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
    </ListView> 

</RelativePanel> 

</RelativePanel>

您可以從http://personal.sirma.bg/Jogy/download/WindowsApp1.zip下載完整的工作項目，並檢查它是否會爲你工作，那麼看到的是與不同你的項目和我的。

Jogy

來源

2017-08-09 19:39:02 Jogy

你是對的，謝謝我，我做錯了方式 –

將列表視圖與來自ViewModel的列表綁定

回答

相關問題