ItemTemplate এবং DataTemplate ব্যবহার

ItemTemplate এবং DataTemplate হল .NET MAUI তে ডেটা প্রদর্শন করার জন্য ব্যবহৃত দুটি গুরুত্বপূর্ণ কনসেপ্ট। এই কনসেপ্টগুলো মূলত কাস্টম UI তৈরি করতে ব্যবহৃত হয়, যেখানে ডেটাকে উপস্থাপন করার জন্য একাধিক UI উপাদান এবং লেআউট কন্ট্রোল ব্যবহার করা যায়।

১. ItemTemplate:

ItemTemplate হল এমন একটি টেমপ্লেট যা একটি CollectionView, ListView, বা Collection এর মতো কন্ট্রোলের আইটেমগুলির জন্য UI ডিজাইন করে। যখন ডেটা একটি কন্ট্রোল (যেমন ListView বা CollectionView) দ্বারা প্রদর্শিত হয়, তখন ItemTemplate প্রতিটি আইটেমের জন্য কাস্টম UI নির্ধারণ করে।

২. DataTemplate:

DataTemplate হল একটি কনটেইনার যা ডেটাকে UI উপাদানে রূপান্তরিত করে। এটি মূলত ItemTemplate এর ভিতরে ব্যবহৃত হয়। DataTemplate এ, আপনি ডেটার উপর ভিত্তি করে UI উপাদান যেমন লেবেল, বাটন, ইমেজ ইত্যাদি সংযুক্ত করতে পারেন।

ItemTemplate এবং DataTemplate উদাহরণ

নিচে, একটি CollectionView ব্যবহার করে ItemTemplate এবং DataTemplate এর মাধ্যমে ডেটা প্রদর্শন করার উদাহরণ দেওয়া হয়েছে।

১. ItemTemplate এবং DataTemplate সহ CollectionView

Model (Data class):

প্রথমে একটি Model ক্লাস তৈরি করা যেটি আমাদের ডেটার কাঠামো হবে।

public class Item
{
    public string Name { get; set; }
    public string Description { get; set; }
    public string ImageUrl { get; set; }
}

এখানে, Name, Description, এবং ImageUrl এর মতো প্রপার্টি থাকবে যেগুলো আমরা CollectionView এ প্রদর্শন করব।

XAML:

এখন CollectionView ব্যবহার করে ডেটা প্রদর্শন করি, যেখানে ItemTemplate এবং DataTemplate ব্যবহার করা হবে।

<CollectionView x:Name="ItemsCollectionView">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <!-- Image -->
                <Image Source="{Binding ImageUrl}" HeightRequest="50" WidthRequest="50" />
                
                <!-- Name and Description -->
                <StackLayout Orientation="Vertical" Padding="10">
                    <Label Text="{Binding Name}" FontSize="20" />
                    <Label Text="{Binding Description}" FontSize="14" TextColor="Gray" />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

এখানে:

• CollectionView: এটি একটি ডেটা কন্ট্রোল যা বিভিন্ন আইটেম (যেমন লিস্ট, গ্রিড) প্রদর্শন করতে ব্যবহৃত হয়।
• ItemTemplate: ItemTemplate এর ভিতরে DataTemplate ব্যবহৃত হয়েছে। এটি প্রতিটি আইটেমের জন্য কাস্টম UI তৈরি করবে।
• Binding: Binding ব্যবহার করে Model এর প্রপার্টিগুলো UI উপাদানগুলির সাথে সংযুক্ত করা হয়েছে, যেমন Name, Description, এবং ImageUrl।

Code Behind (C#):

এখন, ItemsCollectionView এর ডেটা সেট করার জন্য C# কোড লিখতে হবে।

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Sample data
        var items = new List<Item>
        {
            new Item { Name = "Item 1", Description = "Description for Item 1", ImageUrl = "https://via.placeholder.com/50" },
            new Item { Name = "Item 2", Description = "Description for Item 2", ImageUrl = "https://via.placeholder.com/50" },
            new Item { Name = "Item 3", Description = "Description for Item 3", ImageUrl = "https://via.placeholder.com/50" }
        };

        // Set the CollectionView's item source
        ItemsCollectionView.ItemsSource = items;
    }
}

এখানে:

• একটি List তৈরি করা হয়েছে, যা ডেটার তালিকা সরবরাহ করবে।
• ItemsCollectionView.ItemsSource ব্যবহার করে ডেটার তালিকা CollectionView এ প্রদর্শন করা হয়েছে।

২. ItemTemplate এবং DataTemplate সহ ListView

যদি ListView ব্যবহার করতে চান, তবে ItemTemplate এবং DataTemplate এর কাজ একইভাবে হবে। নিচে একটি উদাহরণ দেওয়া হল:

XAML:

<ListView x:Name="ItemsListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10">
                    <Image Source="{Binding ImageUrl}" HeightRequest="50" WidthRequest="50" />
                    <StackLayout Orientation="Vertical" Padding="10">
                        <Label Text="{Binding Name}" FontSize="20" />
                        <Label Text="{Binding Description}" FontSize="14" TextColor="Gray" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Code Behind (C#):

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Sample data
        var items = new List<Item>
        {
            new Item { Name = "Item 1", Description = "Description for Item 1", ImageUrl = "https://via.placeholder.com/50" },
            new Item { Name = "Item 2", Description = "Description for Item 2", ImageUrl = "https://via.placeholder.com/50" },
            new Item { Name = "Item 3", Description = "Description for Item 3", ImageUrl = "https://via.placeholder.com/50" }
        };

        // Set the ListView's item source
        ItemsListView.ItemsSource = items;
    }
}

এখানে কিছু গুরুত্বপূর্ণ পয়েন্ট:

• ItemTemplate: এটি ListView বা CollectionView তে প্রতিটি আইটেমের জন্য কাস্টম UI নির্ধারণ করে।
• DataTemplate: এটি ডেটার উপর ভিত্তি করে UI তৈরি করে। ডেটাকে বিভিন্ন UI উপাদান (যেমন Label, Image, Button) দিয়ে সাজানো যায়।
• Binding: Binding এর মাধ্যমে C# কোডে থাকা ডেটা UI উপাদানের সাথে সংযুক্ত করা হয়।

সারাংশ:

• ItemTemplate এবং DataTemplate ব্যবহার করে .NET MAUI তে ডেটাকে কাস্টম UI উপাদানে রূপান্তরিত করা যায়।
• ItemTemplate সাধারণত ListView বা CollectionView তে ডেটার প্রতিটি আইটেমের UI টেমপ্লেট হিসেবে ব্যবহৃত হয়।
• DataTemplate হল UI উপাদানগুলির একটি কনটেইনার, যা ডেটাকে UI এ রূপান্তরিত করতে সাহায্য করে।
• Binding এর মাধ্যমে ডেটাকে UI উপাদানের সাথে যুক্ত করা হয়।

এই পদ্ধতিতে আপনি ডেটা ড্রিভেন UI তৈরি করতে পারেন যা আরো বেশি ডাইনামিক এবং কাস্টমাইজেবল।