Xamarin Formen hinzufügen doppeltes stacklayout Objekt zu einem Scrollview

Question

Einführung

Ich bin neu in C# -Programmierung, und haben gerade erst begonnen Xamarin Forms zu lernen. Ich verwende Xamarin in Visual Studio 2017 unter Windows, um eine plattformübergreifende App zu erstellen.

Aktuelle Situation

ich eine TabbedPage erstellt haben Buy genannt, hat es eine Content genannt BuyAnimals.

Die ContentPage muss eine ScrollView mit einem einzelnen StackLayout als Kind haben.

Das StackLayout hat 3 Kinder, die Frames sind.

In jedem Frame sollte ein StackLayout namens animalStack sein.

Der animalStack hat viele Kinder aus StackLayout.

Das Problem.

Wenn ich denselben animalStack als Inhalt für jeden der drei Frames verwende, zeigt nur der letzte Frame den Inhalt des animalStack an, während die anderen beiden Frames nichts anzeigen.

Warum zeigen die anderen Frames nicht ein Duplikat der Informationen, die im letzten Frame angezeigt werden? Wie kann ich sie dazu bringen, die Informationen anzuzeigen?

Mein Code ist wie unten gezeigt.

`public partial class Buy: TabbedPage { public Kaufen() { InitializeComponent();

 var animalItemIdStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Post ID: "}, 
       new Label { Text = "Animal ID"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 

     var animalUserIdStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "user ID: "}, 
       new Label { Text = "Posting userID"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 

     var animalBreedStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Breed: "}, 
       new Label { Text = "Animal's breed"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 

     var animalGenderStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Gender: "}, 
       new Label { Text = "Animal's gender"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalAgeStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Age: "}, 
       new Label { Text = "Animal's age"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalColorStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Color: "}, 
       new Label { Text = "Animal's color"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalPriceStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Price: "}, 
       new Label { Text = "Animal's price"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalLocationStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Location: "}, 
       new Label { Text = "Animal owner's location"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalEmailStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Location: "}, 
       new Label { Text = "Animal's location"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalPhoneStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Phone: "}, 
       new Label { Text = "Animal owner's phone"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalDatePostedStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Posted: "}, 
       new Label { Text = "Posted date"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 
     var animalLastEditStack = new StackLayout 
     { 
      Children = { 
       new Label { Text = "Last Edit: "}, 
       new Label { Text = "Last Edited date"} 
      }, 
      Orientation = StackOrientation.Horizontal 
     }; 

     var animalStack = new StackLayout 
     { 
      Children = 
      { 
       animalItemIdStack, 
       animalUserIdStack, 
       animalBreedStack, 
       animalGenderStack, 
       animalAgeStack, 
       animalColorStack, 
       animalPriceStack, 
       animalLocationStack, 
       animalEmailStack, 
       animalEmailStack, 
       animalPhoneStack, 
       animalDatePostedStack, 
       animalLastEditStack 
      }, 
      Orientation = StackOrientation.Vertical 
     }; 

     var animalFrame = new Frame(); 
     animalFrame.Content = animalStack; 

     var animalFrame2 = new Frame(); 
     animalFrame2.Content = animalStack; 

     var animalFrame3 = new Frame(); 
     animalFrame3.Content = animalStack; 

     var animalFullStack = new StackLayout(); 

     animalFullStack.Children.Add(animalFrame); 
     animalFullStack.Children.Add(animalFrame2); 
     animalFullStack.Children.Add(animalFrame3); 

     var animalScrollView = new ScrollView(); 
     animalScrollView.Content = animalFullStack; 

     BuyAnimals.Content = animalScrollView; 


    } 
}` 

Ich würde wirklich Ihre Eingabe schätzen.

Danke.

Answer 1

Es scheint, dass ist es, was Sie tun wollen:

public partial class Buy (...){ 
    InitalizeComponent(); 
    Content = GetContent(); 
} 

public View GetContent() 
{ 
    var animalItemIdStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Post ID: "}, 
       new Label { Text = "Animal ID"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 

    var animalUserIdStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "user ID: "}, 
       new Label { Text = "Posting userID"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 

    var animalBreedStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Breed: "}, 
       new Label { Text = "Animal's breed"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 

    var animalGenderStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Gender: "}, 
       new Label { Text = "Animal's gender"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalAgeStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Age: "}, 
       new Label { Text = "Animal's age"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalColorStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Color: "}, 
       new Label { Text = "Animal's color"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalPriceStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Price: "}, 
       new Label { Text = "Animal's price"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalLocationStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Location: "}, 
       new Label { Text = "Animal owner's location"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalEmailStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Location: "}, 
       new Label { Text = "Animal's location"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalPhoneStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Phone: "}, 
       new Label { Text = "Animal owner's phone"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalDatePostedStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Posted: "}, 
       new Label { Text = "Posted date"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 
    var animalLastEditStack = new StackLayout 
    { 
     Children = { 
       new Label { Text = "Last Edit: "}, 
       new Label { Text = "Last Edited date"} 
      }, 
     Orientation = StackOrientation.Horizontal 
    }; 

    var animalStack = new StackLayout 
    { 
     Children = 
      { 
       animalItemIdStack, 
       animalUserIdStack, 
       animalBreedStack, 
       animalGenderStack, 
       animalAgeStack, 
       animalColorStack, 
       animalPriceStack, 
       animalLocationStack, 
       animalEmailStack, 
       animalEmailStack, 
       animalPhoneStack, 
       animalDatePostedStack, 
       animalLastEditStack 
      }, 
     Orientation = StackOrientation.Vertical 
    }; 

    var animalFrame = new Frame(); 
    animalFrame.Content = animalStack; 


    var listView = new ListView(); 
    listView.ItemTemplate = new DataTemplate(() => 
    { 
     return new ViewCell { View = animalFrame }; 
    }); 
    listView.ItemsSource = new List<object>() 
      { 
       new object(), 
       new object(), 
       new object(), 
      }; 

    var contentStack = new StackLayout(); 
    contentStack.Children.Add(listView); 

    return contentStack; 
} 

Sie werden diese Methode mit Bindungen ergänzen müssen. Siehe this article über Bindungen und this one über Listview Templating.

Ich hoffe, es hilft Ihnen.