inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileButton/MobileButton.xaml

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

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:material="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
             xmlns:local="clr-namespace:InABox.Mobile"
             x:Class="InABox.Mobile.MobileButton">
    <ContentView.Resources>
        
        <local:StringToBooleanConverter x:Key="StringToBooleanConverter"/>
        <local:ImageSourceToBooleanConverter x:Key="ImageSourceToBooleanConverter"/>
        <local:MobileButtonTextFormatter x:Key="MobileButtonTextFormatter" x:Name="_textformatter"/>
        <local:MobileButtonSizeConverter x:Key="HeightConverter" Dimension="Height" />
        <local:MobileButtonSizeConverter x:Key="WidthConverter" Dimension="Width" />
    </ContentView.Resources>
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <local:MobileCard
                x:Name="_frame"
                IsEnabled="True"
                BackgroundColor="{TemplateBinding BackgroundColor}"
                BorderColor="{TemplateBinding BorderColor}"
                Clicked="_frame_OnClicked"
                IsClippedToBounds="True"
                HeightRequest="100">
                <local:MobileCard.Triggers>
                    <DataTrigger TargetType="local:MobileCard" Binding="{TemplateBinding IsEnabled}" Value="False">
                        <Setter Property="BackgroundColor" Value="Silver" />
                    </DataTrigger>
                    <DataTrigger TargetType="local:MobileCard" Binding="{TemplateBinding IsEnabled}" Value="False">
                        <Setter Property="BorderColor" Value="Gray" />
                    </DataTrigger>
                </local:MobileCard.Triggers>
                <Grid>
                    <Grid 
                        Grid.Row="0"
                        Grid.Column="0" 
                        Padding = "{TemplateBinding Padding}">
                        
                        <StackLayout 
                            x:Name="_layout"
                            Grid.Row="0"
                            Grid.Column="0"
                            Orientation="{TemplateBinding Orientation}"
                            HorizontalOptions = "CenterAndExpand"
                            VerticalOptions = "CenterAndExpand">
                            
                            <Image 
                                x:Name="_image" 
                                Source="{TemplateBinding Image}"
                                IsVisible="{TemplateBinding Image, Converter={StaticResource ImageSourceToBooleanConverter}}"
                                WidthRequest="{TemplateBinding ImageSize, Converter={StaticResource WidthConverter}}"
                                HeightRequest="{TemplateBinding ImageSize, Converter={StaticResource HeightConverter}}"
                                Aspect="AspectFit"
                            />
                            
                            <material:MaterialLabel 
                                x:Name="_label" 
                                Text="{TemplateBinding Text, Converter={StaticResource MobileButtonTextFormatter}}" 
                                VerticalOptions="CenterAndExpand" 
                                HorizontalOptions="FillAndExpand"
                                TypeScale = "{TemplateBinding TypeScale}"
                                HorizontalTextAlignment = "Center"
                                TextColor="{TemplateBinding TextColor}"
                                IsVisible="{TemplateBinding Text, Converter={StaticResource StringToBooleanConverter}}" 
                                LineHeight="1"
                                >
                                <material:MaterialLabel.Triggers>
                                    <DataTrigger TargetType="material:MaterialLabel" Binding="{TemplateBinding IsEnabled}" Value="False">
                                        <Setter Property="TextColor" Value="Gray" />
                                    </DataTrigger>
                                </material:MaterialLabel.Triggers>

                            </material:MaterialLabel>
                            
                        </StackLayout>
                            

                    </Grid>
                    
                    <Frame 
                        Grid.Row="0"
                        Grid.Column="0" 
                        HorizontalOptions="End" 
                        VerticalOptions="Start" 
                        HeightRequest="20" 
                        WidthRequest="20" 
                        CornerRadius="15" 
                        IsVisible="{TemplateBinding Alert, Converter={StaticResource StringToBooleanConverter}}" 
                        HasShadow="False" 
                        Margin="0,2,2,0"
                        BackgroundColor="Yellow" Padding="1">
                        <Label 
                            FontAttributes="Bold" 
                            TextColor="Red" 
                            FontSize="Micro" 
                            HorizontalOptions="Center" 
                            VerticalOptions="Center" 
                            Text="{TemplateBinding Alert}"/>
                    </Frame>
                    
                </Grid>
                
            </local:MobileCard>
        </ControlTemplate>
    </ContentView.ControlTemplate>

</ContentView>