2016-08-12 72 views
0

我有這個頁面:NewsPageUWP綁定到用戶控件的觀察到的集合不工作

<Page 
x:Class="TouchTypeRacing.Views.NewsPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:TouchTypeRacing.Views" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:controls="using:TouchTypeRacing.Controls" 
xmlns:models="using:TouchTypeRacing.Models" 
DataContext="{Binding}" 
mc:Ignorable="d"> 

<Grid Background="White"> 
    .... 
    <ScrollViewer Grid.Row="1" 
        VerticalScrollBarVisibility="Auto" 
        Margin="5,10,5,0"> 
     <ItemsControl ItemsSource="{Binding Posts}" 
         x:Name="itemsControl"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Vertical"/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate x:DataType="models:Post"> 
        <controls:Post/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 
</Page> 

頁的的DataContext綁定到一個視圖模型。 PageViewmModel
datatemplate是一個Post控件。
頁面上的ItemsControlItemsSource綁定到視圖模型的Posts屬性。

public NewsPage() 
{ 
    this.InitializeComponent(); 

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

然後,視圖模型:

public class NewsPageViewModel 
{ 
    private ObservableCollection<Post> _posts = new ObservableCollection<Post>(); 
    public ObservableCollection<Post> Posts { get { return _posts; } } 
    public NewsPageViewModel() 
    { 
     GetPosts(_posts); 
    } 
    public static void GetPosts(ObservableCollection<Post> posts) 
    { 
     posts.Clear(); 
     posts = new ObservableCollection<Post> 
     { 
      new Post 
      { 
       Id = "1", 
       DateTime = DateTime.Today, 
       User = Application.CurrentUser, 
       Likes = 10, 
       ImagePath = Application.CurrentUser.ImagePath, 
       Message = "Test message", 
       Comments = new ObservableCollection<Comment> 
       { 
        new Comment {Id= "1", Content="Comment1", User = Application.CurrentUser }, 
        new Comment {Id= "2", Content="Comment2", User = Application.CurrentUser }, 
        new Comment {Id= "3", Content="Comment3", User = Application.CurrentUser }, 
        new Comment {Id= "4", Content="Comment4", User = Application.CurrentUser }, 
       }, 
       Last2Comments = new List<Comment> 
       { 
        new Comment {Id= "3", Content="Comment3", User = Application.CurrentUser }, 
        new Comment {Id= "4", Content="Comment4", User = Application.CurrentUser }, 
       } 
      } 
     }; 
    } 

ItemsControl顯示了空。 我在做什麼錯?

回答

0

如果您想要保留切換集合,NewsPageViewModel必須實現INotifyPropertyChanged並在您更改集合實例時引發PropertyChanged。這是怎麼回事。我還在下面提供了一個更簡單的「快速修復」解決方案。

public class VIewModelBase : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    public void OnPropertyChanged([CallerMemberName] String propName = null) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); 
    } 
} 

public class NewsPageViewModel : ViewModelBase 
{ 
    public NewsPageViewModel() 
    { 
     Posts = GetPosts(); 
    } 

    private ObservableCollection<Post> _posts; 
    public ObservableCollection<Post> Posts 
    { 
     get { return _posts; } 
     set { 
      _posts = value; 
      OnPropertyChanged(); 
     } 
    } 

    protected ObservableCollection<Post> GetPosts() 
    { 
     // do stuff to get posts, return new ObservableCollection<Post> 
    } 
} 

快速修復

越容易開出一個集實例,以使UI獲得的東西第一個(在這種情況下,ONLY)時它抓住的Posts值,保持相同的集合。但是,如果沒有INotifyPropertyChanged,你將會遇到這樣的問題。試圖在沒有它的情況下使用WPF實際上是一種自我懲罰的練習。

ObservableCollection<Post> _posts = new ObservableCollection<Post>(); 

public ObservableCollection<Post> Posts { get { return _posts; } } 
public NewsPageViewModel() 
{ 
    GetPosts(_posts); 
} 
public static void GetPosts(ObservableCollection<Post> posts) 
{ 
    posts.Clear(); 
    // ...get posts 
} 

的特別之處約ObservableCollection是它實現INotifyCollectionChanged,當你從集合添加或刪除項目,這將通知用戶界面 - 但UI已經知道聽更改哪個集合。

+0

仍然沒有顯示任何內容。我在Quickfix中編輯了Viewmodel。檢查編輯 – shadowCODE

+0

@shadowCODE您可以調用'posts.Clear()',然後將其丟棄並將該參數替換爲新的集合。不要這樣做。這對你所做的任何方法都沒有影響。把這篇文章放在OLD集合中。您必須必須必須保持SAME集合的正常運行。在該代碼中,您開始的集合是UI將會知道的唯一集合。所以這是帖子必須出現的原因。這就是爲什麼這不是一個好的解決方案的原因之一。 –

+0

@shadowCODE請參閱上面的「自我懲罰練習」。 –

0

我不能添加評論...所以:

在NewsPageViewModel的構造函數初始化一個新的(但爲空)的ObservableCollection。

如果您不在GetPost-Method中添加元素,_posts將保持爲空。

相關問題