Nested View not showing Xamarin Forms

Question

I want to be able to display LessonView.xaml within MainPage.xaml. Here is my attempt below.

Am i missing something important that it wont display ?

MainPage.xaml

 <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:KanjiStudy"
                 x:Class="KanjiStudy.MainPage"
                 xmlns:views="KanjiStudy.View.LessonView">
        <ContentPage.Content>
            <StackLayout Orientation="Vertical">
                <Label Text="Welcome to Xamarin.Forms!"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <views:View.LessonView>
                </views:View.LessonView>    
                <StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
                    <Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
                    </Button>
                    <Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
                    </Button>
                </StackLayout>  
            </StackLayout>    
        </ContentPage.Content>
    </ContentPage>

LessonView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KanjiStudy.View.LessonView">
  <ContentView.Content>
      <StackLayout>
          <Label Text="i am a view" />
      </StackLayout>
  </ContentView.Content>
</ContentView>

Answer 1

The namespace declaration in MainPage.xaml should only include the namespace of where the view view: xmlns:views="KanjiStudy.View">

Then when displaying the view, use the xmlns name and C# class name (but not the C# namespace name), as such:

            <views:LessonView>
            </views:LessonView>    

The way to think about it is that the XAML parser will create an instance of the class for the view by taking the namespace path from the xmlns declaration, and finding the classname in there.

In other words, in the original code, it will attempt to look in the namespace KanjiStudy.View.LessonView. Since the full namespace + class name for your view is KanjiStudy.View.LessonView, put the namespace parts in the xmlns, and the classname on the XML tag where you want the view.

Answer 2

I was able to find a wpf tutorial this did something similar here http://blog.scottlogic.com/2012/02/06/a-simple-pattern-for-creating-re-useable-usercontrols-in-wpf-silverlight.html

MainPage.xaml This needed to use the following namespace
xmlns:local="clr-namespace:KanjiStudy.View">

instead of

xmlns:views="KanjiStudy.View.LessonView">

Then in the body i can pull in multiple lessonView objects so

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"            
             x:Class="KanjiStudy.MainPage"
             xmlns:local="clr-namespace:KanjiStudy.View">
    <ContentPage.Content>
        <StackLayout Orientation="Vertical">
            <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
                <Label Margin="0,20,0,0" Text="Grade 1"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
                <StackLayout HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
                    <local:LessonView  Margin="10,10,10,10">
                    </local:LessonView>
                    <local:LessonView  Margin="10,10,10,10">
                    </local:LessonView>
                    <local:LessonView  Margin="10,10,10,10">
                    </local:LessonView>
                </StackLayout>
            </StackLayout>
            <StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
                <Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
                </Button>
                <Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
                </Button>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>