📘 Hour 10 – Advanced MAUI UI, Custom Controls & Bindable Properties

Welcome to Hour 10 of the MAUI MVVM learning series. Today, we explore more advanced UI concepts in MAUI, including:

• ➡ Creating custom reusable controls
• ➡ Creating bindable properties
• ➡ Using ControlTemplates
• ➡ Using DataTemplates effectively
• ➡ Custom Renderers / Handlers overview

---

✨ 1. Custom Reusable UI Controls

MAUI allows you to create your own reusable UI components using ContentView. These help avoid duplicated UI logic.

🧩 1.1 Creating a Custom Control

<!-- MyCardView.xaml -->
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             x:Class="MyApp.Controls.MyCardView">

    <Frame Padding="20" BackgroundColor="LightGray">
        <StackLayout>
            <Label x:Name="TitleLabel" FontSize="20" />
            <Label x:Name="SubtitleLabel" FontSize="14" />
        </StackLayout>
    </Frame>

</ContentView>

🧩 1.2 Code-behind (with bindable properties)

// MyCardView.xaml.cs
public partial class MyCardView : ContentView
{
    public static readonly BindableProperty TitleProperty =
        BindableProperty.Create(nameof(Title), typeof(string),
            typeof(MyCardView), string.Empty, propertyChanged: OnTitleChanged);

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    private static void OnTitleChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyCardView)bindable;
        control.TitleLabel.Text = (string)newValue;
    }

    public static readonly BindableProperty SubtitleProperty =
        BindableProperty.Create(nameof(Subtitle), typeof(string),
            typeof(MyCardView), string.Empty, propertyChanged: OnSubtitleChanged);

    public string Subtitle
    {
        get => (string)GetValue(SubtitleProperty);
        set => SetValue(SubtitleProperty, value);
    }

    private static void OnSubtitleChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyCardView)bindable;
        control.SubtitleLabel.Text = (string)newValue;
    }
}

🧪 1.3 Using the Custom Control in a Page

<controls:MyCardView Title="Welcome" Subtitle="Powered by MAUI" />

✔ This component is now reusable anywhere in your app.

---

✨ 2. Bindable Properties Explained

Bindable properties allow your controls to support data binding. They are the foundation of MAUI/MVVM communication.

• ✔ Support two-way binding
• ✔ Support change notifications
• ✔ Used heavily in custom controls

🧩 2.1 Short Bindable Property Example

public static readonly BindableProperty ValueProperty =
    BindableProperty.Create(nameof(Value), typeof(int),
        typeof(MySlider), 0);

public int Value
{
    get => (int)GetValue(ValueProperty);
    set => SetValue(ValueProperty, value);
}

✔ Add propertyChanged callback for advanced behavior.

---

✨ 3. ControlTemplates

ControlTemplates let you define a UI layout that multiple controls can share.

📄 3.1 Define a Template in XAML

<ControlTemplate x:Key="CardTemplate">
    <Frame BackgroundColor="LightYellow" Padding="20">
        <ContentPresenter />
    </Frame>
</ControlTemplate>

📄 3.2 Apply the Template

<ContentView ControlTemplate="{StaticResource CardTemplate}">
    <Label Text="This is templated content" />
</ContentView>

✔ Powerful for themeable and reusable structures.

---

✨ 4. DataTemplates

DataTemplates define how each item in a collection is displayed.

🧩 4.1 Collection Example

<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="10">
                <Label Text="{Binding Name}" />
                <Label Text="{Binding Price}" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

✔ Ideal for lists, cards, grids, and custom layouts.

---

✨ 5. Custom Handlers (Modern Replacement for Renderers)

Handlers allow platform-specific customization of MAUI controls. They are the modern alternative to Xamarin.Forms renderers.

🛠 5.1 Example: Change Entry Border Color (Android)

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("BorderColor", (handler, view) =>
{
#if ANDROID
    handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.LightBlue);
#endif
});

✔ Handlers are lightweight ✔ No inheritance needed ✔ Apply per control or globally

---

✨ 6. Combining Concepts – Custom Rating Control

This example shows custom UI + bindable property.

⭐ 6.1 Rating Control XAML

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             x:Class="MyApp.Controls.RatingControl">
    <HorizontalStackLayout x:Name="StarsLayout" />
</ContentView>

⭐ 6.2 Rating Control Code

public partial class RatingControl : ContentView
{
    public static readonly BindableProperty RatingProperty =
        BindableProperty.Create(nameof(Rating), typeof(int),
            typeof(RatingControl), 0, propertyChanged: OnRatingChanged);

    public int Rating
    {
        get => (int)GetValue(RatingProperty);
        set => SetValue(RatingProperty, value);
    }

    public RatingControl()
    {
        InitializeComponent();
        BuildStars();
    }

    private static void OnRatingChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (RatingControl)bindable;
        control.BuildStars();
    }

    private void BuildStars()
    {
        StarsLayout.Children.Clear();
        for (int i = 1; i <= 5; i++)
        {
            string star = i <= Rating ? "★" : "☆";
            StarsLayout.Children.Add(new Label { Text = star, FontSize = 30 });
        }
    }
}

⭐ 6.3 Using the Rating Control

<controls:RatingControl Rating="{Binding ProductRating}" />

✔ Clean, reusable, MVVM-friendly component.

---

📘 Hour 10 Summary

• ✔ Custom controls improve reusability
• ✔ Bindable properties enable MVVM-friendly components
• ✔ ControlTemplates allow themed layouts
• ✔ DataTemplates define list rendering
• ✔ Handlers offer platform customizations
• ✔ Complex UI components can be built easily