Binding ContentPage to Layout Property

Question

I am attempting to learn Xamarin while learning the MVVM pattern. I don't know if this is the right way to do this, but I am having trouble binding my ContentPage to my ViewModels property that is of type Layout.

What I am doing is I am parsing an XML file into many objects, then reading those and converting them into Views. I have this working and displaying fine if I establish in the Views code that the ContentPages Contents should have this layout in it.

What I am trying to do is actually bind the content to my ViewModels property.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="FireSupportReference.View.ChapterView"
         Title="{Binding pageTitle}"
         x:Name="chapterContentPage"
         Content="{Binding pageLayout}">

The other binding is working (its set within the Views code). The pageLayout property is of type Layout.

       public Layout pageLayout
    {
        get { return _layout; }
        set { _layout = value; }
    }

As stated before all my other bindings are working so I'm guessing its more to do with what Im attempting to bind and using what properties. Thanks in advance for the help.

Answer 1

Change the type of Layout to ContentView and implement INotifyPropertyChanged and raise PropertyChanged in the setter

public ContentView _layout;
public ContentView pageLayout
{
   get { return _layout; }
   set { 
         _layout = value; 
         RaisePropertyChanged(nameof(pageLayout));
       }
}

Answer 2

What I am doing is I am parsing an XML file into many objects, then reading those and converting them into Views.

If you want to parse an xml file and display these data in ContentPage, I think you may not need to use Layout property in ViewModel.

For general mvvm mode, I have one view or template, then adding data into it.

The following code shows you how to use the mvvm mode to display the parsed xml data.

The .xml file, adding in project root, then set Build action is Embedded resource

<?xml version="1.0" encoding="utf-8" ?>
<ArrayOfMonkey xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Monkey>
<Name>Baboon</Name>
<Location>Africa &amp; Asia</Location>
<Details>Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.</Details>
</Monkey>
<Monkey>
<Name>Capuchin Monkey</Name>
<Location>Central &amp; South America</Location>
<Details>The capuchin monkeys are New World monkeys of the subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus, Cebus.</Details>
</Monkey>
<Monkey>
<Name>Blue Monkey</Name>
<Location>Central &amp; East Africa</Location>
<Details>The blue monkey or diademed monkey is a species of Old World monkey native to Central and East Africa, ranging from the upper Congo River basin east to the East African Rift and south to northern Angola and Zambia.</Details>
</Monkey>
<Monkey>
<Name>Squirrel Monkey</Name>
<Location>Central &amp; South America</Location>
<Details>The squirrel monkeys are the New World monkeys of the genus Saimiri. They are the only genus in the subfamily Saimirinae. The name of the genus Saimiri is of Tupi origin, and was also used as an English name by early researchers.</Details>
</Monkey>
<Monkey>
<Name>Golden Lion Tamarin</Name>
<Location>Brazil</Location>
<Details>The golden lion tamarin also known as the golden marmoset, is a small New World monkey of the family Callitrichidae.</Details>
</Monkey>

</ArrayOfMonkey>

Then ContentPage UI, to display these data.

<ContentPage
x:Class="demo3.listviewsample.Page17"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
    <StackLayout>
        <ListView HasUnevenRows="True" ItemsSource="{Binding monkeys}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame BorderColor="Orange" CornerRadius="10">
                            <StackLayout>
                                <Label Text="{Binding Name}" />
                                <Label Text="{Binding Location}" />
                                <Label Text="{Binding Details}" />
                            </StackLayout>
                        </Frame>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

 public partial class Page17 : ContentPage
{

    public Page17()
    {
        InitializeComponent();        
        this.BindingContext = new MonkeyViewmodel();
    }
}

public class MonkeyViewmodel
{
    public ObservableCollection<Monkey> monkeys { get; set; }
    public MonkeyViewmodel()
    {
        #region How to load an XML file embedded resource
        var assembly = IntrospectionExtensions.GetTypeInfo(typeof(Page17)).Assembly;
        Stream stream = assembly.GetManifestResourceStream("demo3.MonkeyXML.xml");


        using (var reader = new StreamReader(stream))
        {
            var serializer = new XmlSerializer(typeof(ObservableCollection<Monkey>));
            monkeys = (ObservableCollection<Monkey>)serializer.Deserialize(reader);
        }
        #endregion
    }

}

public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
}

About MVVM and MVVM binding, please take a look:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm