Nested Template Using MVVM - Xamarin Form
Nested Template MVVM - Xamarin Form
Please, support my blog by clicking on our sponsors ad!
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.
Comments
Post a Comment