Search This Blog

Monday 9 December 2019

Xamarin Form Data Template Selector





DataTemplate Selector: Create the Custom Class that inherits the DataTemplateSelector class.
Then implement the OnSelectTemplate method.


Example: Here in the example I select the template based on isDetail Property of EmployeeModel Class.

CustomTemplateSelector.cs
using System;
using System.Collections.Generic;
using System.Text;
using TestAppDemo.Model;
using Xamarin.Forms;
 
namespace TestAppDemo.Selector
{
    public class CustomTemplateSelector : DataTemplateSelector
    {
        public DataTemplate normalTemplate { get; set; }
        public DataTemplate detailTemplate { get; set; }
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var obj = (EmployeeModel)item;
            if (obj.isDetail)
            {
                return detailTemplate;
            }
            return normalTemplate;
 
        }
    }
}


EmployeeModel
public  class EmployeeModel
{
      public int Id { get; set; }
      public string Name { get; set; }
      public string Email { get; set; }
      public bool isDetail { get; set; }
      public string Address { get; set; }
}
 


How to Add Template: You can add a template, custom template selector in App.xaml or on a ContentPage using ContentPage.Resources.

<ContentPage.Resources>
        <ResourceDictionary>
                       <!-- DataTemlate with key -->
                      <!-- Custom Template Selector -->
         </ResourceDictionary>
</ContentPage.Resources>

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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:selector="clr-namespace:TestAppDemo.Selector"
             mc:Ignorable="d"
             x:Class="TestAppDemo.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="normalDataTemplate">
                <ViewCell >
                    <StackLayout BackgroundColor="LightBlue" >
                        <Label  Text="This is normal Template" />
                        <Label Text="{Binding Name}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="detailDataTemplate">
                <ViewCell >
                    <StackLayout BackgroundColor="Yellow">
                        <Label Text="This is details template" />
                        <Label Text="{Binding Name}" />
                        <Label Text="{Binding Email}" />
                        <Label Text="{Binding Address}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
 
            <selector:CustomTemplateSelector x:Key="mainTemplate"  normalTemplate="{StaticResource normalDataTemplate}" detailTemplate="{StaticResource  detailDataTemplate}">
            </selector:CustomTemplateSelector>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <ListView   ItemTemplate="{StaticResource mainTemplate}" HasUnevenRows="True"  x:Name="lstData">
        </ListView>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TestAppDemo.Model;
using TestAppDemo.ViewModel;
using Xamarin.Forms;
namespace TestAppDemo
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            ShowData();
        }
        private void ShowData()
        {
            List<EmployeeModel> lst = new List<EmployeeModel>();
            lst.Add(new EmployeeModel()
            {
                Id=0,
                Email="Test@Xamarin.com"
            });
            lst.Add(new EmployeeModel()
            {
                Name = "Test2",
                Email = "Test@Xamarin.com",
                isDetail=true,
                Address="Address1 address 2 address 3"
            });
            lst.Add(new EmployeeModel()
            {
                Name = "Test3",
                Email = "Test@Xamarin.com"
            });
            lst.Add(new EmployeeModel()
            {
                Name = "Test4",
                Email = "Test@Xamarin.com",
                isDetail = true,
                Address = "Address1 address 2 address 3"
            });
 
            lst.Add(new EmployeeModel()
            {
                Name = "Test5",
                Email = "Test@Xamarin.com"
            });
 
            lstData.ItemsSource = lst;
        }
    }
}



No comments:

Post a Comment

Popular Posts