2016-06-26 15 views
0

私はウェブサイトからコメントを取得するアプリを持っています。私はプログラムでStackPanelにそれらを追加して、コメントの返答のインデントを調整することができますが、ListViewにコメントのリストをバインドして正しく表示する方法を学びたいと思います。C#Windows 10 UWPネストされたリストビューとデータバインディング

私のコメントのクラスは次のようになります。

class Comment 
    { 
     public List<Comment> Replies { get; set; } 
     public string Body { get; } 
     public int Level { get; set; } 

     public Comment(string BodyText) 
     { 
      Body = BodyText; 
     } 

     public Comment(string BodyText, List<Comment> replies, int level) 
     { 
      Body = BodyText; 
      Replies = replies; 
      Level = level; 
     } 
    } 

したがって、各コメント一覧<を持つことができます>それに対するコメント(応答)とレベル変数のコメントの深さを示します。

ListViewを設定してそのリストにコメントリストをバインドしたり、コメントリストにそれらのコメントなどを返すようにするプロセスは何ですか?それとももっと良い方法がありますか?

ありがとうございます。

これは現在、視覚的には正しく実装されていますが、コードではなくデータバインディングを使用したいと考えています。

答えて

0

それはトップレベルのコメントのリストにItemsSourceプロパティのバインドし、リストビューを作成します。コメントを含むItemTemplateを使用し、垂直StackPanelに別のListViewを使用してください。その内側のListViewは同じItemTemplateを取得する必要があります。{StaticResource}がそれを処理するかどうかはわかりませんが、それはすべきです。

ObservableCollectionsを使用する場合、実際には動的になります。

0

サードパーティのパッケージWinRTXamlToolkitを使用することをお勧めします。これには、階層要件を十分に満たすことができるTreeViewコントロールが含まれています。 TreeViewコントロールコードの背後にコメントコレクションをバインドできます。コード例を次のように

XAMLコード

<controls:TreeView Width="400" MaxHeight="400" x:Name="Treeviewcomment"> 
    <controls:TreeView.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Body}"/> 
      <data:DataTemplateExtensions.Hierarchy> 
       <data:HierarchicalDataTemplate ItemsSource="{Binding Replies}" /> 
      </data:DataTemplateExtensions.Hierarchy> 
     </DataTemplate> 
    </controls:TreeView.ItemTemplate> 
</controls:TreeView> 

バインディングコード

this.InitializeComponent(); 
ObservableCollection<Comment> comments = new ObservableCollection<Comment> 
{ 
    new Comment ("By the way,I have noticed that ..."), 
    new Comment("Has this been metioned anywhere before..", 
    new List<Comment> 
    { 
     new Comment("Delta upgrade..."), 
     new Comment("When only stuff that...", 
      new List<Comment> { 
       new Comment("That's blloby...")}, 
      3)}, 
    2), 
    new Comment("Just had to turn off..") 
}; 

そして結果:UWPため

enter image description here

特別nugetパッケージ:WinRT XAML Toolkit。また、上記のcode exampleをGitHubにアップロードします。

関連する問題