Binding ContentView to ContentPage

Question

I am trying to implement a xamarin app that will have a MainPage like a container that will host the rest of my pages(as content view?).

MainPage.xaml

<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"
         xmlns:views="clr-namespace:TalosLib"
         mc:Ignorable="d"
         x:Class="TalosLib.MainPage">


<ContentPage.Content>
    <StackLayout >

        <StackLayout.Resources>
            <DataTemplate x:Key="login">
                <views:LoginPage />
            </DataTemplate>
        </StackLayout.Resources>
        
        <ContentView Content="{Binding CurrentView}" ControlTemplate="{StaticResource login}"/>
    <!--<CollectionView ItemsSource="{Binding CurrentView}" ItemTemplate="{StaticResource login}"/>-->
    </StackLayout>
</ContentPage.Content>

MainPageModel.cs

public class MainPageModel : FreshBasePageModel
{
    //private ObservableCollection<LoginPageModel> _currentView;

    //public ObservableCollection<LoginPageModel> CurrentView
    //{
    //    get { return _currentView; }
    //    set { _currentView = value; RaisePropertyChanged("CurrentView"); }
    //}

    private LoginPageModel _currentView;

    public LoginPageModel CurrentView
    {
        get { return _currentView; }
        set { _currentView = value; RaisePropertyChanged("CurrentView"); }
    }

    public override void Init(object initData)
    {
        base.Init(initData);
        //CurrentView = new ObservableCollection<LoginPageModel>();
        //CurrentView.Add(new LoginPageModel());
        CurrentView = new LoginPageModel();
        RaisePropertyChanged(nameof(CurrentView));
    }


}

Right now i am trying just to show the LoginPage but it doesn't appear. I managed to make it work if i used the commented parts of the code. i am using FreshMVVM. Any thoughts?

Answer 1

Control templates help you define the root view like navbar or headers in all pages. I am not sure why you want to bind content property if you want to use a static resource. If you are going to change the content then we can use data templates and use a converter to convert the ViewModel to view.

If you are interested to change the content of the ContentView, then you can use data templates as follows:

    <ResourceDictionary>
        <views:DataTemplateToViewConverter x:Key="dataTemplateToViewConverter" />

        <DataTemplate x:Key="Login">
            <views:LoginView />
        </DataTemplate>
        <DataTemplate x:Key="Demo">
            <views:DemoView />
        </DataTemplate>
    </ResourceDictionary>


     <ContentView x:Name="contentview" Content="{Binding MyTemplate, Converter={StaticResource dataTemplateToViewConverter}}" />
        <Button
            Command="{Binding Clicked1}"
            Text="1" />
        <Button
            Command="{Binding Clicked2}"
            Text="2" />

In your ViewModel, you can use the command interface and set the templates on clicked commands.. don't forget to create your MyTemplate bindable property.

    private void Clicked2Called(object obj)
    {
        MyTemplate = "DemoView";
    }

    private void Clicked1Called(object obj)
    {
        MyTemplate = "Login";
    }

In your converter you can do as follows:

  public class DataTemplateToViewConverter : IValueConverter
  {
    public DataTemplateToViewConverter()
    {
    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value.ToString() == "Login")
            return new LoginView();
        else
            return new DemoView();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
  }

There are lots of ways to do this still better...I have used buttons to change the content, I am not sure how you wish to change the views when the menu items are selected. Hope it helps you solve your problem.