将 ListView 与来自 ViewModel 的 List 绑定答案

【问题标题】：Binding a ListView with a List coming from ViewModel将 ListView 与来自 ViewModel 的 List 绑定
【发布时间】：2018-01-16 09:39:27
【问题描述】：

我正在为学校开发一个使用 Mvvm 格式的 UWP 应用，需要一些帮助。

所以我正在尝试使用来自我的 ViewModel 中的列表的项目创建一个 ListView。

这是一些代码：

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差不多，这里有详细解释：wpf-tutorial.com/listview-control/…
另外你可能想要使用 ObservableCollection，因为在添加元素时绑定不会在普通列表上刷新
@Curunir 这个技巧是在后面使用代码，我想从视图模型中做所有事情。列表将在视图之前完全加载，并且没有任何选项可以添加动态元素
@EllinPlay 您是否尝试将绑定放入 DataTemplate 内容中，如下所示：其中 [PROPERTYNAME] 是 Offer 类的某些属性？
@Jogy 我试过了，但我认为需要将模型作为 DataTemplate 的属性在某处引用，但我找不到这样做的方法

标签： c# listview mvvm binding uwp

【解决方案1】：

简单的<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 下载完整的工作项目并检查它是否适合您，然后看看您的项目和我的项目有什么不同。

乔吉

【讨论】：