Xamarinにおける階層StackLayoutの遅延ロードがTL

Question

フォーム実装; DR：私はしたい：このオブジェクトから

1. 保存すべてのStackLayout
2. 使用中のいくつかのC＃のオブジェクトを情報利用者が望んでいる場合は、別のStackLayoutsをレンダリングしますそれ。

詳細：

私はリストとして、いくつかのウェブサイトのオブジェクトのすべてのHTML DOMツリーを表示したいです。

私はダウンロードしたhtmlを管理するためにHtml Agility Packを使用しています。いくつかのHtmlNodesを子として持ち、いくつかのHtmlNodesを子として持つHtmlNodeオブジェクトのリストを作成します（HTML DOMのように）。

private StackLayout GenerateTreeOfHtmlObjects(HtmlNode htmlNode, int padding) 
    { 
     StackLayout stackLayout = new StackLayout(); 
     stackLayout.Orientation = StackOrientation.Vertical; 
     foreach (var childNode in htmlNode.ChildNodes) 
     { 
      if (childNode.Name != "#text") 
      { 
       Button showMoreButton = new Button { Text = ">", HorizontalOptions = LayoutOptions.Start, }; 

       stackLayout.Children.Add(
        new StackLayout 
        { 
         Children = { 
          showMoreButton, 
          new Label { Text = childNode.Name, FontSize=20 }, 
          new Label { Text = new string(childNode.InnerText.Trim().ToCharArray().Take(30).ToArray()), FontSize=15 }, 
          new Button { Text = "Zaznacz" }, 
          GenerateTreeOfHtmlObjects(childNode, padding+10) //RECURSION, CALL THIS FUNCTION AGAIN AS LONG AS THERE ARE SOME CHILDREN 
         }, 

         Padding = new Thickness(padding, 0, 0, 10) 
        } 
       ); 
      } 
     } 
     return stackLayout; 
    } 

あなたは、私はすべてのHtmlNodeためStackLayoutを作成し、自分の子供のための別のStackLayoutsを追加しています見ての通り：

これは私が現在持っているものです。私が望むように多かれ少なかれ動作しますが、問題はです。メモリが余りにもかかり、ロードするのに非常に時間がかかります。

だから私はの親は、ユーザがその親をクリックした場合にのみ、いくつかのHtmlNodeの子をロードするようにします。ツリーの最上部にあるHtmlNodeだけを読み込み、必要に応じて子を読み込みます。

これを行うにはStackLayoutのどこかにどこかの場所に何かの情報を格納する必要があります。ユーザーがそれをクリックした場合の読み込みに関する情報です。現在ロードされているすべてのStackLayoutに、HtmlNodeの子をロードできるようにHtmlNodeクラスが割り当てられている必要があります（すべてのHtmlNodeにはChildNodes変数があり、そこから情報を取得します）

Answer 1

MVVMパターンを使用します。次に、ビューに関するすべての情報を保持するViewModelがあります。参照：これはあなたのアイデアを与えることだけであるhttps://developer.xamarin.com/guides/xamarin-forms/user-interface/xaml-basics/data_bindings_to_mvvm/

 //// MODEL    
     public class HtmlNode 
     { 
      public List<HtmlNode> Children{get; set;} 
     } 

     //// VIEW-MODEL 
     public class HtmlTreeViewModel 
     { 
      public HtmlNode RootNode {get; set;} 

      public List<HtmlNode> TreeItems{get; set;} 
      ICommand ItemClickedCommand; 
      public HtmlTreeViewModel() 
      { 
      // Get Initial Items 
      TreeItems = GenerateTreeOfHtmlObjects(RootNode); 
      ItemClickedCommand = new Command(ItemClickCommadFunc); 
      } 

      private List<HtmlNode> ItemClickCommadFunc(object itemClicked) 
      { 
       // Fill Children for specific node 
       HtmlNode node =(itemClicked as HtmlNode); 
       node.Children = GenerateTreeOfHtmlObjects(node); 
      } 

     } 


     //// VIEW 
    //This is the datatemplate for each item (you can add name and other stuff) 
    //should be defined in resources 
    <DataTemplate x:key="NodeTemplate"> 
     <StackLayout ItemSource="{Binding Children}"> 
     </StackLayout> 
    </DataTemplate> 

    //this is the StackLayout that represent the whole tree 
    <StackLayout ItemsSource="{Binding RootItem.Children}" ItemTemplate=" StaticResource NodeTemplate}"/> 

、自分でドットを接続する必要があります。 BindingContextをStackPanelに割り当て、必要に応じてPropertyChangedを呼び出すことを忘れないでください。