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="LightYellow"/>
    </ContentView.Resources>

    <ContentView.BindingContext>
        <local:ToolGridViewModel x:Name="_viewModel" LayoutChanged="_viewModel_OnLayoutChanged"/>
    </ContentView.BindingContext>
    
    <ContentView.Content>
        
        <ScrollView>
            
            <Grid RowSpacing="00" ColumnSpacing="10"
                x:Name="_flexgrid"
                BindableLayout.ItemsSource = "{Binding Items}"
                HorizontalOptions="Fill"
                VerticalOptions="StartAndExpand"
               >
                
                <BindableLayout.ItemTemplate>
                
                <DataTemplate x:DataType="local:MobileMobileToolItem">
                    
                    <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="Silver"
                            HeightRequest="{Binding Source={RelativeSource Self}, Path=Width}"
                            BackgroundColor="{Binding HasIndicator, Converter={StaticResource BooleanToColorConverter}}"
                            Padding="0">
                            <Frame.Triggers>
                                <DataTrigger TargetType="Frame" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="BackgroundColor" Value="LightGray" />
                                </DataTrigger>
                            </Frame.Triggers>

                            <Grid RowSpacing="0" ColumnSpacing="0">
                                                               
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </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"
                                    Margin="15,0"
                                    Source="{Binding Image}">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="ImageTapped" />
                                    </Image.GestureRecognizers>
                                </Image>
                                
                                <Frame 
                                    x:Name="indicatorFrame" 
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    HasShadow="False"
                                    VerticalOptions="Start" 
                                    HorizontalOptions="End"
                                    CornerRadius="10" 
                                    IsVisible="{Binding HasIndicator}"
                                    BackgroundColor="Yellow" 
                                    BorderColor="Silver"
                                    Padding="0"
                                    Margin="4"
                                    HeightRequest="20">
                            
                                    <Label 
                                        FontAttributes="Bold" 
                                        TextColor="Red" 
                                        FontSize="Micro" 
                                        VerticalOptions="Center" 
                                        HorizontalTextAlignment="Center"
                                        HorizontalOptions="End"
                                        Margin="3,1,3,0"
                                        Text="{Binding Indicator}"
                                        WidthRequest="{Binding Source={RelativeSource Self}, Path=Height}"/>
                            
                                </Frame>
                                
                            </Grid>
                            

                            
                        </Frame>
                        
                        <Label 
                            Grid.Row="1" 
                            Text="{Binding Text}" 
                            FontSize="Micro" 
                            HorizontalTextAlignment="Center" 
                            VerticalTextAlignment="Start" 
                            Margin="0,-5,0,0"
                            TextColor="{Binding TextColor}">
                            <Label.Triggers>
                                <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="TextColor" Value="Gray" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label> 
                        
                    </Grid>
            
                    
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </Grid>
        </ScrollView>
    </ContentView.Content>
</ContentView>