inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileToolGrid/MobileToolGrid.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:local="clr-namespace:InABox.Mobile"
             x:Class="InABox.Mobile.MobileToolGrid">
    
    <ContentView.Resources>
        <local:BooleanToColorConverter x:Key="BooleanToColorConverter" TrueColor="LightSalmon" FalseColor="LightGoldenrodYellow"/>
    </ContentView.Resources>

    <ContentView.BindingContext>
        <local:ToolGridViewModel x:Name="_viewModel" LayoutChanged="_viewModel_OnLayoutChanged"/>
    </ContentView.BindingContext>
    
    <ContentView.Content>
        
        <ScrollView>
            
            <Grid RowSpacing="5" ColumnSpacing="5"
                x:Name="_flexgrid"
                BindableLayout.ItemsSource = "{Binding Items}"
                HorizontalOptions="Fill"
                VerticalOptions="StartAndExpand"
               >
                
                <BindableLayout.ItemTemplate>
                
                <DataTemplate x:DataType="local:MobileToolItem">
                    
                    <Grid 
                        Margin="0"
                        Grid.Row="{Binding Row}"
                        Grid.Column="{Binding Column}"
                        IsVisible="True"
                        VerticalOptions="Fill"
                        HorizontalOptions="Fill">
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <!-- <RowDefinition Height="15"/> -->
                        </Grid.RowDefinitions>
                        
                        <Frame 
                            CornerRadius="5" 
                            HasShadow="False" 
                            Margin="0" 
                            x:Name="toolFrame" 
                            Grid.Row="0" 
                            Grid.Column="0" 
                            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type local:MobileToolGrid}}, Path=BorderColor}"
                            HeightRequest="{Binding Source={RelativeSource Self}, Path=Width}"
                            BackgroundColor="{Binding AlertVisible, Converter={StaticResource BooleanToColorConverter}}"
                            Padding="0">
                            <Frame.Triggers>
                                <DataTrigger TargetType="Frame" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="BackgroundColor" Value="LightGray" />
                                </DataTrigger>
                                <DataTrigger TargetType="Frame" Binding="{Binding AlertVisible}" Value="True">
                                    <Setter Property="BackgroundColor" Value="LightSalmon" />
                                </DataTrigger>
                            </Frame.Triggers>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="ToolItem_Tapped" />
                            </Frame.GestureRecognizers>

                            <Grid RowSpacing="0" ColumnSpacing="0">
                                                               
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <Image 
                                    x:Name="toolEntryImage"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    Grid.RowSpan="2"
                                    Source="{Binding Image}">
                                    <Image.Margin>
                                        <OnIdiom x:TypeArguments="Thickness">
                                            <OnIdiom.Phone>
                                                <OnPlatform x:TypeArguments="Thickness">
                                                    <On Platform="iOS" Value="15,0"/>
                                                    <On Platform="Android" Value="15,0"/>
                                                </OnPlatform>
                                            </OnIdiom.Phone>
                                            <OnIdiom.Tablet>
                                                <OnPlatform x:TypeArguments="Thickness">
                                                    <On Platform="iOS" Value="30,15"/>
                                                    <On Platform="Android" Value="30,15"/>
                                                </OnPlatform>
                                            </OnIdiom.Tablet>
                                        </OnIdiom>
                                    </Image.Margin>
                   
                                </Image>
                                
                                <Frame 
                                    x:Name="indicatorFrame" 
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    HasShadow="False"
                                    VerticalOptions="Start" 
                                    HorizontalOptions="End"
                                    CornerRadius="10" 
                                    IsVisible="{Binding AlertVisible}"
                                    BackgroundColor="Yellow" 
                                    BorderColor="{Binding Source={RelativeSource AncestorType={x:Type local:MobileToolGrid}}, Path=BorderColor}"
                                    Padding="0"
                                    Margin="4"
                                    HeightRequest="20"
                                    WidthRequest="20">
                            
                                    <Label 
                                        FontAttributes="Bold" 
                                        TextColor="Red" 
                                        FontSize="9" 
                                        HorizontalTextAlignment="Center"
                                        VerticalTextAlignment="Center"
                                        Text="{Binding Alert}"
                                        WidthRequest="{Binding Source={RelativeSource Self}, Path=Height}"/>
                            
                                </Frame>
                                
                                <Label 
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    Text="{Binding Text}" 
                                    FontSize="Micro" 
                                    Margin="0,0,0,5"
                                    HorizontalTextAlignment="Center" 
                                    VerticalTextAlignment="Start" 
                                    TextColor="{Binding TextColor}">
                                    <Label.Triggers>
                                        <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                                            <Setter Property="TextColor" Value="Gray" />
                                        </DataTrigger>
                                    </Label.Triggers>
                                </Label> 
                                
                            </Grid>
                            
                        </Frame>
                        
                    </Grid>
                    
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </Grid>
        </ScrollView>
    </ContentView.Content>
</ContentView>