Nested Template Using MVVM - Xamarin Form

Nested Template MVVM - Xamarin Form

Code is explain in this video

SkillTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModels"
             x:Class="MVVMDemo.Views.ListTemplate.SkillTemplate">
  <ContentView.Content>
        <StackLayout x:DataType="vm:TechnicalSkill" Padding="0,10">
            <Label Text="{Binding Name}" TextColor="Black"/>
      </StackLayout>
  </ContentView.Content>
</ContentView>  

EducationTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModels"
             x:Class="MVVMDemo.Views.ListTemplate.EducationTemplate">
  <ContentView.Content>
        <StackLayout x:DataType="vm:Education" VerticalOptions="FillAndExpand"  HeightRequest="80">
            <Frame CornerRadius="10" HorizontalOptions="FillAndExpand" BackgroundColor="#01656A" VerticalOptions="FillAndExpand" Margin="5">
            <Label Text="{Binding Name}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" TextColor="White"/>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>  

MyDetail.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModels"
             x:Class="MVVMDemo.Views.Template.MyDetail">
  <ContentView.Content>
      <Grid x:DataType="vm:EmployeeViewModel" RowDefinitions="Auto,Auto,Auto">
            <Label Text="{Binding Name}" Grid.Row="0" TextColor="Black" ></Label>
            <Label Text="{Binding Address}" Grid.Row="1" TextColor="Black" ></Label>
            <Picker ItemsSource="{Binding CityList}" Grid.Row="2" ItemDisplayBinding="{Binding CityName}" TextColor="Black" ></Picker>
      </Grid>
  </ContentView.Content>
</ContentView>  

MyEducation.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModels" 
             xmlns:template="clr-namespace:MVVMDemo.Views.ListTemplate"
             x:Class="MVVMDemo.Views.Template.MyEducation">
  <ContentView.Content>
        <StackLayout x:DataType="vm:EmployeeViewModel">
            <CollectionView Grid.Row="4"  SelectionMode="Single"   x:Name="cv" 
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" ItemsSource="{Binding EducationList}" HeightRequest="{Binding EducationListHeight}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="2"></GridItemsLayout>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate >
                    <DataTemplate>
                        <template:EducationTemplate></template:EducationTemplate>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
  </ContentView.Content>
</ContentView>  

MySkill.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModels" 
             xmlns:template="clr-namespace:MVVMDemo.Views.ListTemplate"
             x:Class="MVVMDemo.Views.Template.MySkill">
    <ContentView.Content>
        <StackLayout x:DataType="vm:EmployeeViewModel">
            <ListView x:Name ="listview" HasUnevenRows="True" SeparatorVisibility="Default" HeightRequest="{Binding TechnicalSkillListViewHeight}" ItemsSource="{Binding TechnicalSkillList}" SeparatorColor="Gray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <template:SkillTemplate  />
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView.Content>
</ContentView>  

MyInfo.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:template="clr-namespace:MVVMDemo.Views.Template" 
             xmlns:local="clr-namespace:MVVMDemo.ViewModels"
             x:Class="MVVMDemo.Views.MyInfo"
             BackgroundColor="#e1e1e1"
             Title="Nested Template MVVM Demo">
    <ContentPage.Content>
        <RefreshView x:Name="refreshView" x:DataType="local:InformationViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
            <ScrollView>
                <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" Padding="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Frame Grid.Row="0"  Padding="10" CornerRadius="10" BackgroundColor="Black">
                    <Label Text="My Detail" TextColor="White" ></Label>
                    </Frame>
                    <template:MyDetail Grid.Row="1" BindingContext="{Binding data}"></template:MyDetail>
                    <Frame Grid.Row="2"  Padding="10" CornerRadius="10" BackgroundColor="Black">
                        <Label Text="My Skill" TextColor="White"></Label>
                    </Frame>
                    <template:MySkill Grid.Row="3" BindingContext="{Binding data}"></template:MySkill>
                    <Frame Grid.Row="4"  Padding="10" CornerRadius="10" BackgroundColor="Black">
                        <Label  Text="My Education" TextColor="White"></Label>
                    </Frame>
                    <template:MyEducation Grid.Row="5" BindingContext="{Binding data}"></template:MyEducation>
                </Grid>
            </ScrollView>
        </RefreshView>
    </ContentPage.Content>
</ContentPage>  

MyInfo.xaml.cs

    public partial class MyInfo : ContentPage
    {
        InformationViewModel _viewModel;
        public MyInfo()
        {
            InitializeComponent();
            BindingContext = _viewModel = new InformationViewModel();
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
            _viewModel.OnAppearing();
        }
    }  

InformationViewModel

    public class InformationViewModel : BaseViewModel
    {
        public Command LoadItemsCommand { get; }
        public Command ValueUpdated { get; }
        private EmployeeViewModel _data;
        public EmployeeViewModel data
        {
            get
            {
                return _data;
            }
            set
            {
                SetProperty(ref _data, value);

            }
        }

        public InformationViewModel()
        {
            LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());
        }
        public void OnAppearing()
        {
            IsBusy = true;
        }

        public async Task ExecuteLoadItemsCommand()
        {
            IsBusy = true;

            try
            {
                EmployeeViewModel vm = new EmployeeViewModel();
                vm.Name = "Xamarin UI Design";
                vm.Address = "India";
                vm.CityList = new List<City>();
                vm.CityList.Add(new City { CityName = "Surat" });
                vm.CityList.Add(new City { CityName = "Agra" });
                vm.CityList.Add(new City { CityName = "Pune" });
                vm.CityList.Add(new City { CityName = "Banglore" });
                vm.CityList.Add(new City { CityName = "Mumbai" });
                vm.CityList.Add(new City { CityName = "Delhi" });

                vm.TechnicalSkillList = new List<TechnicalSkill>();
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "Asp.Net" });
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "MVC" });
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "Xamarin" });
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "Window Application" });
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "Crystal Report" });
                vm.TechnicalSkillList.Add(new TechnicalSkill { Name = "RDLC Report" });

                vm.EducationList = new List<Education>();
                vm.EducationList.Add(new Education { Name = "10th" });
                vm.EducationList.Add(new Education { Name = "12th" });
                vm.EducationList.Add(new Education { Name = "B.sc[CS]" });
                vm.EducationList.Add(new Education { Name = "M.sc[CA]" });

                data = vm;
            }
            catch (Exception ex)
            {
                await App.Current.MainPage.DisplayAlert("Demo", ex.Message, "OK");
            }
            finally
            {
                IsBusy = false;
            }
        }
    }  

EmployeeViewModel

    public class EmployeeViewModel
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public List<City> CityList { get; set; }
        public List<TechnicalSkill> TechnicalSkillList { get; set; }
        public List<Education> EducationList { get; set; }
        public int TechnicalSkillListViewHeight
        {
            get
            {
                return TechnicalSkillList.Count() * 40;
            }
        }

        public int EducationListHeight
        {
            get
            {
                return ((TechnicalSkillList.Count() / 2) + 1) * 40;
            }
        }
    }

    public class TechnicalSkill
    {
        public string Name { get; set; }
    }

    public class Education
    {
        public string Name { get; set; }
    }

    public class City
    {
        public string CityName { get; set; }
    }  

Code is explain in this video

Hope you like this blog, Please share your feedback in comment section.