将列表视图与来自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模型

它几乎相同的同一个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

你是对的，谢谢我，我做错了方式 –

将列表视图与来自ViewModel的列表绑定

相关推荐