Custom Settings Button

<?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"
            xmlns:icons="http://www.aathifmahir.com/dotnet/2022/maui/icons"
            x:Class="App.Elements.Button">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Style="{StaticResource SettingsButton}" Clicked="ContentButton_Clicked" Pressed="ContentButton_Pressed"
                Released="ContentButton_Released" />

        <Grid ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Image x:Name="IconImage" Source="{icons:Fluent Settings48, IconColor={AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}}"
                  HeightRequest="25" WidthRequest="25"
                  Margin="25,0,0,0" Grid.Column="0" />

            <Label Grid.Column="1" x:Name="LabelText" Margin="20,0,0,0"
                  VerticalOptions="Center" />

            <Image Source="{icons:Fluent IosArrowRtl24, IconColor={AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}}"
                  HeightRequest="14" WidthRequest="14"
                  Margin="0,0,25,0" Grid.Column="2" />
        </Grid>
    </Grid>
</ContentView>

namespace App.Elements;

public partial class Button : ContentView
{

    #region Fields

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

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

    #endregion

    #region Properties

    public ImageSource IconSource
    {
        get => (ImageSource)GetValue(IconSourceProperty);
        set => SetValue(IconSourceProperty, value);
    }

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

    #endregion

    public Button() { InitializeComponent(); }

    #region Methods

    // Update Image
    protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);

        if (propertyName == IconSourceProperty.PropertyName)
        {
            IconImage.Source = IconSource;
        }
        else if (propertyName == TextProperty.PropertyName)
        {
            LabelText.Text = Text;
        }
    }

    // Click Event
    private void ContentButton_Clicked(object sender, EventArgs e)
    {
        // Invoke
        Clicked?.Invoke(this, EventArgs.Empty);
    }

    private void ContentButton_Pressed(object sender, EventArgs e) { Pressed?.Invoke(this, EventArgs.Empty); }

    private void ContentButton_Released(object sender, EventArgs e) { Released?.Invoke(this, EventArgs.Empty); }

    // Events
    public event EventHandler Clicked;
    public event EventHandler Pressed;
    public event EventHandler Released;

    #endregion

}

<Style x:Key="SettingsButton" TargetType="Button">
    <Setter Property="TextColor"
            Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    <Setter Property="BackgroundColor"
            Value="Transparent" />
    <Setter Property="BorderColor"
            Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="FontFamily" Value="OpenSansRegular" />
    <Setter Property="FontSize" Value="15" />
    <Setter Property="BorderWidth" Value="0" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="MinimumHeightRequest" Value="50" />
    <Setter Property="MinimumWidthRequest" Value="50" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="0.5" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver" />
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <!-- Here you can set the animation effects, e.g. change the colors -->
                        <Setter Property="BackgroundColor"
                                Value="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray600}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Color x:Key="White">White</Color>
<Color x:Key="Black">Black</Color>
<Color x:Key="Gray200">#C8C8C8</Color>
<Color x:Key="Gray600">#404040</Color>