On this page

Custom Settings Container

Container

Here I have written a container where you can add any elements. The design is written to look like the button. The container with a switch looks like this:

Key features

Icon awareness ensures the text region shifts automatically when an icon is provided.
Template bindings expose the inner content via ContentPresenter, so the control stays flexible.
The IsIconVisible flag keeps layouts compact when you omit an icon.

Here is the corresponding code for it:

<?xml version="1.0" encoding="utf-8"?>

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="App.Elements.Container">

    <ContentView.ControlTemplate>
        <ControlTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <HorizontalStackLayout Margin="8,0,0,0">
                    <Image Source="{TemplateBinding IconSource}"
                        IsVisible="{TemplateBinding IsIconVisible}"
                        HeightRequest="25" WidthRequest="25"
                        Margin="17,0,0,0" />

                    <Label Text="{TemplateBinding Text}" Margin="20,0,0,0"
                        VerticalOptions="Center" />
                </HorizontalStackLayout>

                <ContentPresenter Margin="25,0,25,0" Grid.Column="1" />
            </Grid>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

namespace App.Elements;

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Container : ContentView
{

    #region Fields

    public static readonly BindableProperty IconSourceProperty = BindableProperty.Create(nameof(IconSource), typeof(ImageSource), typeof(Container));

    public static readonly BindableProperty IsIconVisibleProperty = BindableProperty.Create(nameof(IsIconVisible), typeof(bool), typeof(Container));

    public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(Container), string.Empty);

    #endregion

    #region Properties

    public bool IsIconVisible
    {
        get => (bool)GetValue(IsIconVisibleProperty);
        set => SetValue(IsIconVisibleProperty, value);
    }

    public ImageSource IconSource
    {
        get
        {
            var imageSource = (ImageSource)GetValue(IconSourceProperty);
            IsIconVisible = imageSource != null;
            return imageSource;
        }
        set
        {
            SetValue(IconSourceProperty, value);
            IsIconVisible = value != null;
        }
    }

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    #endregion

    public Container() { InitializeComponent(); }
}

How to use

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:fluent="http://www.aathifmahir.com/dotnet/2022/maui/icons"
             xmlns:elements="using:App.Elements">

    <Grid>

        <elements:Container x:Name="Container"
            IconSource="{fluent:Fluent Settings48, IconColor={AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}}"
            Text="Settings">
            <Switch x:Name="Switch" IsToggled="True" />
        </elements:Container>

    </Grid>
</ContentPage>

NuGet Packages

MauiIcons

Implementation notes

Expose additional bindable properties (for example IconSource or Text) through partial classes when you need to react in XAML.
Wrap the control in ContentPresenter-based templates if you plan to host it inside a list—this keeps virtualization efficient.
When hosting input controls, set HorizontalOptions="Fill" on the child to ensure the grid column expands correctly.